Shahriar Shatil

Dec 27, 2024 • 4 min read • 

Engineering of Small Things #4: WebSockets!

WebSocket for dummies

Engineering of Small Things #4: WebSockets!

Hello Again!

Recently I was working on a website where I needed to pull data from the server periodically, it wasn't really required as the database updated only once a week or so. But still I though it would be nice to have a way if I could periodically get data from server without having to request it from the client side. SO then I came across socket servers!

It basically allows two-way communication between a client & a server. We can also setup timeout methods so that the server automatically sends data to the client on a regular interval.

So I studied a bit on the topic , got some help from chatgpt :)

But also I like to learn from experience engineers rather than regular courses. One of the engineers I admire is @husseinnasser . I followed a short crash course from Nasser about WebSockets as well. Because as a non-CSE student I didn't really know how the underlying connections work. So I needed to learn from scratch!

And it was indeed a great experience. I first learned about protocols! HTTP, HTTP 1.1, TCP, UDP

This gave me a good foundation to understand what's going on in a WebSocket server.

Then I made a raw websokcet server using http. I set up certain breakpoints & tested the connection between the server & the client. It was unique way to learn because I didn't write much frontend code for this. Instead I tested the client by directly sending client messages from the browser console!

First we'll need a basic http server :

Basic Package Requirements & Connection :

Base http server initiate:

But this is just a request-response server. Once a response is received, connection is gone. We need a reliable connection. This is where TCP comes in. When I pass in this http server into a WebSocket server it will then send an UPGRADE 1.1 header request to the server from the client side. It will request to switch protocol from http to http 1.1 & establish a TCP connection for full-duplex communication.

Pass in the http server into the websocket server to create a TCP connection:

Server Listening:

The websocket server can choose weather to accept the request or not ,

accepting sends back swithing protocol 101 response , which opens up the full duplex communication between client & server

1st parameter is a custom protocol , could be for chatting , gaming, null means we'll accept anything, no specific protocol needed

2nd paramter - we can check the origin of the request, generally the url the request was sent from , to checck if it's atrusted source

Below are the events that we can use , open, close, message etc. The main point of WebSockets is having these events.

When each event occurs we can get a certain response from server automatically without the client needing to initiate a request

Socket Events:

Now we can send & receive connection between the server & client

From the Debug console in VS Code we can send a server message:

Then from the browser console, we can send a client response:

The connection stays open as long as nobody closes the connection.

If the server shuts down, the connection will close

if the client browser initiates the event ws.close the connection will close.

But this is just basic connection. Now We will make a function that will keep sending messages from the WebSocket server to the client on a regular interval. Think of game streaming , twitch, video streaming etc.

Pass in the function after we open the connection:

We can log this stream of messages on the client side using onmessage event

Voila We just made a full-duplex two-way communication between a server & a client.

Super fun stuff to learn!

Codebase:

https://github.com/ShatilKhan/socket-server

Check out the video to see the code in action:

https://www.youtube.com/watch?v=7RaDgU1VP-U

If you found it fun, check out my blog on dev.to : https://dev.to/siren/engineering-of-small-things-4-websockets-4n6

Join Shahriar on Peerlist!

Join amazing folks like Shahriar and thousands of other people in tech.

Create Profile

Join with Shahriar’s personal invite link.

0

1

0