How to Implement Websocket Server With Node.js

There are many types of protocols we can follow for communication between two or more systems. The most used communication protocol is the HTTPS protocol. But if you want real-time & quick data transfer, HTTPS is not recommended.

The WebSockets protocol is completely different from the HTTP or HTTPS protocol. After the initial handshake occurs over HTTP, there is no more notion of HTTP related things, for example, cookies.

The major con of HTTPS for real-time data transfer is that HTTPS is unidirectional. That means, when you have to do communication, it always opens the connection, does its processing, and returns with some response by closing the connection. For real-time data, it is too much processing. To avoid this, we can go with WebSockets.

The WebSocket connection is a persistent connection between a client app and the server. The server can send messages to the client, and the client sends its response back with the same connection, which is created initially. It allows the server and client to communicate in an asynchronous way. The server and client can communicate and acknowledge or exchange the data at the same time. WebSocket helps to create real-time communication between web servers and clients.

How can we implement WebSockets?

There are many ways out of these we prefer to go with “ socket.io.” It is a library that allows us to do real-time, bidirectional, and event-based communication between the browser and the server, which is based on Node.js and a Javascript client library for the browser. It is the wrapper around the WebSocket API.

The best part of socket.io library is –

• It supports almost all browsers (97%), that are available today
• There is no element (proxy, firewall, …) preventing WebSocket connections between the client and the server.

Server-side code snippet to set up Websocket.io –

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

io.on('connect', socket => {
// either with send()
socket.send('Hello!');

// or with emit() and custom event names
socket.emit('greetings', 'Hey!', { 'dr': 'anna' }, Buffer.from([4, 3, 3, 1]));

// handle the event sent with socket.send()
socket.on('message', (data) => {
console.log(data);
});

// handle the event sent with socket.emit()
socket.on('salutations', (elem1, elem2, elem3) => {
console.log(elem1, elem2, elem3);
});
});

Client-side code snippet to set up Websocket.io –

const socket = io('ws://localhost:3000');
socket.on('connect', () => {

// either with send()

socket.send('Hello!');
// or with emit() and custom event names
socket.emit('salutations', 'Hello!', { 'dr': 'jordan' }, Uint8Array.from([1, 2, 3, 4]));

});
// handle the event sent with socket.send()

socket.on('message', data => {

console.log(data);

});
// handle the event sent with socket.emit()

socket.on('greetings', (elem1, elem2, elem3) => {

console.log(elem1, elem2, elem3);

});

Advantages of using ‘socket.io’ library 

• Better Reliability
• Auto-reconnection support
• Disconnection detection
• Binary support
• Multiplexing support

For more details, what is better than official documentation!

Quick Demo –

Do check the live demo at – Chat App Demo

Find code for above demo at – Click Here