WebSockets.

How to test a web socket connection in browser?

2 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. Easy and quick – no external tools or libraries required! The 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 successfully established, they make it possible for the server to force-feed your display layer (running in 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?

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