Express.js WebSocket Examples

Imagine you're at a concert. The band is playing live, and every note hits you instantly. No lags, no delays. That’s the magic of real-time communication, and WebSockets bring that magic to the web. This article explores WebSockets in the context of Express.js, showing you how to build applications that harmonize perfectly with user actions.

What Are WebSockets?

WebSockets facilitate two-way communication between clients and servers. Unlike HTTP, which is request-response, WebSockets let the server send data anytime. Think of it like having a walkie-talkie instead of a pager.

Setting Up Express.js With WebSockets

Before we get busy with examples, let's set the stage:

Step 1: Initialize an Express project

Start by creating a new directory and initializing npm:

mkdir websocket-example
cd websocket-example
npm init -y

Step 2: Install the Required Packages

You'll need Express and ws, a simple WebSocket library.

npm install express ws

Basic WebSocket Server with Express.js

Let’s create a basic WebSocket server using Express.

Step 3: Create a Server File

Create a file named server.js:

const express = require('express');
const WebSocket = require('ws');

const app = express();
const port = 3000;

const server = app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// Setting up WebSocket server
const wss = new WebSocket.Server({ server });

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

  // Send a message to the client
  ws.send('Welcome to the WebSocket server!');

  // Handle messages from client
  ws.on('message', (message) => {
    console.log(`Received: ${message}`);
    ws.send(`You sent: ${message}`);
  });

  // Handle client disconnect
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

Explanation:

Import dependencies: express for creating the HTTP server and ws for WebSockets.
Create the Express app: Standard procedure for any Express app.
Listen for connections: Utilizes ws to establish a WebSocket server that piggybacks on the HTTP server.
Handle new connections: Sends a greeting message to each new client.
Respond to messages: Logs and echoes back any message received from clients.
Manage disconnections: Logs a message when clients disconnect.

Creating a Simple WebSocket Client

Now, let's set up a basic client to test our server.

Step 4: Build an HTML Client

Create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Client</title>
  <style>
    #messages { list-style: none; padding: 0; }
    #messages li { padding: 8px; margin-bottom: 2px; background-color: #f0f0f0; }
  </style>
</head>
<body>
  <ul id="messages"></ul>
  <input id="input" autocomplete="off" placeholder="Type a message" />
  <button id="send">Send</button>

  <script>
    const ws = new WebSocket('ws://localhost:3000');

    ws.onopen = () => console.log('Connected to server');

    ws.onmessage = (event) => {
      const msgList = document.getElementById('messages');
      const newMsg = document.createElement('li');
      newMsg.textContent = event.data;
      msgList.appendChild(newMsg);
    };

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

    const input = document.getElementById('input');
    const sendButton = document.getElementById('send');

    sendButton.onclick = () => {
      if (input.value) {
        ws.send(input.value);
        input.value = '';
      }
    };
  </script>
</body>
</html>

Explanation:

Set up a WebSocket connection: Uses WebSocket to connect to the server.
Display messages: Every time a message arrives, it’s added to a list for easy viewing.
Send messages: Captures input from a text box and sends it to the server.

Running Your WebSocket Application

With everything in place, you're ready to rock.

Step 5: Test Your Setup

Run your server:

node server.js

Open index.html in your browser. Type a message and click send. You'll see your message echoed back.

Enhancing Your WebSocket Communication

Once you've grasped the basics, consider adding features like broadcasting messages to all clients or maintaining a chat room. It’s like evolving from a garage band to an orchestra.

Conclusion

WebSockets and Express.js offer a powerful duo for real-time web applications. You've built a simple echo server and a minimal client. From here, the possibilities are endless, from dynamic dashboards to real-time gaming. It's time to explore, innovate, and bring your web applications to life with the magic of WebSockets.

The Code

Search This Blog