Building Interactive Apps: A Guide to WebSocket Integration in Node.

Master WebSocket integration in Node.js for building interactive apps with our comprehensive guide. Elevate your development skills today.

Himanshu Pant

Published: October 24, 2023

Key takeaways

Real-Time Communication: WebSockets support long-during two-way communication between the client and the server; it supports real-time data transfer unlike the conventional use of HTTP.
Versatile Uses: WebSockets are the most effective in the contexts of using real-time data, for instance, stream data, games, collaborating platforms, and financial services since they use minimal resources and the time latency is minimal.
Implementation Steps: WebSockets uses a few layers which are created with the help of a server in Node. for example, js, installation of requirements, setting up of the WebSocket server and enabling real time communication, as well as creating a basic HTML page for use in communicating with the WebSocket to send and receive messages.

Overview of WebSockets

WebSockets offer a persistent connection between client and server that enables real-time communication. They provide a standardized way of sending data from the server to the client and vice versa. Unlike HTTP , they do not require the client to repeatedly request data from the server.

What are WebSockets?

It is a communication protocol with full-duplex communication channels on a single TCP connection between a server and a client. This protocol utilizes a ‘handshake process’ to establish a client-server connection wherein both parties can communicate and receive data. The protocol is implemented as a JavaScript API in web browsers. It can be used with server-side programming languages like Node.js.

It allows real-time, two-way communication between a web browser and a server, enabling the server to send data to the browser without requesting it explicitly.

What are the uses?

WebSockets are a communication protocol that provides full-duplex, bidirectional communication channels over a single, long-lived connection between a client (usually a web browser) and a server. Unlike traditional HTTP requests that are request-response based and stateless, Web Sockets allow ongoing, real-time communication between the client and server. Here are some common use cases for Web Sockets:

Real-Time Web Applications
Gaming
Live Data Streaming
Collaborative Applications
IoT (Internet of Things)
Online Auctions and Bidding
Customer Support and Help Desks
Live Dashboards and Monitoring
Financial Applications
Voice and Video Calls:

How do they work?

In a nutshell, working with WebSockets involves three main steps:

Opening a WebSocket connection. The process of establishing a WebSocket connection is known as the opening handshake, and consists of an HTTP request/response exchange between the client and the server.
Data transmission over WebSockets. After a successful WebSocket handshake, the client and server can exchange messages (frames) over a persistent WebSocket connection. WebSocket messages may contain string (plain text) or binary data.

Closing a Web Socket connection. Once the persistent WebSocket connection has served its purpose, it can be terminated; both the client and the server can initiate the closing handshake by sending a close message.

Advantages of WebSockets

Bi-directional communication
Real-time data transfer
Low latency
Scalability
Efficient use of resources

Set up your project environment

Setup the project

Create a new directory for your project and navigate to it:

mkdir websocket-project

cd websocket-project

mkdir websocket-project

cd websocket-project

Initialize the Node.js Project

Initialize a package.json file for your project:

npm init -y

1	npm init -y

Install Dependencies

Install the required dependencies for the server using:

npm install express ws

1	npm install express ws

Create Server Code

Create a server.js file and open it in your preferred text editor:

touch server.js

Add the following code to set up an Express server and WebSocket integration:

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log(`Received: ${message}`);
    ws.send(`Server received: ${message}`);
  });
});

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

server.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

						const express = require('express');
const http = require('http');
const WebSocket = require('ws');
 
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
 
wss.on('connection', (ws) => {
  console.log('Client connected');
 
  ws.on('message', (message) => {
    console.log(`Received: ${message}`);
    ws.send(`Server received: ${message}`);
  });
});
 
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
 
server.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

					

			

5. Create HTML User Interface:

Create an index.html file and open it in your preferred text editor:

touch index.html

Add the following HTML code:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Test</title>

</head>

<body>

  <input type="text" id="messageInput" placeholder="Type a message">

  <button id="sendButton">Send</button>

  <div id="output"></div>
  <script>
    const socket = new WebSocket('ws://localhost:3000');

    socket.onopen = (event) => {
      console.log('WebSocket connection opened');
    };

    socket.onmessage = (event) => {
      const output = document.getElementById('output');
      output.innerHTML = `Received: ${event.data}`;
    };
    socket.onclose = (event) => {
      console.log('WebSocket connection closed');
    };

    const sendButton = document.getElementById('sendButton');
    sendButton.addEventListener('click', () => {
      const messageInput = document.getElementById('messageInput');
      const message = messageInput.value;
      socket.send(message);
    });

  </script>
</body>
</html>

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

						<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Test</title>
 
</head>
 
<body>
 
  <input type="text" id="messageInput" placeholder="Type a message">
 
  <button id="sendButton">Send</button>
 
  <div id="output"></div>
  <script>
    const socket = new WebSocket('ws://localhost:3000');
 
    socket.onopen = (event) => {
      console.log('WebSocket connection opened');
    };
 
    socket.onmessage = (event) => {
      const output = document.getElementById('output');
      output.innerHTML = `Received: ${event.data}`;
    };
    socket.onclose = (event) => {
      console.log('WebSocket connection closed');
    };
 
    const sendButton = document.getElementById('sendButton');
    sendButton.addEventListener('click', () => {
      const messageInput = document.getElementById('messageInput');
      const message = messageInput.value;
      socket.send(message);
    });
 
  </script>
</body>
</html>

					

			

Here is the file structure for the app

websocket-project/

├─node_modules/

├─ server.js

├─ index.html

└── package.json

6. Run the Server

Start the server by running

node server.js

7. Access the User InterfaceOpen a web browser and navigate to http://localhost:3000. You should see the simple UI with an input box and a “Send” button. Messages sent from the UI will be echoed back by the server and displayed on the page.

Get a Fast Estimate on Your Software Development Project

We are committed to delivering high-quality IT solutions tailored to meet the unique needs of our clients. As part of our commitment to transparency and excellence, we provide detailed project estimations to help our clients understand the scope, timeline, and budget associated with their IT initiatives.

Overview of WebSockets
What are WebSockets?
What are the uses?
How do they work?
Advantages of WebSockets
Set up your project environment

Amazon MQ: Microservices Introduction with AWS Lambda

AWS AWS lambda cloud Microservices Software Development Software development for startup

Microservices architecture has become widely used over the recent years, especially because of its extensibility. AWS Lambda in conjunction with…

View Article

Web Workers Vs. Service Workers in JavaScript

JavaScript JS NodeJS Software Development Software development for startup

JavaScript is an amazing language, but it is a uniprocessor and sometimes stumbles when working with complex or large data.…

View Article

Dynamic Routing with Next.js

JS React React Native Software Development Software development for startup Web

JavaScript has proved to be one of the best frameworks for rapid web applications production with proper SEO features. Of…

View Article

Webpack: The Modern JavaScript Module Bundler

JS React Software Development Software development for startup Web

Webpack is a most popular and widely used module bundler for javascript applications. It processes your project’s assets – JavaScripts,…

View Article

Pinecone: The Vector Database for Machine Learning

Machine Learning Real-Time Search Software Development Software development for startup Vector Database

In a field known as machine learning, the storage and accesses of information are critical to creating the best models…

View Article

Proxycurl – Your Ultimate Tool for Seamless Data Extraction

Software Development Software development for startup Web

As the world moves toward data-centric culture and environment, the ability to search and recover data is paramount to organizations,…

View Article

Solutions

For Agencies

For Enterprise

For Operations

For Business

For VCs

Industries

Travel and Hospitality

Healthcare

Energy

Retail and ECommerce

Education

Manufacturing

Gaming

Case Studies

How Innostax Streamlined Technique’s Project Management and Enhanced Efficiency through Automation

How Innostax Streamlined Travelstart’s Development Process and Delivered Outstanding Results

How Innostax Helped an Online Education Platform Modernize Its Entire Tech Stack

Core Offerings

Web Development

eCommerce

Mobile Apps

Offshore Development

Product Development

Software Testing

MVP Development Services

Custom software development services

Staff Augmentation

Dedicated Team

DevOps

Managed IT

IT Consulting

IT Outsourcing

Resource as a Service

Staff Augmentation

Digital Transformation

Digital Transformation

System Modernization

Cross Platform

React Native

Flutter

Xamarin

Ionic

Electron

React Native Desktop

Backend

Python

.Net

PHP

Java

NodeJS

GoLang

.NET Core

Frontend

ReactJs

VueJs

iOS

Android

AngularJS

Framework

Laravel

Symfony

Django

MEAN

MERN

Spring Boot

Database

Mongo DB

MySQL

GraphQL

Postgre SQL

SQL Server

Firebase

Our Process

Excellent Software, Decoded

Our Story

Building a Better Tomorrow

Links

Career Opportunities

Blogs