SignalR Client Internals : Trouble Shooting (Don't use relative urls)

The Goal: To get a client based connection to a server websocket using SignalR

A Sucessful Signalr Client Connection to Server Hub

Our working 😎 Typescript code looked like this:

async start() {
    this.connection = new HubConnectionBuilder()
      // This is the key this url must be correct in every respect.
      // It points to our backend servers https port.
      .withUrl("https://localhost:44344/myHub")
      .configureLogging(LogLevel.Information)
      .build();

    await this.connection
      .start()
      .catch((error) => console.log({ signalRComponent: error }));
  }

Which means our back end server was running https on port 44344 and serviced a route to "myHub". Pressing F12 in chrome and watching the console log, you should see this.

[2020-06-09T19:30:44.712Z] Information: WebSocket connected to wss://localhost:44344/myHub?id=MWcu3HRs0qlylG2hqcZfcg.
Utils.js:204 [2020-06-09T19:30:44.745Z] Information: Using HubProtocol 'json'.
Utils.js:204 [2020-06-09T19:30:45.011Z] Information: WebSocket connected to wss://localhost:44344/myHub?id=qqUfhg1nLF9lJJaW4RJM4g.
Utils.js:204 [2020-06-09T19:30:45.014Z] Information: Using HubProtocol 'json'.
Utils.js:204 [2020-06-09T19:30:45.231Z] Information: WebSocket connected to wss://localhost:44344/myHub?id=Rcgtfx0u_7fH2Is8c71GaA.
Utils.js:204 [2020-06-09T19:30:45.232Z] Information: Using HubProtocol 'json'.
Utils.js:204 [2020-06-09T19:30:45.348Z] Information: WebSocket connected to wss://localhost:44344/myHub?id=nh5k62ZyRu2uTJJ3liAcZw.
Utils.js:204 [2020-06-09T19:30:45.351Z] Information: Using HubProtocol 'json'.
client:52 [WDS] Live Reloading enabled.

This is all the websocket handshaking going on. There seems to be 4 exchanges before it finishes, something to investigate later.

But this didn't happen nearly as fast as we wanted. We spent a few days getting everything set up..

🍋🍋🍋

Trouble Shooting Tips

• Make sure the back-end is accepting requests to
  the route for the hub.

• Open a browser and simply type in the proper URL, if the port is up and running and the request is routed properly, you should see 'Connection ID required', this is a good sign.

The backend is ready.

• Focus on FrontEnd, in particular this line:

 .withUrl("https://localhost:44344/myHub")

• Do not use relative URLs as the asp.net core documentation shows, it makes no sense.

• If any part of the url is incorrect, then there will only be vague XHR messages which are impossible to understand.

• Don't mix schemas, if your backend is HTTPs make sure this url schema is indicated. If your front end is http and you try to connect to backend via https, then your in for more troubleshooting.

• Make sure the domain name and port are correct.

• ERR_CONNECTION_REFUSED is a generic message which just means no connection could be made.

• Is the server running?

• Is the URL correct?

• Is the Schema correct?
  

zone-evergreen.js:2845 POST https://localhost:44344/myHub/negotiate?negotiateVersion=1 net::ERR_CONNECTION_REFUSED

Of course for all of this to work the server work must have been completed. We will cover this in this series.

JWP2020 SignalR Client Debugging