Real Time Communication with Node.js: Building WebSocket Apps

Real Time Communication with Node.js: Building WebSocket Apps. In this post, we show you how to build a real time chat application with Node.js -the renowned package. Real time chat software is necessary for various purposes, including team collaboration, customer service, and social networking

In fact, real time communication (RTC) has emerged as a pivotal component in modern web applications, revolutionizing the way users interact with each other and with digital services. In essence, real time communication enables instantaneous exchange of information, allowing users to send and receive data without any perceivable delay. This technology relies on a variety of protocols and tools to ensure swift and seamless communication, making it a cornerstone for numerous web applications across various domains.

One of the most prominent use cases of real time communication is in the realm of messaging and collaboration applications. These apps, such as Slack, WhatsApp, and Microsoft Teams, rely heavily on real time communication to enable instant messaging, file sharing, and video conferencing. Users expect messages to be delivered instantly, making real time communication essential for maintaining the fluidity and responsiveness that modern communication tools demand.

Shall we start with Real Time Communication with Node.js: Building WebSocket Apps.

What is WebSocket?

WebSocket is a protocol that provides full duplex communication channels over a single TCP connection, allowing for real time, bidirectional data transfer between clients and servers. Node.js, a JavaScript runtime environment known for its scalability and event driven architecture, is an excellent choice for building WebSocket applications.

This serves as a primer for developers looking to harness the power of Node.js to create real time communication applications using WebSocket technology. We delve into the key concepts, advantages, and considerations when building WebSocket applications with Node.js, offering a comprehensive understanding of this dynamic and versatile combination.

How WebSocket Differs from traditional HTTP

WebSocket is a communication protocol that has revolutionized real time data exchange on the web. It differs significantly from the traditional HTTP (Hypertext Transfer Protocol) in that it enables bidirectional, full duplex communication between a client and a server. In this technical post, we delve into WebSocket’s key features and explore how it distinguishes itself from HTTP.

Persistent Connection

Unlike HTTP, which relies on the request response model, WebSocket establishes a persistent connection between the client and server. This means that once the connection is initiated, it remains open, allowing data to be sent in both directions at any time without the need to establish a new connection for each interaction. This persistence minimizes the overhead associated with opening and closing connections for every request, making WebSocket more efficient for real time applications.

Low Latency

WebSocket is designed for low latency communication. In HTTP, the client sends a request to the server, which processes it and responds. This round trip process introduces latency, especially when repeated frequently. In contrast, WebSocket enables instantaneous data transfer, reducing latency significantly. This makes WebSocket ideal for applications where real time updates are crucial, such as chat applications and online gaming.

Lightweight Protocol

WebSocket is a lightweight protocol, which means that it introduces minimal overhead compared to HTTP. The WebSocket handshake is relatively simple, reducing the amount of data exchanged during connection establishment. This efficiency makes WebSocket suitable for resource constrained environments, such as mobile devices and IoT devices.

Full Duplex Communication

One of the most significant differences between WebSocket and HTTP is their communication mode. HTTP is inherently half duplex, meaning that data can flow in only one direction at a time (client to server or server to client), requiring additional requests for bidirectional communication. WebSocket, on the other hand, supports full duplex communication, allowing simultaneous data transmission in both directions. This capability is essential for applications like online collaboration tools and financial trading platforms.

Event Driven Architecture

WebSocket is built on an event driven architecture. Instead of polling the server for updates, WebSocket enables the server to push data to the client whenever new information is available. This push based model reduces unnecessary network traffic and ensures that clients receive real time updates efficiently.

Benefits of WebSocket for real time communication

WebSocket is a powerful and versatile communication protocol that has become the cornerstone of real time communication in modern web applications. It offers several key benefits that make it the preferred choice for applications requiring instantaneous data exchange between clients and servers. In this technical post, we explore these advantages in detail.

Efficient Data Transfer: WebSocket is a lightweight protocol, meaning it introduces minimal overhead compared to HTTP. The initial WebSocket handshake is relatively simple, and once the connection is established, the protocol allows for efficient data transfer. This efficiency is especially crucial for mobile devices and IoT devices, where bandwidth and resources are often limited.

Real Time Updates: WebSocket enables real time updates without the need for continuous polling. In traditional HTTP based applications, clients often need to send frequent requests to the server to check for updates, leading to increased network traffic and server load. WebSocket, on the other hand, allows the server to push data to the client as soon as it’s available. This push based model ensures that clients receive real time updates efficiently, making it perfect for live dashboards, stock tickers, and news feeds.

Cross Platform Compatibility: WebSocket is supported by all major web browsers, making it a cross platform solution for real time communication. This compatibility ensures that your real time features work seamlessly across different devices and operating systems.

Scalability: WebSocket is highly scalable. WebSocket servers handle a large number of concurrent connections, making it suitable for applications with varying levels of traffic. Many WebSocket libraries and frameworks also provide features for load balancing and scaling out horizontally to meet the demands of growing user bases.

Real Time Communication with Node.js: Building WebSocket Applications

In this section, we show you how to build a real time chat application with Node.js and WebSocket.

Step 1: Setting up the project

Make a new directory for your project and use the terminal to navigate to it. To start a new Node.js project, use the following command:

					npm init -y

Step 2: Installing Required Dependencies

Install the following dependencies:

  • express: A minimal web application framework for Node.js
  • A library for real time web applications

Run the following command to install the dependencies:

					npm install express nodemon

Step 3: Creating the Server

Create a new file called server.js:

					nano server.js

Add the following code.

					const io = require('')(3000)

const users = {}

io.on('connection', socket => {
  socket.on('new-user', name => {
    users[] = name
    socket.broadcast.emit('user-connected', name)
  socket.on('send-chat-message', message => {
    socket.broadcast.emit('chat-message', { message: message, name: users[] })
  socket.on('disconnect', () => {
    socket.broadcast.emit('user-disconnected', users[])
    delete users[]


This code imports the required modules, sets up a static file server, and listens for incoming socket connections.

Step 4: Creating the Client

Create a new directory called public and inside it, create an index.html file:

					mkdir public
nano public/index.html

Add the following content.

					<!DOCTYPE html>
<html lang="en">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Chat App</title>
  <script defer src="http://localhost:3000/"></script>
  <script defer src="script.js"></script>
  <div id="message-container"></div>
  <form id="send-container">
    <input type="text" id="message-input">
    <button type="submit" id="send-button">Send</button>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),"elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",;</script></body>

This code sets up a basic HTML layout and includes the client library.

Step 5: Implementing Chat Functionality

Create the script.js file to include a form for sending messages and a container for displaying messages:

					nano script.js

Add the following content.

					const socket = io('http://localhost:5500')
const messageContainer = document.getElementById('message-container')
const messageForm = document.getElementById('send-container')
const messageInput = document.getElementById('message-input')

const name = prompt('What is your name?')
appendMessage('You joined')
socket.emit('new-user', name)

socket.on('chat-message', data => {
  appendMessage(`${}: ${data.message}`)

socket.on('user-connected', name => {
  appendMessage(`${name} connected`)

socket.on('user-disconnected', name => {
  appendMessage(`${name} disconnected`)

messageForm.addEventListener('submit', e => {
  const message = messageInput.value
  appendMessage(`You: ${message}`)
  socket.emit('send-chat-message', message)
  messageInput.value = ''

function appendMessage(message) {
  const messageElement = document.createElement('div')
  messageElement.innerText = message


Step 6: Running the Chat Application

At this point, your chat application is ready.Now start the server by running the following command:

					node server.js

Once your server started successfully, open your browser and navigate to http://localhost:5500. You can now send and receive messages in real time!

Thank you for reading Real Time Communication with Node.js: Building WebSocket Apps. Let’s conclude this article topic.

Real Time Communication with Node.js: Building WebSocket Apps Conclusion

Remember that this is simply the starting point for your own WebSocket and Node.js adventures. Real time communication is a large field with multiple use cases and changing technology. You now have the tools and knowledge to explore and experiment in this dynamic world, thanks to the foundation we’ve laid here.

Real time communication is no longer a luxury in the fast changing landscape of web development; it is a requirement. WebSocket and Node.js provide a powerful combination to address this requirement, and with your newfound knowledge, you’ll be able to design interactive, responsive, and engaging applications that redefine how people interact with the web.

That’s it! You have successfully created a real time chat application using Node.js and You can further customise this application by adding user authentication, private messaging, and other features.

Avatar for Hitesh Jethva
Hitesh Jethva

I am a fan of open source technology and have more than 10 years of experience working with Linux and Open Source technologies. I am one of the Linux technical writers for Cloud Infrastructure Services.

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x