SignalRRRRRR meme. Fantastic use of my web hosting storage.

How to test SignalR-connection in the browser?

2 min read.

So a while back I posted about testing your “vanilla” WebSockets connection directly in the browser – and while that’s nice and easy, sometimes you need to class up a bit. In my case that meant upgrading to SignalR (for some corporate and enterprisey reasons as usual). It makes sense to leave behind the easy, simple, lightweight and somewhat transparent websockets to “upgrade” to the enterprise-ready (and arguably quite a lot less transparent) SignalR?

Well – I went through that, and since I needed to test the connectivity after the change, I documented here how you can do it in the browser!

Problem

Table of Contents

You could always fire up an actual website to test your SignalR connection, or perhaps add some test code and deploy it to whatever environment your stuff is supposed to run in – or perhaps even create a new tester console application!

But why would you want to do that, since you can just run a couple of simple commands in your favorite browser’s console? No extra CORS -configuration is needed and you have full control over your code.

Solution

Now, what if you then need to test your SignalR-connection directly in the browser? Well, luckily, that’s pretty simple as well!

Time needed: 10 minutes.

How to test a SignalR-connection in the browser?

  1. Include a SignalR client library into 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 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’ll look somewhat like 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 on new messages!

    connection.start();

And you should be good!

Note, that you need to target MyMethodName on the server-side in order for it to be picked up by the front-end.

References

mm
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments