Signal R functionality to send data to UI not working in Angular/ASP.Net Core web API 3.1 application with Azure Active directory authentication

Question

I am creating one application using Signal R functionality to push the data on UI in Angular/ASP .NET Core web API 3.1 application with Azure Active directory user authentication.

I am writhing this code in angular application.

public DoConnection = (): void => {
this.hubConnection = new signalR.HubConnectionBuilder()
.configureLogging(signalR.LogLevel.Trace)
.withUrl(this.myUrl + "dataHub", {
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets
}
)
.build();
this.hubConnection
.start()
.then(() => {
this.hasRemoteConnection = true;
this.registerSignalEvents();
})
.catch(() => {
this.hasRemoteConnection = false;
console.log("No Connection");
});
};



// Reg signalR events
private regSignalEvents(): void {
this.hubConnection.onclose(() => {
this.hasRemoteConnection = false;
});
this.hubConnection.on('doreload', (data) => {
this.sendData(data);
});
}

sendData(doRefresh: boolean): void {
this.doupdate$.next(doreload);
}

but I am getting this error.

[2022-03-24T13:05:18.150Z] Debug: Starting HubConnection.

XXXXXX.ts:203 [2022-03-24T13:05:18.151Z] Debug: Starting connection with transfer format 'Text'.

XXXXXX.ts:203 [2022-03-24T13:05:18.151Z] Trace: (WebSockets transport) Connecting.

XXXXXX.ts:199 [2022-03-24T13:05:18.443Z] Information: WebSocket connected to ws://localhost:29863/XXXXXXHub.

XXXXXX.ts:203 [2022-03-24T13:05:18.443Z] Debug: The HttpConnection connected successfully.

XXXXXX.ts:203 [2022-03-24T13:05:18.443Z] Debug: Sending handshake request.

XXXXXX.ts:203 [2022-03-24T13:05:18.444Z] Debug: Hub handshake failed with error 'WebSocket is not in the OPEN state' during start(). Stopping HubConnection.

XXXXXX.ts:203 [2022-03-24T13:05:18.444Z] Trace: (WebSockets transport) socket closed.

XXXXXX.ts:203 [2022-03-24T13:05:18.445Z] Debug: HttpConnection.stopConnection(undefined) called while in state Disconnecting.

XXXXXX.ts:193 [2022-03-24T13:05:18.445Z] Error: Connection disconnected with error 'WebSocket is not in the OPEN state'.

XXXXXX.ts:203 [2022-03-24T13:05:18.445Z] Debug: HubConnection.connectionClosed(WebSocket is not in the OPEN state) called while in state Connecting.

XXXXXX.ts:203 [2022-03-24T13:05:18.445Z] Debug: HubConnection failed to start successfully because of error 'WebSocket is not in the OPEN state'.

XXXXXX.service.ts:71 Connection Failed

Any Idea or working example how Signal R functionality work in Angular 11/ASP .NET Core web API 3.1 application with Azure Active directory user authentication.

Thanks! in advance

Answer 1

This error is usually caused by the client using only the WebSockets transport but the WebSocket protocol not being enabled on the server.so please make sure it is enabled.see: enabling-websockets-on-iis

In Azure, if deployed in app service open your application dashboard>> Go to Configure section.>> then to General Settings tab and enable WebSockets

Also in configure method in dot.net core add

app.UseWebSockets(new WebSocketOptions
  {
      KeepAliveInterval = TimeSpan.FromSeconds(120),
  });

Reference: Use WebSocket on.Net Core & Angular with SignalR | by Ural | ITNEXT

A workaround would be adding below code before trying to connect or before start() of the connection.

Object.defineProperty(WebSocket, 'OPEN', { value: 1, });

Reference: SignalR Asp.netcore and angular ( WebSocket is not in the OPEN state) - Stack Overflow

Also check references on similar issue below:

1. Hub handshake failed with error 'WebSocket is not in the OPEN state' during start(). Stopping HubConnection - Stack Overflow
2. ASP.NET Core SignalR connection troubleshooting | Microsoft Docs