3

On the frontend of my application I use the @microsoft/signalr library to send off requests to my backend hubs. This works okay in a single tab, but when a second tab is open an error is outputted to the console of the first tab and the connection stops. It's almost as if the second tab is taking over for some reason, when really I believe both should be connected to the hub on different connections with different connection ids. The error I receive in the console is as follows:

[2021-04-23T09:34:22.762Z] Information: WebSocket connected to wss://localhost:6001/ptwHub?id=39HKWle3NU0eTjFxcNWsiQ.
Utils.js:218 [2021-04-23T09:34:32.895Z] Error: Connection disconnected with error 'Error: Message is incomplete.'.
./node_modules/@microsoft/signalr/dist/esm/Utils.js.ConsoleLogger.log @ Utils.js:218
./node_modules/@microsoft/signalr/dist/esm/HttpConnection.js.HttpConnection.stopConnection @ HttpConnection.js:542
transport.onclose @ HttpConnection.js:479
./node_modules/@microsoft/signalr/dist/esm/WebSocketTransport.js.WebSocketTransport.close @ WebSocketTransport.js:189
webSocket.onmessage @ WebSocketTransport.js:129
ptw.ts:22 Error: Message is incomplete.
    at Function../node_modules/@microsoft/signalr/dist/esm/TextMessageFormat.js.TextMessageFormat.parse (TextMessageFormat.js:13)
    at JsonHubProtocol../node_modules/@microsoft/signalr/dist/esm/JsonHubProtocol.js.JsonHubProtocol.parseMessages (JsonHubProtocol.js:36)
    at HubConnection../node_modules/@microsoft/signalr/dist/esm/HubConnection.js.HubConnection.processIncomingData (HubConnection.js:507)
    at WebSocketTransport.HubConnection.connection.onreceive (HubConnection.js:73)
    at WebSocket.webSocket.onmessage (WebSocketTransport.js:126)

The code to connect to the hub is as follows:

let connection = new signalR.HubConnectionBuilder().withUrl("https://localhost:6001/hub").build();

connection.on('knowledgeBaseUpdated', (userId: number) => {
    alert(`User ${userId} has updated the knowledge base. Please refresh.`);
});

connection.start().catch(err => console.log(err));

Really not sure why the second tab would just take over the connection instead of creating a new connection. There is obviously an issue here somewhere but I'm really not sure where so any help would be really appreciated.

EDIT I've enabled client side debugging for signalr and get the following output. The line which starts with HttpConnection.stopConnection is the line which appears when a new connections is attempted from a different tab.

[2021-04-26T09:50:00.084Z] Debug: Starting HubConnection.
Utils.js:228 [2021-04-26T09:50:00.096Z] Debug: Starting connection with transfer format 'Text'.
Utils.js:228 [2021-04-26T09:50:00.099Z] Debug: Sending negotiation request: https://localhost:6001/ptwHub/negotiate?negotiateVersion=1.
Utils.js:228 [2021-04-26T09:50:00.365Z] Debug: Selecting transport 'WebSockets'.
Utils.js:224 [2021-04-26T09:50:00.667Z] Information: WebSocket connected to wss://localhost:6001/ptwHub?id=14d1O9-cj544_-SHeZ2fgw.
Utils.js:228 [2021-04-26T09:50:00.667Z] Debug: The HttpConnection connected successfully.
Utils.js:228 [2021-04-26T09:50:00.668Z] Debug: Sending handshake request.
Utils.js:224 [2021-04-26T09:50:00.669Z] Information: Using HubProtocol 'json'.
Utils.js:228 [2021-04-26T09:50:13.079Z] Debug: Server handshake complete.
Utils.js:228 [2021-04-26T09:50:13.081Z] Debug: HttpConnection.stopConnection(Error: Message is incomplete.) called while in state Connected.
Utils.js:218 [2021-04-26T09:50:13.081Z] Error: Connection disconnected with error 'Error: Message is incomplete.'.
./node_modules/@microsoft/signalr/dist/esm/Utils.js.ConsoleLogger.log @ Utils.js:218
./node_modules/@microsoft/signalr/dist/esm/HttpConnection.js.HttpConnection.stopConnection @ HttpConnection.js:542
transport.onclose @ HttpConnection.js:479
./node_modules/@microsoft/signalr/dist/esm/WebSocketTransport.js.WebSocketTransport.close @ WebSocketTransport.js:189
webSocket.onmessage @ WebSocketTransport.js:129
Utils.js:228 [2021-04-26T09:50:13.082Z] Debug: HubConnection.connectionClosed(Error: Message is incomplete.) called while in state Connecting.
Utils.js:228 [2021-04-26T09:50:13.083Z] Debug: Hub handshake failed with error 'Error: Message is incomplete.' during start(). Stopping HubConnection.
Utils.js:228 [2021-04-26T09:50:13.083Z] Debug: Call to HttpConnection.stop(Error: Message is incomplete.) ignored because the connection is already in the disconnected state.
Utils.js:228 [2021-04-26T09:50:13.084Z] Debug: HubConnection failed to start successfully because of error 'Error: Message is incomplete.'.

When the connection starts on a particular tab, I can see the connection has started and I get a single message when I look at the Network tab of Chrome Dev Tools. When I open the second tab, another message is sent to the first time which looks like an error message.. it weirdly contains a load of red dot characters? I mage attached below. Please ignore the fact it's called ptwHub as I removed the ptw part previously to make it easier for the readers to understand.

Network tab

Jamie Mclaughlan
  • 845
  • 2
  • 10
  • 29
  • Can you please find this WS connection in network tab of developer tools for first tab to see how message that cause error looks like? Is there any logic in OnConnectedAsync? – Anton Apr 23 '21 at 18:01
  • Hi, nothing appears in the Network tab of dev tools of the first tab when the second tab connects to the hub. There's only a network call when each tab connects to the hub initially with a standard HTTP 101 Switching Protocols response code. I don't have any logic in OnConnectedAsync either. Should I add logic here? – Jamie Mclaughlan Apr 26 '21 at 08:35
  • I've updated the question with some debug logging in case that helps. – Jamie Mclaughlan Apr 26 '21 at 09:58
  • You can check similar app created using vuejs and dotnet core here https://coder-juggernaut.blogspot.com/2019/09/vuejs-signalr-chat-application-with-dot.html – Tony Tom Apr 26 '21 at 10:13
  • @JamieMclaughlan and no messages are added there in this HTTP 101 for the first tab? Can you open first tab, open dev tools network tab for it, then refresh tab and find any WebSockets conection. Select this connection and then open messages there. And then check which messages are sent there when second tab is opened. – Anton Apr 26 '21 at 10:30
  • There's a single messsage in the first tab, '{"protocol":"json","version":1}'. I don't send any messages when the connection starts up for each tab. Messages are sent when certain actions take place in my system. Each time a tab is refreshed, it's just this message that can be seen and no error messages as such. – Jamie Mclaughlan Apr 26 '21 at 10:39
  • Have edited again to show the image of my network tab and the initial message. – Jamie Mclaughlan Apr 26 '21 at 10:42
  • @JamieMclaughlan yeah, this message is complete, but is it after the second tab is opened? – Anton Apr 26 '21 at 10:44
  • @JamieMclaughlan i meant make a screenshot after you refresh first tab and then open second, want to see which WebSockets message causes this error – Anton Apr 26 '21 at 10:47
  • Apologies - when I open the second tab and try and connect, I them get another message on the first tab which looks like an error message with lots of red dots? Have updated the image in the question. – Jamie Mclaughlan Apr 26 '21 at 10:58
  • @JamieMclaughlan interesting. SignalR client throws this error when the last character isn't message separator, but here it seems like there are a lot of those... hm. This will be the last question, is the last character looks the same? Will think why is this handshake message sent to the client – Anton Apr 26 '21 at 11:00
  • Curious, have you tried different browsers? – Nikita Chayka Apr 26 '21 at 11:15
  • Yes, and the same happens there too. It's just so strange – Jamie Mclaughlan Apr 26 '21 at 12:19
  • @Anton The last character is also a red dot too yes :( – Jamie Mclaughlan Apr 26 '21 at 12:21
  • Do you have only one SignalR server running? Or you do have multiple behind a load balancer? Are you using SignalR service in Azure perhaps? – jpgrassi Apr 26 '21 at 13:14
  • This is all local so I'm not using Azure. Just a single SignalR server, but this SignalR server is part of my API. Could this be the problem? Should I split all SignalR stuff up from my API project? – Jamie Mclaughlan Apr 26 '21 at 13:48
  • @JamieMclaughlan that should be fine, do you deploy it with iis or kestrel? – Anton Apr 26 '21 at 15:02
  • @Anton I think it's something to do with the port and/or different project... Basically, my web app was running on https://localhost:5001, and my hub was on https://localhost:6001. I moved the hub to the same project as the web app on https://localhost:5001 and now it works okay.. strange – Jamie Mclaughlan Apr 26 '21 at 15:23
  • @JamieMclaughlan interesting, at least we can reproduce it now :D – Anton Apr 26 '21 at 15:40
  • @JamieMclaughlan maybe post an answer yourself explaining the situation? – sommmen May 03 '21 at 07:10

0 Answers0