DEV Community

ShatilKhan

Posted on Dec 27

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 :

Now there is a Null connection variable here, we'll get to it later.

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:

Notice we see the null connection here that we initiated in the beginning. This tells the server that we can accept ANYTHING. Any type of data is accepted as we are just testing.
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.