如何在 Express.js 中实现 WebSocket 聊天室？-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 聊天室是一种在 Web 应用程序中实现实时双向通信的技术。在前端开发中，实现 WebSocket 聊天室是一项非常有趣的任务，本文将向你介绍如何在 Express.js 中使用 WebSocket 实现一个简单的聊天室。

理解 WebSocket

WebSocket 是一种在 Web 应用程序中实现实时双向通信的技术。它使用 HTTP 协议进行握手，然后使用 TCP 套接字实现数据传输。一旦握手成功，客户端和服务器之间可以通过 WebSocket 进行双向通信。这种方式比传统的 Ajax 轮询技术更为高效。

安装和配置

在使用 WebSocket 之前，你需要安装它。你可以使用 npm 包管理器安装它。

npm install ws

安装完成之后，你需要在 Express 应用程序中配置它。

// javascriptcn.com 代码示例
const WebSocket = require('ws');

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

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

  ws.on('message', (message) => {
    console.log(`received: ${message}`);
  });

  ws.send('Hello, client!');
});

以上代码创建了一个 WebSocket 服务器，该服务器将监听在 8080 端口上。当一个客户端连接到服务器上时，服务器将在控制台输出 "client connected"。当客户端发送一个消息时，服务器将该消息记录到控制台。当服务器向客户端发送一条消息时，客户端将收到一条名为 "Hello, client!" 的消息。

实现聊天室

实现聊天室的关键是将消息发送到所有客户端。在本例中，我们将使用一个数组来存储所有连接到服务器的客户端。当一个客户端连接到服务器时，将将其添加到该数组中。当一个客户端发送一条消息时，服务器将该消息发送给所有客户端。

// javascriptcn.com 代码示例
const WebSocket = require('ws');

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

const clients = [];

wss.on('connection', (ws) => {
  clients.push(ws);

  ws.on('message', (message) => {
    clients.forEach((client) => {
      if (client !== ws) {
        client.send(message);
      }
    });
  });
});

以上代码为服务器代码，它将处理连接到聊天室的客户端，并将消息发送给所有客户端。以下是前端代码。

// javascriptcn.com 代码示例
const ws = new WebSocket('ws://localhost:8080');

ws.onmessage = (event) => {
  const message = event.data;

  const paragraph = document.createElement('p');
  paragraph.textContent = message;

  document.body.appendChild(paragraph);
};

const form = document.querySelector('form');
const input = document.querySelector('input');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  ws.send(input.value);
});

以上代码将创建一个 WebSocket 连接，并处理从服务器接收到的消息。此外，它还为表单元素添加了一个 "submit" 事件，该事件将使客户端发送一条消息。

总结

在本文中，我们介绍了如何在 Express.js 中使用 WebSocket 实现一个简单的聊天室。使用 WebSocket，服务器和客户端之间可以实现实时双向通信。在实现聊天室时，请确保服务器将消息发送给所有客户端，并且客户端将从服务器接收到的消息显示在页面上。

示例代码：https://github.com/ExpressSnippets/websocket-chat-app

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f85439f6b2d6eab306f2ad