在现代 web 应用中，实时数据交互已经成为了必不可少的一环。而 WebSocket 作为 HTML5 引入的标准，能够为实时数据交互提供强大的支持，因此得到了广泛的应用。在这篇文章中，我们将会讲解如何在 Express.js 中使用 WebSocket。
WebSocket 简介
WebSocket 是一种在单个 TCP 连接上进行全双工通信的应用层协议，允许客户端和服务器端进行实时数据交互。相比传统的 HTTP 请求-响应模式，WebSocket 更加高效和实时。WebSocket 的使用需要客户端和服务器端都支持，而且客户端和服务器端的接口要遵循一定的协议。
开始使用 WebSocket
在 Express.js 中使用 WebSocket 首先需要安装相应的包。常用的 WebSocket 包有 ws 和 socket.io，本文使用 ws 作为演示。
npm install ws --save
在安装好之后，我们需要在 Express.js 中引入 ws 包，创建并监听 WebSocket 服务器。在实践中，WebSocket 服务器的创建往往需要在 Express 服务器启动后进行。
// www.javascriptcn.com code example
const WebSocket = require('ws');
const express = require('express');
const app = express();
const server = app.listen(3000, () => { console.log("Listening on port 3000") });
const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => {
console.log("WebSocket connection open");
ws.on('message', (message) => {
console.log(`Received: ${message}`);
});
ws.on('close', () => {
console.log("WebSocket connection closed");
});
});上述代码中，我们使用了 Express.js 创建了一个服务器，并将它监听在 3000 端口。然后，我们使用 ws 包创建了一个 WebSocket 服务器，将它与 Express.js 服务器进行了绑定。当有 WebSocket 连接时，服务器将会输出“WebSocket connection open”的消息。当有消息传来时，服务器会将其输出。最后，当 WebSocket 连接关闭时，服务器将会输出“WebSocket connection closed”的消息。
前端实现 WebSocket 连接
在前端实现 WebSocket 连接很简单，我们只需要调用 WebSocket 的构造函数即可。然后，我们可以监听 WebSocket 对象的事件，如 open、message 和 close。
// www.javascriptcn.com code example
const ws = new WebSocket('ws://localhost:3000');
ws.addEventListener('open', () => {
console.log('WebSocket connection open');
});
ws.addEventListener('message', (event) => {
console.log(`Received: ${event.data}`);
});
ws.addEventListener('close', () => {
console.log('WebSocket connection closed');
});上述代码中，我们使用了 ws://localhost:3000 地址进行 WebSocket 连接。当连接建立时，前端将会输出“WebSocket connection open”的消息。当服务器发来消息时，前端将会将其输出。最后，当 WebSocket 连接关闭时，前端将会输出“WebSocket connection closed”的消息。
WebSocket 应用示例
下面是一个简单的 WebSocket 应用示例。该应用通过 WebSocket 实现了类似聊天室的功能。
服务器端代码：
// www.javascriptcn.com code example
const WebSocket = require('ws');
const express = require('express');
const app = express();
const server = app.listen(3000, () => { console.log("Listening on port 3000") });
const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => {
console.log("WebSocket connection open");
ws.on('message', (message) => {
console.log(`Received: ${message}`);
wss.clients.forEach((client) => {
client.send(message);
});
});
ws.on('close', () => {
console.log("WebSocket connection closed");
});
});前端代码：
// www.javascriptcn.com code example
const ws = new WebSocket('ws://localhost:3000');
ws.addEventListener('open', () => {
console.log('WebSocket connection open');
});
ws.addEventListener('message', (event) => {
const message = JSON.parse(event.data);
const { sender, text } = message;
const chatBox = document.querySelector('#chatBox');
const newMessage = document.createElement('div');
newMessage.textContent = `${sender}: ${text}`;
chatBox.appendChild(newMessage);
});
ws.addEventListener('close', () => {
console.log('WebSocket connection closed');
});
const form = document.querySelector('#messageForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
const sender = document.querySelector('#sender').value;
const text = document.querySelector('#text').value;
const message = { sender, text };
ws.send(JSON.stringify(message));
document.querySelector('#text').value = '';
});在该示例中，当一个 WebSocket 连接建立时，服务器将打印出“WebSocket connection open”的消息。当有消息传来时，服务器将会将其广播给所有客户端。当一个 WebSocket 连接关闭时，服务器将打印出“WebSocket connection closed”的消息。同时，在前端中，我们监听了表单 submit 事件，将消息以 JSON 格式发送给服务器。当从服务器收到消息时，我们将其渲染到聊天窗口中。
总结
在 Express.js 中使用 WebSocket 非常简单，我们只需要在服务器端监听 WebSocket 的连接，然后在前端中建立 WebSocket 连接即可。WebSocket 可以为实时数据交互提供强大的支持，是现代 web 应用中必不可少的一环。希望本文能够帮助读者更好地理解 WebSocket 的使用方法，并在实际开发中得到应用。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64f453c7f6b2d6eab3d62cc6