How to incorporate websocket into just one route of my Expo App (using Express.js in my backend for routing and REST APIs)

I have a frontend built on Expo React Native and I am using Nod.js to interact with my Azure IoT Hub on my backend with Express.js to do routing. I am using REST APIs from the frontend.

My application has multiple pages, and on one of the pages, I need to be able to get real-time data from my IoT Hub. I read online that REST APIs are not suited for real-time data and that a websocket is the best option.

I am using this code from an Azure sample to connect to my endpoint on Azure, but I am not sure how to incorporate this into my server.js or my frontend. I still want to use REST APIs for the rest of my pages.

iothubConnectionStringWebsockets.js -- adapted from the link and this

const crypto = require("crypto");
const { Buffer } = require("buffer");
const { Connection, ReceiverEvents, parseConnectionString } = require("rhea-promise");
const rheaPromise = require("rhea-promise");
const { EventHubConsumerClient, earliestEventPosition } = require("@azure/event-hubs");
const WebSocket = require("ws");
// Load the .env file if it exists
require("dotenv").config();
/**
* Type guard for AmqpError.
* @param err - An unknown error.
*/
function isAmqpError(err) {
return rheaPromise.isAmqpError(err);
}
// This code is modified from https://docs.microsoft.com/en-us/azure/iot-hub/iot-hub-devguide-security#security-tokens.
function generateSasToken(resourceUri, signingKey, policyName, expiresInMins) {
resourceUri = encodeURIComponent(resourceUri);
const expiresInSeconds = Math.ceil(Date.now() / 1000 + expiresInMins * 60);
const toSign = resourceUri + "\n" + expiresInSeconds;
// Use the crypto module to create the hmac.
const hmac = crypto.createHmac("sha256", Buffer.from(signingKey, "base64"));
hmac.update(toSign);
const base64UriEncoded = encodeURIComponent(hmac.digest("base64"));
// Construct authorization string.
return `SharedAccessSignature sr=${resourceUri}&sig=${base64UriEncoded}&se=${expiresInSeconds}&skn=${policyName}`;
}
/**
* Converts an IotHub Connection string into an Event Hubs-compatible connection string.
* @param connectionString - An IotHub connection string in the format:
* `"HostName=<your-iot-hub>.azure-devices.net;SharedAccessKeyName=<KeyName>;SharedAccessKey=<Key>"`
* @returns An Event Hubs-compatible connection string in the format:
* `"Endpoint=sb://<hostname>;EntityPath=<your-iot-hub>;SharedAccessKeyName=<KeyName>;SharedAccessKey=<Key>"`
*/
async function convertIotHubToEventHubsConnectionString(connectionString) {
const { HostName, SharedAccessKeyName, SharedAccessKey } =
parseConnectionString(connectionString);
// Verify that the required info is in the connection string.
if (!HostName || !SharedAccessKey || !SharedAccessKeyName) {
throw new Error(`Invalid IotHub connection string.`);
}
//Extract the IotHub name from the hostname.
const [iotHubName] = HostName.split(".");
if (!iotHubName) {
throw new Error(`Unable to extract the IotHub name from the connection string.`);
}
// Generate a token to authenticate to the service.
// The code for generateSasToken can be found at https://docs.microsoft.com/en-us/azure/iot-hub/iot-hub-devguide-security#security-tokens
const token = generateSasToken(
`${HostName}/messages/events`,
SharedAccessKey,
SharedAccessKeyName,
5 // token expires in 5 minutes
);
const connection = new Connection({
transport: "tls",
host: HostName,
hostname: HostName,
username: `${SharedAccessKeyName}@sas.root.${iotHubName}`,
port: 443,
reconnect: false,
password: token,
webSocketOptions: {
webSocket: WebSocket,
protocol: ["AMQPWSB10"],
url: `wss://${HostName}:${443}/$servicebus/websocket`,
},
});
await connection.open();
// Create the receiver that will trigger a redirect error.
const receiver = await connection.createReceiver({
source: { address: `amqps://${HostName}/messages/events/$management` },
});
return new Promise((resolve, reject) => {
receiver.on(ReceiverEvents.receiverError, (context) => {
const error = context.receiver && context.receiver.error;
if (isAmqpError(error) && error.condition === "amqp:link:redirect") {
const hostname = error.info && error.info.hostname;
const parsedAddress = error.info.address.match(/5671\/(.*)\/\$management/i);
if (!hostname) {
reject(error);
} 
else if (parsedAddress == undefined || (parsedAddress && parsedAddress[1] == undefined)) {
const msg = `Cannot parse the EventHub name from the given address: ${error.info.address} in the error: ` +
`${error.stack}\n${JSON.stringify(error.info)}.\nThe parsed result is: ${JSON.stringify(parsedAddress)}.`;
reject(Error(msg));
} 
else {
const entityPath = parsedAddress[1];
resolve(`Endpoint=sb://${hostname}/;EntityPath=${entityPath};SharedAccessKeyName=${SharedAccessKeyName};SharedAccessKey=${SharedAccessKey}`);
}
} else {
reject(error);
}
connection.close().catch(() => {
/* ignore error */
});
});
});
}
class EventHubReader {
constructor(iotHubConnectionString, consumerGroup) {
this.iotHubConnectionString = iotHubConnectionString;
this.consumerGroup = consumerGroup;
}
async startReadMessage(startReadMessageCallback) {
try {
const eventHubConnectionString = await convertIotHubToEventHubsConnectionString(this.iotHubConnectionString);
const consumerClient = new EventHubConsumerClient(this.consumerGroup, eventHubConnectionString);
console.log('Successfully created the EventHubConsumerClient from IoT Hub event hub-compatible connection string.');
const partitionIds = await consumerClient.getPartitionIds();
console.log('The partition ids are: ', partitionIds);
consumerClient.subscribe({
processEvents: (events, context) => {
for (let i = 0; i < events.length; ++i) {
startReadMessageCallback(
events[i].body,
events[i].enqueuedTimeUtc,
events[i].systemProperties["iothub-connection-device-id"]);
}
},
processError: (err, context) => {
console.error(err.message || err);
}
});
} catch (ex) {
console.error(ex.message || ex);
}
}
// Close connection to Event Hub.
async stopReadMessage() {
const disposeHandlers = [];
this.receiveHandlers.forEach((receiveHandler) => {
disposeHandlers.push(receiveHandler.stop());
});
await Promise.all(disposeHandlers);
this.consumerClient.close();
}
}
module.exports = EventHubReader;

server.js

const express = require('express');
const cors = require('cors');
const PORT = 3000;
const app = express();
app.use(express.json());
app.use(cors());
app.get('/home', (req, res) => {
// I only want to get real time data on this page
});
app.get('/login', (req, res) => {
});
app.post('/control', (req, res) => {
});
app.post('/configure', (req, res) => {
});
app.post('/settings', (req, res) => {
});
app.listen(PORT, () => {
console.log("Server Listening on PORT:", PORT);
});
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
wss.broadcast = (data) => {
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
try {
console.log(`Broadcasting data ${data}`);
client.send(data);
} catch (e) {
console.error(e);
}
}
});
};
server.listen(PORT, () => {
console.log('Listening on %d.', server.address().port);
});
const eventHubReader = new EventHubReader(iotHubConnectionString, eventHubConsumerGroup);
(async () => {
await eventHubReader.startReadMessage((message, date, deviceId) => {
try {
const payload = {
IotData: message,
MessageDate: date || Date.now().toISOString(),
DeviceId: deviceId,
};
wss.broadcast(JSON.stringify(payload));
} catch (err) {
console.error('Error broadcasting: [%s] from [%s].', err, message);
}
});
})().catch();

home.js

// how to connect with backend to use the websocket?

I am not entirely sure how this websocket for this route is supposed to work in relation to the rest of my routes and pages. Does it affect how the server is supposed to work for the rest of the pages? How am I supposed to incorporate this?

>Does it affect how the server is supposed to work for the rest of the pages? How am I supposed to incorporate this?

• Integrate the WebSocket server and the Azure IoT Hub communication into your existing server.js file.

• Try to combine WebSocket server and the Express server into one HTTP server that handles both WebSocket and REST API requests. Check below which I create the WebSocket server and the HTTP server.

// Incorrect: Separate creation of WebSocket server and HTTP server
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
server.listen(PORT, () => {
  console.log('Listening on %d.', server.address().port);
});

// Correct: Combined creation of WebSocket server and HTTP server
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

// Continue with the WebSocket and IoT Hub logic...

• Establish WebSocket connection to receive real-time data from your IoT Hub. You will need to use the WebSocket API provided by React Native (Expo).

home.js:

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

const HomeScreen = () => {
  // State to hold the real-time data received from the WebSocket
  const [realTimeData, setRealTimeData] = React.useState('');

  useEffect(() => {
    // WebSocket connection URL
    const webSocketURL = 'ws://YOUR_SERVER_IP_ADDRESS:3000';

    // Create a new WebSocket instance
    const socket = new WebSocket(webSocketURL);

    // Event handler for when the WebSocket connection is established
    socket.onopen = () => {
      console.log('WebSocket connected.');
    };

    // Event handler for when the WebSocket receives a message
    socket.onmessage = (event) => {
      // Parse the received message
      const data = JSON.parse(event.data);
      // Update the state with the received data
      setRealTimeData(data.IotData);
    };

    // Event handler for WebSocket errors
    socket.onerror = (error) => {
      console.error('WebSocket error:', error);
    };

    // Clean up the WebSocket connection when the component is unmounted
    return () => {
      socket.close();
    };
  }, []); // Empty dependency array to run the effect only once

  return (
    <View>
      <Text>Real-time IoT Data:</Text>
      <Text>{realTimeData}</Text>
      {/* Add other components and UI elements for your Home screen */}
    </View>
  );
};

export default HomeScreen;

• The WebSocket URL should be set to the server's address and port, where your backend is running.

• WebSocket will work, and the frontend will receive real-time data from the IoT Hub through the WebSocket connection while still using the REST API for other pages and functionality.

For more details refer this WebSocket connection with React-Router and SO