WebSocket client

Imagine attending a dynamic auction where bidders and the auctioneer are in constant communication, bids flying back and forth without pause. This is akin to the concept of a WebSocket client in the digital realm. Traditional web communication is like mailing letters; you send a request and wait for a response. However, with WebSockets, it's more like a phone call, with both parties actively engaged in a live, interactive conversation. This persistent, open channel is essential for applications that require real-time data flow, such as chat applications, live sports updates, or stock trading platforms. This topic will walk you through crafting your very own WebSocket client in Node.js, enabling your applications to communicate in real-time with a server as effortlessly as conversing over coffee.

Understanding websockets

A WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. Once established, the WebSocket connection allows the server and client to send messages back and forth while keeping the connection open. In the context of Node.js, you can utilize various libraries to work with WebSockets. One popular choice is the ws library, which is simple to use and integrates well with Node.js applications.

Setting up the websocket client

Before you can start writing your WebSocket client, you need to install the ws library. You can do this using npm, the Node.js package manager. Run the following command in your project directory:

npm install ws

You also need a WebSocket server to connect to. For this example, let's assume you have a local WebSocket server running on ws://localhost:8080.

With the ws library installed and local WebSocket server, you can now proceed to create your WebSocket client.

Creating the websocket client

Create a new file named app.js and open it in your favorite text editor.

To create a WebSocket client, you'll need to import the WebSocket class from the ws module. Here's how you can establish a connection to a WebSocket server:

const WebSocket = require('ws');

// Replace 'ws://localhost:8080' with your server's WebSocket endpoint
const socket = new WebSocket('ws://localhost:8080');

socket.on('open', function open() {
    console.log('Connected to the WebSocket server.');
    socket.send('Hello Server!');
});

socket.on('message', function incoming(data) {
    console.log('Received:', data);
});

socket.on('close', function close() {
    console.log('Disconnected from the server.');
});

// Function to send a message to the server
function sendMessage(message) {
    if (socket.readyState === WebSocket.OPEN) {
        socket.send(message);
        console.log('Sent:', message);
    } else {
        console.log('WebSocket connection not open.');
    }
}

// Send a message to the server every 5 seconds
setInterval(() => {
    sendMessage('Ping');
}, 5000);

This script sets up a WebSocket client that connects to a server running on localhost at port 8080.

• new WebSocket('ws://localhost:8080'): This creates a new WebSocket instance and attempts to connect to the server at the specified URL.

• socket.on('open', ...): This function is called when the client successfully connects to the server.

• socket.on('message', ...): This function is called when the client receives a message from the server.

• socket.on('close', ...): This function is called when the server closes the connection.

In the example, you added a sendMessage function that sends a message to the server. You can call this function whenever you want to send a message. Additionally, you added an example that sends a message to the server every 5 seconds using setInterval.

Sending messages to the server

Once the connection is open, you can send messages to the server using the send method on the WebSocket object:

socket.on('open', function open() {
    console.log('Connected to the WebSocket server.');
    socket.send('Hello Server!');
});

The 'open' event listener ensures that you're sending messages only after establishing the connection.

Handling incoming messages

Handling incoming messages is done by setting up a listener for the 'message' event. The callback function receives the message data as an argument:

socket.on('message', function incoming(data) {
    console.log('Received:', data);
});

The data received can be processed or used as needed within your application.

Closing the connection

It is also a good practice to handle the 'close' event to perform any cleanup or final actions when the connection is closed:

socket.on('close', function close() {
    console.log('Disconnected from the server.');
});

Run the websocket client

To run your WebSocket client, use the following command in your terminal:

node app.js

Executing this command will start the Node.js process and attempt to connect to the WebSocket server at the ws://localhost:8080 address.

If successful, you will see the message "Connected to the WebSocket server." and "Sent: Ping" in your webSocket client's terminal. Any messages sent by the server will be logged into the client's console.

Conclusion

In this topic, you have learned how to create a WebSocket client in Node.js using the ws library. You've seen how to set up the WebSocket connection, send messages to the server, handle incoming messages, and close the connection gracefully. With this knowledge, you can now integrate real-time features into your Node.js applications, enhancing the user experience. Now, let's put what you've learned into practice with some tasks.