Build real-time apps: modern webSockets in express.

·

3 min read

Table of contents

No heading

No headings in the article.

Getting Started with Socket.IO, Node.js and Express

If you're building a real-time web application, WebSockets can be a powerful tool for enabling two-way communication between a client and a server. With app.ws, it's easy to add WebSocket functionality to your Express application.

To get started, you'll need to install app.ws as a dependency in your project. You can do this using npm:

npm install --save app.ws

Once app.ws is installed, you can use it to create a WebSocket connection in your Express application. Here's an example of how to do that:

const express = require('express');
const app = express();
const expressWs = require('express-ws')(app);

app.ws('/socket', (ws, req) => {
  console.log('WebSocket connection established');

  ws.on('message', (msg) => {
    console.log(`Received message: ${msg}`);
    ws.send(`You said: ${msg}`);
  });

  ws.on('close', () => {
    console.log('WebSocket connection closed');
  });
});

In this example, we're creating an Express application and using express-ws to enable WebSocket support. We then define a WebSocket endpoint at /socket. When a client connects to this endpoint, the callback function is called with the WebSocket instance and the HTTP request object.

Inside the callback function, we define event listeners for the message and close events on the WebSocket instance. When a message is received, we log it to the console and send a response back to the client. When the connection is closed, we log a message to the console.

And that's it! With just a few lines of code, you can add WebSocket support to your Express application using app.ws. This can be a powerful tool for building real-time web applications that require two-way communication between a client and a server.

const express = require('express');
const app = express();
const expressWs = require('express-ws')(app);

// Define a WebSocket endpoint at /socket
app.ws('/socket', (ws, req) => {
  // When a client connects, log a message to the console
  console.log('WebSocket connection established');

  // Define an event listener for the message event on the WebSocket instance
  ws.on('message', (msg) => {
    // When a message is received, log it to the console
    console.log(`Received message: ${msg}`);
    // Send a response back to the client
    ws.send(`You said: ${msg}`);
  });

  // Define an event listener for the close event on the WebSocket instance
  ws.on('close', () => {
    // When the connection is closed, log a message to the console
    console.log('WebSocket connection closed');
  });
});

// Start the server and listen on port 3000
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Here's a breakdown of what each part of the code does:

  • const express = require('express');: Import the Express framework.

  • const app = express();: Create a new instance of the Express application.

  • const expressWs = require('express-ws')(app);: Use express-ws to enable WebSocket support in the Express application.

  • app.ws('/socket', (ws, req) => { ... });: Define a WebSocket endpoint at /socket and provide a callback function that will be called whenever a client connects to the endpoint.

  • console.log('WebSocket connection established');: Log a message to the console when a client connects to the WebSocket endpoint.

  • ws.on('message', (msg) => { ... });: Define an event listener for the message event on the WebSocket instance. This will be called whenever the client sends a message to the server.

  • console.log(Received message: ${msg});: Log the received message to the console.

  • ws.send(You said: ${msg});: Send a response back to the client.

  • ws.on('close', () => { ... });: Define an event listener for the close event on the WebSocket instance. This will be called whenever the connection is closed.

  • console.log('WebSocket connection closed');: Log a message to the console when the WebSocket connection is closed.

  • app.listen(3000, () => { ... });: Start the server and listen on port 3000.

Did you find this article valuable?

Support The Backend Express by becoming a sponsor. Any amount is appreciated!