Why Your Web App Feels Slow? Real-Time WebSockets with Node.js Might Be the Answer!

Have you ever used a chat app that lags or a live notification system that updates only when you refresh the page?

Annoying, right?

Imagine if your favorite messaging app worked like that—it would be a disaster!

That’s where WebSockets come in. They keep an open connection between the client and the server, enabling real-time updates without constantly making requests.

Let’s dive into how WebSockets, combined with Node.js, can supercharge your web apps!

What Are WebSockets?

WebSockets allow full-duplex communication between a client and server. Unlike traditional HTTP requests, which are request-response-based, WebSockets maintain a persistent connection, making them ideal for:

Live chat applications

Stock market updates

Multiplayer games

Collaborative editing (Google Docs style)

Live notifications

Want a quick visual comparison of HTTP vs. WebSockets? Check out this article: Understanding WebSockets

Setting Up WebSockets with Node.js

Let’s create a simple WebSocket server using ws, a popular WebSocket library for Node.js.

Install Dependencies

npm init -y 
npm install ws 

Create a WebSocket Server

const WebSocket = require('ws'); 

const wss = new WebSocket.Server({ port: 8080 }); 

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

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

    ws.on('close', () => console.log('Client disconnected')); 
}); 

console.log('WebSocket server running on ws://localhost:8080'); 

Now, your server is ready to handle real-time messages!

Creating a Simple WebSocket Client

Let’s connect a client to our WebSocket server.

const ws = new WebSocket('ws://localhost:8080'); 

ws.onopen = () => { 
    console.log('Connected to server'); 
    ws.send('Hello, Server!'); 
}; 

ws.onmessage = (event) => { 
    console.log(`Message from server: ${event.data}`); 
}; 

ws.onclose = () => console.log('Disconnected from server'); 

Run this in your browser console or a Node.js environment, and watch the magic happen!

WebSockets vs. HTTP Polling: Why It Matters

Many developers still use AJAX polling (repeated requests to the server) to get real-time updates, but that approach is inefficient and slow.

WebSockets: Instant updates, no unnecessary network traffic

AJAX Polling: Constant requests, high server load

For a more detailed breakdown, check out this WebSockets vs. Polling article.

Enhancing WebSockets with Socket.io

If you need easier event-based communication, use socket.io, which simplifies WebSockets and provides automatic reconnection, rooms, and namespaces.

npm install socket.io 

Create a Socket.io server:

const io = require('socket.io')(3000); 

io.on('connection', (socket) => { 
    console.log('A user connected'); 

    socket.on('chatMessage', (msg) => { 
        console.log(`Message: ${msg}`); 
        io.emit('chatMessage', msg); 
    }); 

    socket.on('disconnect', () => console.log('User disconnected')); 
}); 

And the client-side connection:

const socket = io('http://localhost:3000'); 

socket.emit('chatMessage', 'Hello from client!'); 

socket.on('chatMessage', (msg) => { 
    console.log(`New message: ${msg}`); 
}); 

Now, you have a fully functional real-time chat! Try it out!

Where to Go from Here?

Implement authentication in WebSockets (JWT with WebSockets)

Scale WebSockets with Redis for multiple servers (Scaling WebSockets)

Explore WebRTC for real-time video/audio communication

What’s the coolest WebSocket project you’ve worked on? Drop your thoughts in the comments!

Follow DCT Technology for more real-time web development tips!