WebSockets 是一个在现代 Web 应用程序中常用的协议，用于实时双向通信。在前端领域，实现 WebSockets 通常需要使用 JavaScript 和一些 Web 框架来构建。本文将介绍如何使用 Express.js 实现 WebSockets，并给出一些示例代码和指导意义。
什么是 Express.js？
Express.js 是一款流行的 Node.js Web 框架，用于构建 Web 应用程序和 RESTful API。Express.js 非常容易上手，并提供了许多内置功能和中间件来加速开发过程。
为什么使用 Express.js 实现 WebSockets？
虽然 WebSockets 是一个通用的协议，但实现双向通信需要 WebSocket 服务器和客户端。在服务端，可以使用 Node.js 来实现 WebSocket 服务器，但编写 WebSocket 服务器并不是一件轻松的事情。这就是为什么使用流行的 Node.js Web 框架 Express.js 来实现 WebSockets 的好处之一：Express.js 简化了 WebSockets 的实现过程。
要使用 Express.js 实现 WebSockets，需要做以下几个步骤：
- 安装 Express.js 和 WebSocket 库。
在终端中输入以下命令进行安装：
npm install express ws
- 在 Express.js 应用程序中设置 WebSocket 服务。
在应用程序中添加以下代码，创建一个 WebSocket 服务器并将其附加到 Express.js 应用程序实例中：
// www.javascriptcn.com code example
const express = require('express');
const app = express();
const http = require('http').Server(app);
const WebSocket = require('ws');
const wss = new WebSocket.Server({ server: http });
wss.on('connection', function connection(ws) {
console.log('WebSocket 连接已建立');
ws.on('message', function incoming(message) {
console.log('收到消息： %s', message);
});
ws.send('已连接');
});
http.listen(3000, function() {
console.log('开始监听：3000 端口');
});- 在客户端中连接 WebSocket 服务器。
在客户端 JavaScript 中，连接到 WebSocket 服务器的代码如下所示：
// www.javascriptcn.com code example
if (window.WebSocket) {
var ws = new WebSocket('ws://localhost:3000');
ws.onmessage = function(event) {
console.log('收到消息：' + event.data);
};
ws.onopen = function() {
console.log('已连接到 WebSocket 服务器');
};
} else {
alert('您的浏览器不支持WebSocket');
}在客户端代码中，我们首先检查浏览器是否支持 WebSockets。如果支持，我们创建一个 WebSocket 对象并连接到服务器上。在连接成功后，我们可以发送和接收消息。
示例代码
下面是一个完整的 Express.js 应用程序，其中包含了上述的 WebSocket 代码。复制下面的代码，将其保存到一个名为 "app.js" 的文件中，并在终端中输入以下命令运行示例代码：
node app.js
// www.javascriptcn.com code example
const express = require('express');
const app = express();
const http = require('http').Server(app);
const WebSocket = require('ws');
const wss = new WebSocket.Server({ server: http });
app.use(express.static(__dirname + '/public'));
wss.on('connection', function connection(ws) {
console.log('WebSocket 连接已建立');
ws.on('message', function incoming(message) {
console.log('收到消息： %s', message);
});
ws.send('已连接');
});
http.listen(3000, function() {
console.log('开始监听：3000 端口');
});在您的浏览器中，输入 http://localhost:3000，打开应用程序，然后打开控制台，即可查看 WebSocket 通信的日志。
指导意义
Express.js 是一个流行的 Node.js Web 框架，用于构建 Web 应用程序和 RESTful API。通过使用 Express.js 来实现 WebSockets，您可以更轻松地将 WebSockets 集成到现有的 Web 应用程序中，并加速 WebSocket 应用程序的开发过程。
在使用 Express.js 实现 WebSockets 时，请注意一些最佳实践，包括：
- 使用 https 协议而不是 http 协议，以提高安全性。
- 使用可靠的 WebSocket 库，如 ws 或 socket.io。
- 考虑 WebSocket 连接中的性能和安全问题。
通过学习本文中的示例代码，您可以快速上手使用 Express.js 实现 WebSockets，并将其用于您的下一个 WebSocket 项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7d473a941bf7134e02aa4