Unlocking the Power of Nodejs Websocket: Complete Guide

Have you ever found yourself in a situation where you needed to build a real-time application? Still, you found traditional client-server communication models too slow and inefficient. If so, WebSockets are the solution you’ve been looking for. WebSockets is a powerful protocol allowing bi-directional, low-latency communication between the client and server. According to Stack Overflow Developer Survey 2022, in Web framework and Technology category Node.js was at 47.12%. This means that it is the most popular web technology.

So a question often arises, how do you use WebSockets in Node.js? Let’s investigate a fundamental WebSocket application server in more detail. In this article, we’ll go over the basics of WebSockets, how to set one up using Node.js, how to create a WebSocket client with JavaScript, and more. You’ll have a firm grasp on utilizing WebSockets with Node.js to create real-time apps by the end of this article.

What Are WebSockets?

WebSocket is an internet protocol providing full-duplex (two-way) communication channels over a single TCP connection between a web browser or other client application and a web server. It was designed to be implemented in web browsers and servers but can be used by any client or server application. The WebSocket Protocol enables interaction between a client and server with lower overhead than half-duplex alternatives like HTTP polling, which requires additional round trips from the client to keep connections alive. In contrast, WebSockets remain open until one side closes it explicitly or due to network errors/timeouts on either side.

WebSockets make it much easier for developers when building rich interactive applications because they no longer have to worry about creating long-running request/response cycles. Instead, they just send messages back and forth through the socket whenever needed without having their users wait for page refreshes, etc., which results in improved responsiveness and better user experience overall.

Additionally, since all data transmitted through this channel is encrypted (using TLS), security concerns associated with traditional HTTP requests are drastically reduced, making them ideal for sensitive operations where privacy matters most, such as banking transactions, etc.

WebSockets also eliminates the need to write custom code every time an update needs to be propagated across multiple clients connected via the same session. Instead, changes made at one end automatically propagate across others, saving valuable development resources!

Implementing WebSockets Using Node.js

To implement WebSockets in Node.js, there are a few prerequisites that you need to have in place. It is also important that you follow best security practices while making a Node.js application, therefore, when it comes to ensuring the security of your Node.js applications, Node.js security best practices can help you protect your data and users.

Pre-requisites

Here are the prerequisites to create a WebSocket application:

• Node.js: You must have the latest version of Node.js installed and ready on your machine. If you don’t have Node’js, you can download and install the latest version from the official Node.js website.
• WebSocket library: You will need to install a WebSocket library such as ws to handle socket connections for your application.

Implementation

Now that we have everything set up, we are ready to start creating our WebSocket application.

Step 1: Initialize the Project To Run Nodejs Websocket

First, create a new Node.js project in the directory of your choosing. Next, install the ws library using the node package manager (npm):

mkdir nodejs-websockets
cd nodejs-websockets
npm init -y

Step 2: Install the Required Dependencies

Next, we need to install the ws library, which would allow us to display the client side using an HTML page. To install the library, open your terminal and type the following npm command:

npm install ws express

This is how your package.json file should look like:

{
  "name": "websockets-nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "ws": "^8.13.0"
  }
}

Note: This tutorial is based around version 8.13.0 of the ws and version 4.18.2 of the express package. Therefore, your implementation may differ depending on the latest version during installation.

Step 3: Create a WebSocket Server

Now that we have everything set up, let’s create the WebSocket server for our application. First, make a new file in your project folder and name it  server.js. Then add the following server-side code:

const express = require('express')

const webserver = express()
 .use((req, res) =>
   res.sendFile('/ws-client.html', { root: __dirname })
 )
 .listen(3000, () => console.log(`Listening on ${3000}`))

const { WebSocketServer } = require('ws')
const sockserver = new WebSocketServer({ port: 2048 })

sockserver.on('connection', ws => {
    console.log('New client connected!')
    
    ws.send('connection established')
    
    ws.on('close', () => console.log('Client has disconnected!'))
    
    ws.on('message', data => {
        sockserver.clients.forEach(client => {
        console.log(`distributing message: ${data}`)
        client.send(`${data}`)
        })
    })
    
    ws.onerror = function () {
        console.log('websocket error')
    }
}
)

This will create a new WebSocket server on port 2048  that will listen for new connections. So, when a new client connects, messages, or disconnects, the server will log a message on the console.

Step 4: Create a WebSocket Client

To make the server available through the browser, you must next construct a page in HTML called ws-client.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebSocket Chat App</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <style>
      body{
        padding:4rem;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>WebSocket Chat App</h1><br /><br /><br />
    
    <form id="input-form">
      <input class="form-control" type="text" id="message" placeholder="Enter message here" name="message"><br /><br />
      <input class="btn btn-primary" type="submit" value="Send"><br /><br />
    </form>
    
    <div id="messages"></div>
  </body>
</html>

Add the following code to the script element of the HTML file to build a WebSocket client:

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

webSocket.onmessage = (event) => {
  console.log(event)
  document.getElementById('messages').innerHTML += 
    'Message from server: ' + event.data + "<br />";
};

webSocket.addEventListener("open", () => {
  console.log("Client is now connected");
});

function sendMessage(event) {
  var inputMessage = document.getElementById('message')
  webSocket.send(inputMessage.value)
  inputMessage.value = ""
  event.preventDefault();
}

document.getElementById('input-form').addEventListener('submit', sendMessage);

By using port 2048 to connect to the server, this code establishes a new WebSocket client. We send a message to the server as soon as the connection is made, and we log a message to the console. We also keep an eye out for server messages, and we log them to the console. When the client disconnects, we finally watch for the closure event to log a message.

The final HTML file should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebSocket Chat App</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <style>
      body{
        padding:4rem;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>WebSocket Chat App</h1><br /><br /><br />
    
    <form id="input-form">
      <input class="form-control" type="text" id="message" placeholder="Enter message here" name="message"><br /><br />
      <input class="btn btn-primary" type="submit" value="Send"><br /><br />
    </form>
    
    <div id="messages"></div>
    <script>
      const webSocket = new WebSocket('ws://localhost:2048/');

      webSocket.onmessage = (event) => {
        console.log(event)
        document.getElementById('messages').innerHTML += 
          'Message from server: ' + event.data + "<br />";
      };

      webSocket.addEventListener("open", () => {
        console.log("Client is now connected");
      });

      function sendMessage(event) {
        var inputMessage = document.getElementById('message')
        webSocket.send(inputMessage.value)
        inputMessage.value = ""
        event.preventDefault();
      }

      document.getElementById('input-form').addEventListener('submit', sendMessage);
    </script>
  </body>
</html>

Your HTML page would look like this.

Step 5: Start the Server and Run the Client

Finally, start the server by running the following command in your terminal:

node server.js

You should see the following output in your terminal:

This indicates that the server is now running.

Now, go to your browser and open http://localhost:3000

The output shows that the client successfully connected to the server.

You can see that the Client App is connected to the server. Now, you can open multiple instances of the App and try sending messages back and forth. As you can see, you receive a real-time message response from the server on the web page, right below the send button.

Alternatives to the ws Library

While the ws library is a popular choice for working with WebSockets in Node.js, several other libraries and frameworks can be used to achieve similar results. Let’s look at some of these alternatives and compare them to the ws library.

Socket.io

Working with WebSocket connections in Node.js is made simple and intuitive by the well-known WebSocket module Socket.io. Developers may make applications that run on a variety of devices since it enables fallback mechanisms for browsers that do not support WebSockets.

The ability to design complicated applications with various communication channels thanks to Socket.io’s support for namespaces and rooms is one of its primary benefits. It’s an excellent option for real-time applications because it has a built-in method for dealing with client disconnections and reconnections.

But compared to the ws library, Socket.io has a larger codebase and more dependencies, which could make it slower and use more resources. Additionally, the code is challenging to read and maintain due to the heavy reliance on callbacks.

SockJS

For browsers that do not support WebSockets, a fallback option is offered by SockJS, another WebSocket library. Additionally, it supports a variety of transports, such as polling, which can be advantageous when interacting with older browsers and devices.

SockJS supports server-side implementations in many languages, including Java, Python, and Ruby, which is one of its key benefits. It is a wonderful option for developing cross-platform applications because of this.

However, SockJS is less well-known and utilized than the ws library and Socket.io, making it more challenging to locate online assistance and information. Additionally, it offers fewer features and might not be appropriate for sophisticated applications.

uWebSockets.js

A lightweight WebSocket framework called uWebSockets.js offers a high-performance interface for managing WebSocket connections in Node.js. It is a good option for high-speed data transmission applications since it uses a low-level C++ core to provide quick performance and little latency.

One of uWebSockets.js’s key benefits is its compact codebase and little resource utilization, which can lower server costs and boost performance. It is a suitable option for real-time applications because it has a built-in system for handling disconnections and faults.

The learning curve for uWebSockets.js is steeper than that of other WebSocket libraries, hence it might not be appropriate for novice programmers or developers with little background in low-level programming.

Pros and Cons of WebSocket Libraries

Each library has advantages and disadvantages, depending on the application’s requirements and the developer’s experience.

Here are some general pros and cons of using WebSocket libraries in Node.js.

Alternatives of WebSockets

Let’s dive into the alternatives to WebSockets and compare them to WebSockets.

It’s crucial to take into account the particular requirements of your application when contrasting WebSockets to various alternatives. WebSockets are able to support numerous active clients and provide low-latency, bidirectional communication. Modern browsers also frequently support WebSockets, which are simple to create in Node.js using the ws package.

On the other side, though they may be easier to build, some alternatives, such as Long Polling and SSE, could not be as effective or scalable. Although WebRTC involves additional setup and is not always required, it is excellent for some use cases. MQTT works well for Internet of Things applications, however, it might not work for all real-time communication scenarios.

Conclusion

In conclusion, WebSockets are a powerful tool that can provide great solutions for building real-time applications. They allow bi-directional, low-latency communication between the client and server.

When used alongside Node.js, they provide a scalable, high-performance solution for developers to build real-time applications with rich, interactive, and responsive GUIs without worrying about long-running request/response cycles. In addition, WebSockets enhance the security of sensitive operations, such as banking transactions, and eliminate the need for custom code every time an update needs to be transferred across multiple clients.

When developing Node.js applications, finding a reliable and experienced team of developers who can deliver high-quality and scalable Node.js services is important. The Node.js development company should have prior expertise in building innovative and performance-driven Node.js applications.

If you enjoyed this article, check out our other guides below;

• Change Node Version: A Step-by-Step Guide
• Caching Node JS: Boosting Performance & Efficiency
• Unlock the Power of Node.JS Microservices
• Unlocking the Power of Nodejs Websocket
• Best Node JS IDE & Text Editors for Application Development