Express.js 中使用 WebSocket 实现双向通信-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，实现实时通信是非常常见的需求，例如聊天室、在线游戏等。传统的 HTTP 协议是无法满足这种需求的，因为 HTTP 是一种请求-响应的模式，客户端需要不断地向服务器发送请求才能获取最新的数据。这种轮询的方式会浪费大量的带宽和服务器资源，并且响应时间也会有延迟。

为了解决这个问题，WebSocket 技术应运而生。WebSocket 是一种基于 TCP 协议的双向通信协议，它可以在客户端和服务器之间建立一个持久性的连接，实现实时通信。在 Express.js 中使用 WebSocket 实现双向通信非常简单，本文将介绍如何使用 WebSocket 实现一个简单的聊天室。

安装 WebSocket

在 Express.js 中使用 WebSocket 需要安装一个叫做 ws 的第三方模块。可以使用 npm 命令进行安装：

npm install ws

创建 WebSocket 服务器

在 Express.js 中创建 WebSocket 服务器非常简单，只需要调用 ws 模块的 Server 构造函数即可：

const { Server } = require('ws');

const wss = new Server({ port: 8080 });

这段代码创建了一个 WebSocket 服务器，监听在 8080 端口上。接下来，我们需要监听客户端的连接请求，并在连接成功后发送欢迎消息：

wss.on('connection', (ws) => {
  console.log('Client connected');
  ws.send('Welcome to the chat room!');
});

这段代码监听了 connection 事件，当客户端连接成功后就会触发该事件。ws 参数是一个 WebSocket 对象，可以用来向客户端发送消息。

处理客户端消息

当客户端向服务器发送消息时，服务器需要对消息进行处理。可以使用 ws 模块的 message 事件来监听客户端发送的消息：

// javascriptcn.com 代码示例
wss.on('connection', (ws) => {
  console.log('Client connected');
  ws.send('Welcome to the chat room!');

  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

这段代码监听了 message 事件，并将收到的消息发送给所有连接到服务器的客户端。需要注意的是，不能将消息发送给自己，否则会出现消息重复的问题。

创建聊天室页面

最后，我们需要创建一个简单的聊天室页面，让用户可以在页面中发送消息。可以使用 Express.js 提供的静态文件中间件来提供静态文件服务：

const express = require('express');
const app = express();

app.use(express.static('public'));

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

这段代码启动了一个 Express.js 服务器，监听在 3000 端口上，并提供了一个静态文件服务，将 public 目录下的所有文件作为静态文件提供。

在 public 目录下创建一个 index.html 文件，用于展示聊天室页面。页面中需要包含一个输入框和一个按钮，用于发送消息。可以使用 WebSocket API 来与服务器建立连接，并发送和接收消息：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Chat Room</title>
</head>
<body>
  <div id="messages"></div>
  <input type="text" id="message">
  <button id="send">Send</button>
  <script>
    const ws = new WebSocket('ws://localhost:8080');

    ws.onmessage = (event) => {
      const message = event.data;
      const messages = document.getElementById('messages');
      messages.innerHTML += `<p>${message}</p>`;
    };

    const sendButton = document.getElementById('send');
    sendButton.addEventListener('click', () => {
      const messageInput = document.getElementById('message');
      const message = messageInput.value;
      ws.send(message);
      messageInput.value = '';
    });
  </script>
</body>
</html>

这段代码使用了 WebSocket API 的 WebSocket 构造函数来创建一个 WebSocket 对象，并指定了连接的地址。在收到服务器发送的消息时，页面会向 messages 元素中添加一条消息。在点击发送按钮时，页面会向服务器发送消息，并清空输入框中的内容。

总结

本文介绍了如何在 Express.js 中使用 WebSocket 实现双向通信，包括创建 WebSocket 服务器、处理客户端消息、创建聊天室页面等。WebSocket 技术可以有效地实现实时通信，减少对服务器资源的浪费，提高用户体验。在实际开发中，可以结合其他技术，例如 Socket.IO、MQTT 等，实现更加复杂的实时通信场景。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6586bdf8d2f5e1655d11bf5c