WebSockets.

How to test a WebSocket connection in a browser

This post was most recently updated on October 24th, 2021.

3 min read.

This article documents a simple and neat way to establish and test a WebSocket connection, using just vanilla JavaScript and your favorite browser’s developer tools. Quick and easy – no external tools or libraries required!

In the sample I’ll show just a few paragraphs below, we’ll instantiate a websocket connection, hook a listener to the onmessage event and the last line sends a simple payload down the WebSocket pipe, just to see if something happens.

If there IS a response, we’ll be logging it in the console. Handy! The article does expect you to have your API already up and running, though :)

Background

WebSockets, they’re all the rage, and for a very good reason; WebSockets are a great solution for a very typical web development problem: How to deliver dynamic updates to a view without implementing some sort of finicky polling methods in JavaScript?

After being successfully established, they make it possible for the server to force-feed your display layer (running in the browser) constant updates – such as live tweets about someone’s awkward date at a sushi place (like seen on Twitter), all of the pictures of your drunk uncle causing a scene at that one distant cousin’s, whose name you’ve forgotten, wedding (looking at you, Facebook) or a live comment feed for your favorite Mukbang -stream (with the death of Mixer, I suppose you’d go to Twitch for this).

Or maybe you’ll just need to push notifications to your front-end in that one corporate portal you’re developing. Be that as it may, I’m not judging. WebSockets are useful.

But back in the day, you couldn’t really use WebSockets, because there was a browser, that didn’t support them but was widely used. Can you guess which one was that? 😁

Thanks, Internet Explorer.

But nowadays, we’re actually good. Global adoption is around ~96%.

WebSocket support in browsers, as of 05/2021.
WebSocket support in browsers, as of 05/2021.

Problem

So you’ve got your API set up with a few cute WebSockets doing what WebSockets do best – passing packets in both directions using just one, persistent TCP connection. Neat!

But how do you verify it works, using just your favorite browser’s developer tools? In the next section, I’ll show you how to test your websocket connection in your browser.

Solution

This is yet another of those “note to self” -kinda posts. If I need to google this again, might just as well find the solution from my own blog, right? :)

So here’s a simple example:

let webSocket = new WebSocket('wss://localhost/api/ws');
webSocket.onmessage = function(e) { console.log(e)}
webSocket.send("test")

What’s this do, then? Let’s take a look in detail!

Time needed: 5 minutes.

How to establish and verify a WebSocket connection from your favorite browser?

  1. Establish the WebSocket connection

    First-line establishes a connection (either with 1 parameter – the URL – or 2, where the second one is a sub-protocol request):

    let webSocket = new WebSocket('wss://localhost/api/ws');

  2. Create your own EventHandler for “OnMessage”

    The second line simply makes it easy for us to follow responses from the server.

    webSocket.onmessage = function(e) { console.log(e)};

  3. Test your WebSocket!

    This part expects you to have something configured for your API that actually DOES react to a received message by responding back.

    webSocket.send("test");

    The last line sends a simple payload down the WebSocket pipe, just to see if something happens. If there IS a response, we’ll be logging it in the console. Handy!

And you should be good! That’s all for today. :)

Let me know if you’ve got a better way – let’s compare!

References

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