Real-Time Communication in Web Development

Developed Using & Node.js

Bilal Rifas
Jun 14 · 6 min read
Image for post
Image for post
Gif by Henry Steller on Vidico

There are a few ways of building a tool for real-time communication. Two of the most popular approaches presuppose the use of HTTP Long Polling or WebSockets. In the article below, you’ll find a brief comparison of both solutions. I decided to focus on the latter solution a little bit more. That’s why in the article, you’ll find a straightforward tutorial for building a real-time chat.

What are WebSockets?

WebSockets API is a technology providing a bidirectional communication channel between a client and a server. That means that the client no longer needs to be an initiator of a transaction while requesting data from the server.

During the first request to the server, except receiving data, it also establishes a WebSocket connection. This process is known as the WebSocket handshake. The header is included in the request. That’s how the client informs the server that it needs to create a connection.

WebSockets vs HTTP

So, does it mean it’s impossible to create a chat application without WebSockets?

Well, there is a technique called HTTP Long Polling. Using this, the client sends a request and the server holds that opened until some new data is available. As soon as data appears and the client receives it, a new request is immediately sent and operation is repeated over and over again. However, a pretty big disadvantage of using HTTP Long Polling is that it consumes a lot of server resources. - Building a Chat App

Below, I’ll present to you a brief tutorial on how to create a simple chat application with Vanilla JS frontend part and Node.js server. You need to create a project with the default file.

Having this created, you need to set up a server and install all the needed dependencies. In order to do it, you need to create an file and install and express. You can use the following command:

In , you need to set up a local server and basic socket connection.

And basically, that’s all you have to do on the backend side at the moment. Once you make a proper request, the connection should be established. It will be visible through the logged message as shown below.

Time to prepare the frontend

Let’s start by creating the folder and the following files: , . Optionally, you can add .

Below, you can see the scaffold. Basically, all you need are HTML tags you can refer to and some scripts from included in the project. That’s how your index.html file should look with the WebSockets scripts included.

Then, you need to set up the connection on the frontend side. The only line of code you need in is . As you can see once the page is opened and the script is loaded, the connection is established. The next thing you need to do is to handle a new user connection, a new message, and last but not least a currently typing user.

In socket, there are two ways of emitting events. One way is from the user to everyone and the other which emits an event to all the other instances. The idea is to display the list of all the active users. So, when a user connects they need to inform about it and get the list of users who are already active.

When a user connects they emit the event which includes the information about their username. You should set the property of on the socket. It will be needed when the user disconnects. To do that you need to add a username to the Set of active users and emit an event with a list of all active users.

In the I created two functions and two socket listeners.

Since we handled the way users can connect and disconnect, now it’s time we handle the new messages. On the server-side you do nothing more than adding the listener shown below.

On the client side you need to do a few more things, as per the example below.

The function responsible for displaying new messages is triggered right after receiving information from a socket. The message is pushed to the server in the listener function of the form submit. You just need to check if the client is a message author or not.

Image for post
Image for post

I hope that this brief tutorial helped you understand how simple is using this approach. And how many interesting things you can do with JavaScript and basic Node.js knowledge.

There are plenty of app ideas based on WebSockets. You can create:

  • An app that streams matches of your local sports team. You can stream games in the text version or video if possible.
  • Multiplayer game for you and your friends.
  • Secret chat available only for your group.
  • App based on GPS, maybe a game that uses location.

Your imagination is the limit!

JavaScript In Plain English

Did you know that we have four publications? Find them all via — show some love by following our publications and subscribing to our YouTube channel!

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store