How to test SignalR-connection in the browser?

Time needed: 10 minutes

How to test a SignalR-connection in the browser?

1. Include a SignalR client library in the browser

   In our case, the front-end was packaged in a way it doesn’t expose the dependencies to the browser – so instead of using whatever library it was using, it was simplest to just include an external one by running this in the browser:
   
   var sc = document.createElement("script");
sc.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.7/signalr.min.js");
sc.setAttribute("type", "text/javascript");
document.head.appendChild(sc);
   
   Obviously, you can use another version of the SignalR library – this is just the one I used.

2. (OPTIONAL) Retrieve access token

   Only do this if your SignalR methods are protected with [Authorize] because unlike with vanilla WebSockets, SignalR kind of supports authentication & authorization.

3. Build the SignalR hub connection

   This should look somewhat like the below, in case you’re using authentication:
   
   var connection = new signalR.HubConnectionBuilder().withUrl("https://localhost:44358/hubs/myhub", {
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets,
accessTokenFactory: () => [access token from your earlier step]"
})
.build();
   
   Note: skipNegotation is cool because it will skip all the extra HTTP -stuff before just plain and simple opening the connection. If you’re pretty sure the host exists and is trustworthy, go ahead and set it to true.
   
   And if you haven’t protected your SignalR methods with [Authorize], don’t even add the accessTokenFactory. You should be good without it.

4. Hook your methods up to events (or the other way around)

   At its simplest, this will look somewhat like the below:
   
   connection.on("MyMethodName", function (e) { console.log({e}); });

5. Initialize the connection

   Ah, pretty simple – run this, and your front-end connection is listening to new messages!
   
   connection.start();