Learning How to Create a WebSocket

by experiencehood | Jul 03, 2023

Hey everyone, I am Brian. I am a front-end web developer who is enthusiastic about most things in web development. I will document my journey of exploring different sections of web development, mainly front-end web development, but there will be some cross-over to back-end development.

For this entry, I will share my experience learning how to create a WebSocket allowing text to be displayed in multiple browsers.

If you want to see my code for this project. WebSocket

Reason for wanting to learn about WebSocket

My interest in WebSocket was sparked by my interest in how chat apps work. I had created a messaging feature for a project where I could write text in a text field, and it would display the message on the screen in a text bubble, but it did not send a message to people. It was mainly a visual effect. This led me to want to discover how to turn my messaging feature from just a visual effect to working the same way WhatsApp does.

What is a WebSocket?

A WebSocket provides a way to exchange data between a browser and a server. In other words, a WebSocket connects a user or client to a server that allows a user to send data to other users connected to the server.

Where to start, and what I needed?

I first needed to figure out how far I would go with this project. For this project, I don’t need to make a full-blown chat app; I need to be able to send messages from one browser to another. I also wanted it to be a front-end project, meaning it would only be done with HTML, CSS, and JavaScript.

The next thing I wanted to know is, can it be done? After a quick search for WebSocket JavaScript, the answer was yes. Two solutions popped up, mostly Socket.IO and ws. To use either of these libraries, I needed node.js which I already have. I decided to go with ws because it was a less pre-ready solution that would be easier to use in ways I feel fit, especially for project ideas I may come up with further down the road.

To create a way to send messages to another browser, I need to write JavaScript for a server to handle receiving data and send it out to other clients and a separate JavaScript script for the client to send data to the server and receive data from it.

What’s the result

I created a simple way to send a message every time the client connects to the server. The message is displayed in the browser’s console and on the page.

The Problems that occurred

While learning how to make the WebSocket, I encountered a few problems that made me spend more time than I would have liked trying to send messages to the server and understand what was happening.

One of the significant problems I encountered was that the documentation for WebSocket was divided into server and client documentation. This increased the amount of searching around to find a decent tutorial or documentation that explains how to make it work, which made it difficult to get a full view or understanding of how everything works together. Also, the client and server-side code looks very similar, so you can easily confuse the two.

Another problem was that the developers had changed WebSocket, and some of the code in tutorials and other documentation needed to be updated. It took me forever to figure out that the send method in the server does not work the same as it did in the past. The solution was to use the server’s broadcast function to send data to the client.

The rest were minor problems, like thinking that the port for the server could be used to render the HTML page. There were a couple of tutorials or documentation with highly complex solutions to send data to us ws WebSocket, and I was like; I am just trying to send a simple message, man, what is that?

That was my time learning WebSocket and getting a working WebSocket that could send messages to the client.