SignalR with React through NodeJS proxy - node.js

Question

I'm trying to use SignalR on a React application through a NodeJS proxy using the NPM package 'http-proxy-middleware'. However, it appears that the connection is falling to connect. Below is the console log from the react application.
[2022-11-29T23:02:24.022Z] Information: Normalizing '/hubs/Chat' to 'https://localhost:3000/hubs/Chat'.
[2022-11-29T23:02:24.022Z] Debug: Starting connection with transfer format 'Text'.
[2022-11-29T23:02:24.023Z] Debug: Sending negotiation request: https://localhost:3000/hubs/Chat/negotiate?negotiateVersion=1.
[2022-11-29T23:02:24.642Z] Debug: Selecting transport 'WebSockets'.
[2022-11-29T23:02:24.643Z] Trace: (WebSockets transport) Connecting.
WebSocket connection to 'wss://localhost:3000/hubs/Chat?id=DykJoTMv9LiYrtjYHUCQVg' failed:
[2022-11-29T23:06:24.671Z] Information: (WebSockets transport) There was an error with the transport.
[2022-11-29T23:06:24.672Z] Error: Failed to start the transport 'WebSockets': Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled.
[2022-11-29T23:06:24.672Z] Debug: Skipping transport 'ServerSentEvents' because it was disabled by the client.
[2022-11-29T23:06:24.672Z] Debug: Skipping transport 'LongPolling' because it was disabled by the client.
[2022-11-29T23:06:24.672Z] Error: Failed to start the connection: Error: Unable to connect to the server with any of the available transports. Error: WebSockets failed: Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled. ServerSentEvents failed: Error: 'ServerSentEvents' is disabled by the client. LongPolling failed: Error: 'LongPolling' is disabled by the client.
Error establishing the connection: Error: Unable to connect to the server with any of the available transports. Error: WebSockets failed: Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled. ServerSentEvents failed: Error: 'ServerSentEvents' is disabled by the client. LongPolling failed: Error: 'LongPolling' is disabled by the client.
at HttpConnection._createTransport (HttpConnection.ts:407:1)
at async HttpConnection._startInternal (HttpConnection.ts:283:1)
at async HttpConnection.start (HttpConnection.ts:137:1)
at async HubConnection._startInternal (HubConnection.ts:207:1)
at async HubConnection._startWithStateTransitions (HubConnection.ts:181:1)
If I connect directly to the .NET application, which is running the server-side part of SignalR, it works fine. So it's not a problem with that.
This is the code snippet from the React App which performs the connection.
this.hubConnection = new HubConnectionBuilder()
.withUrl("/hubs/chat",{
transport: HttpTransportType.WebSockets,
logger: LogLevel.Trace
})
.withAutomaticReconnect()
.build();
this.hubConnection.start().catch(error => console.log("Error establishing the connection: ", error));
The proxy is running in NodeJS through nodemon. Below is the code.
const PORT = 8000;
const express = require('express');
const https = require('https');
const fs = require('fs')
const {createProxyMiddleware} = require('http-proxy-middleware');
const app = express();
require('dotenv').config({ path: `.env.${process.env.NODE_ENV.trim()}` });
const httpsOptions = {
key: fs.readFileSync('./certs/cert.key'),
cert: fs.readFileSync('./certs/cert.pem')
}
app.use('/hubs/chat', createProxyMiddleware({
target: process.env.REACT_APP_APISERVICEURL,
changeOrigin: false ,
secure: false,
ws: true,
logger: console
}));
var secure = https.createServer(httpsOptions, app);
secure.listen(8000, () => console.log(`Server is running on port ${PORT}`));
The proxy does work for all other API calls to the .NET Application. The React application has the proxy attribute set in the package.json. The proxy then re-writes the URL and adds an API Token header to send to the API. Hence the use of http-proxy-middleware.
I have tried the below as well, but it still produces the same result.
const signlrRProxy = createProxyMiddleware({
target: process.env.REACT_APP_APISERVICEURL,
changeOrigin: false ,
secure: false,
ws: true,
logger: console
});
app.use('/hubs/chat', signlrRProxy);
var secure = https.createServer(httpsOptions, app);
secure.listen(8000, () => console.log(`Server is running on port ${PORT}`));
secure.on('upgrade', signlrRProxy.upgrade);
I am using the latest package versions to everything.