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

WebSocket 是一种在客户端和服务器之间进行双向通信的技术，它可以实现实时的数据传输，因此被广泛应用于聊天室、实时游戏等场景。Express.js 是一款基于 Node.js 的 Web 框架，它提供了一系列方便的工具和中间件，可以帮助我们快速开发 Web 应用。本文将介绍如何使用 Express.js 实现 WebSocket 聊天室。

WebSocket 原理

WebSocket 是基于 HTTP 协议的，它通过 HTTP 协议进行握手，建立连接后，就可以使用双向通信协议进行数据传输。WebSocket 协议的特点是轻量级、实时性好、跨域支持好。

WebSocket 的握手过程如下：

客户端向服务器发送一个 HTTP 请求，其中包含 Upgrade 和 Connection 头部，用于指示协议升级和保持连接。
服务器返回一个 HTTP 响应，其中包含 Upgrade 和 Connection 头部，用于指示协议升级和保持连接，并添加 Sec-WebSocket-Accept 头部，用于验证客户端请求的合法性。
握手成功后，客户端和服务器就可以使用 WebSocket 协议进行双向通信了。

Express.js 实现 WebSocket

Express.js 并没有原生支持 WebSocket，但是可以使用一些第三方库来实现。这里我们使用 ws 库来实现 WebSocket。

首先，我们需要安装 ws 库：

npm install ws

然后，我们可以在 Express.js 中使用 ws 库来实现 WebSocket。下面是一个简单的聊天室示例：

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

const app = express();

// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听 WebSocket 连接事件
wss.on('connection', function connection(ws) {
  console.log('connection');

  // 监听 WebSocket 消息事件
  ws.on('message', function incoming(message) {
    console.log('message:', message);

    // 广播消息给所有客户端
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

// 监听 HTTP 请求
app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000, function() {
  console.log('listening on *:3000');
});

在上面的示例中，我们创建了一个 WebSocket 服务器，并监听了 connection 和 message 事件。当有客户端连接到服务器时，会触发 connection 事件，我们可以在该事件中进行一些初始化操作。当客户端发送消息时，会触发 message 事件，我们可以在该事件中处理消息，并广播给所有客户端。

在 Express.js 中，我们还需要监听 HTTP 请求，通常会返回一个 HTML 页面，用于客户端连接 WebSocket 服务器。上面的示例中，我们监听了根路径的 GET 请求，并返回了一个 index.html 页面。

总结

本文介绍了如何使用 Express.js 实现 WebSocket 聊天室。通过这个示例，我们可以学习到 WebSocket 的原理和如何在 Express.js 中使用第三方库实现 WebSocket。WebSocket 在实时通信场景下应用广泛，对于前端开发人员来说是一项必备技能。

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