Introduction to WebSockets in Node.js

Welcome back! Let's dive into how WebSockets can transform our application’s communication from traditional HTTP polling to a real-time, bi-directional flow between clients and servers.
WebSockets vs. HTTP
WebSockets are a protocol for sending messages over the internet, just like HTTP. However, unlike HTTP, WebSockets enable persistent, two-way communication between the client and the server.
With HTTP, the client must repeatedly poll the server for new messages. But with WebSockets, communication can happen in both directions at any time, significantly improving efficiency and enabling real-time interactivity.
Using WebSockets in Node.js
To use WebSockets in Node.js, we can leverage various npm libraries. The most common one is the ws library, which provides the core functionality for WebSockets on the server side.
Example: Setting Up a WebSocket Server
With the ws library, you can create a WebSocket server and respond to different events such as connection and message events:
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: ${message}`);
ws.send('Message received!');
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
This basic setup enables a WebSocket server to handle client connections and exchange messages in real time.
WebSockets in the Browser
While the ws library handles the server-side WebSocket implementation, browsers come with a native WebSocket object for the client-side. Using this object, you can:
Create a WebSocket connection.
Send messages to the server.
Listen for messages from the server.
Example: Using the WebSocket Object in the Browser
const ws = new WebSocket('ws://localhost:8080');
ws.addEventListener('open', () => {
console.log('Connected to the server');
ws.send('Hello Server!');
});
ws.addEventListener('message', (event) => {
console.log(`Message from server: ${event.data}`);
});
ws.addEventListener('close', () => {
console.log('Disconnected from the server');
});
Challenges with WebSockets
While WebSockets are powerful, they come with some challenges:
API Differences: The server-side ws library and the browser’s WebSocket object have different APIs, making implementation slightly more complex.
Browser Compatibility: Some older browsers might not support the WebSocket protocol, leading to potential application failures.
Introducing Socket.IO
Socket.IO is a higher-level library that addresses these challenges, providing a unified API for WebSockets on both the server and client sides.
Why Use Socket.IO?
Unified API: Socket.IO uses the same API for server-side and client-side WebSockets, eliminating the need to juggle different implementations.
Cross-Browser Support: Socket.IO includes fallbacks like HTTP long polling, ensuring compatibility with all browsers.
Enhanced Features: Socket.IO provides additional functionality, such as:
Broadcasting messages to multiple clients.
Rooms and namespaces for grouping clients.
Automatic reconnection handling.
Real-World Use Cases
Socket.IO is widely used in production-grade applications like Microsoft Office and Trello, thanks to its reliability and robust feature set.
Comparing WebSocket Libraries
Feature | Native WebSocket API | ws Library | Socket.IO |
API Consistency | No | No | Yes |
Browser Compatibility | Limited | N/A | Full |
Fallback Mechanism | No | No | Yes |
Additional Features | Minimal | Minimal | Extensive |
Getting Started with Socket.IO
Conclusion
WebSockets revolutionize how real-time communication is handled, enabling efficient and bi-directional data exchange. While native WebSocket APIs and libraries like ws provide core functionality, Socket.IO adds cross-platform compatibility, fallback mechanisms, and additional features, making it an excellent choice for building real-time Node.js applications.
Subscribe to my newsletter
Read articles from Muhammad Sufiyan directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Muhammad Sufiyan
Muhammad Sufiyan
As a former 3D Animator with more than 12 years of experience, I have always been fascinated by the intersection of technology and creativity. That's why I recently shifted my career towards MERN stack development and software engineering, where I have been serving since 2021. With my background in 3D animation, I bring a unique perspective to software development, combining creativity and technical expertise to build innovative and visually engaging applications. I have a passion for learning and staying up-to-date with the latest technologies and best practices, and I enjoy collaborating with cross-functional teams to solve complex problems and create seamless user experiences. In my current role as a MERN stack developer, I have been responsible for developing and implementing web applications using MongoDB, Express, React, and Node.js. I have also gained experience in Agile development methodologies, version control with Git, and cloud-based deployment using platforms like Heroku and AWS. I am committed to delivering high-quality work that meets the needs of both clients and end-users, and I am always seeking new challenges and opportunities to grow both personally and professionally.