在现代 Web 应用中，实时通信变得越来越重要，特别是对于需要实时数据更新的应用，比如聊天应用、实时通知、在线游戏等。Express 是一个灵活且强大的 Web 框架，通过结合 WebSocket 和 Socket.IO，可以轻松实现实时通信功能。以下是关于如何在 Express 中使用 WebSocket 和 Socket.IO 实现实时通信的详细指南。
使用 WebSocket
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它是 HTML5 的一部分，为客户端和服务器之间的实时双向通信提供了标准化的方式。
安装 WebSocket
要在 Node.js 中使用 WebSocket，首先需要安装 ws 模块，这是一个简单且快速的 WebSocket 实现。
npm install ws
设置 WebSocket 服务器
首先，创建一个基本的 Express 应用，然后在其基础上添加 WebSocket 支持。
const express = require('express');
const http = require('http');
const WebSocket = require('ws');const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });wss.on('connection', (ws) => {console.log('New client connected');ws.on('message', (message) => {console.log(`Received message => ${message}`);// Echo the message back to the clientws.send(`Server: ${message}`);});ws.on('close', () => {console.log('Client has disconnected');});
});server.listen(3000, () => {console.log('Server is listening on port 3000');
});
在这个示例中，WebSocket 服务器与 HTTP 服务器共享同一个端口（3000）。当有新的客户端连接时，服务器将记录连接信息并设置消息处理器和关闭处理器。
客户端实现
在客户端，通过 JavaScript 使用 WebSocket 进行连接和通信。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>WebSocket Example</title>
</head>
<body><script>const ws = new WebSocket('ws://localhost:3000');ws.onopen = () => {console.log('Connected to the server');ws.send('Hello Server!');};ws.onmessage = (event) => {console.log(`Message from server: ${event.data}`);};ws.onclose = () => {console.log('Disconnected from the server');};</script>
</body>
</html>
客户端代码创建了一个新的 WebSocket 连接，并定义了打开连接、接收消息和关闭连接时的处理器。
使用 Socket.IO
Socket.IO 是一个流行的库，提供了一个简单的 API 来实现 WebSocket 和其他回退机制的实时双向通信。它比纯 WebSocket 提供了更多的功能和更好的兼容性。
安装 Socket.IO
首先需要安装 socket.io 模块：
npm install socket.io
设置 Socket.IO 服务器
与 WebSocket 类似，创建一个基本的 Express 应用，然后在其基础上添加 Socket.IO 支持。
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');const app = express();
const server = http.createServer(app);
const io = socketIo(server);io.on('connection', (socket) => {console.log('New client connected');socket.on('message', (message) => {console.log(`Received message => ${message}`);// Broadcast the message to all clientsio.emit('message', `Server: ${message}`);});socket.on('disconnect', () => {console.log('Client disconnected');});
});server.listen(3000, () => {console.log('Server is listening on port 3000');
});
在这个示例中，Socket.IO 服务器与 HTTP 服务器共享同一个端口（3000）。当有新的客户端连接时，服务器将记录连接信息并设置消息处理器和断开连接处理器。
客户端实现
在客户端，通过 JavaScript 使用 Socket.IO 进行连接和通信。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Socket.IO Example</title><script src="/socket.io/socket.io.js"></script>
</head>
<body><script>const socket = io('http://localhost:3000');socket.on('connect', () => {console.log('Connected to the server');socket.send('Hello Server!');});socket.on('message', (message) => {console.log(`Message from server: ${message}`);});socket.on('disconnect', () => {console.log('Disconnected from the server');});</script>
</body>
</html>
客户端代码通过 io 函数创建了一个新的 Socket.IO 连接，并定义了连接、接收消息和断开连接时的处理器。
在本章中，我们详细介绍了如何在 Express 中使用 WebSocket 和 Socket.IO 实现实时通信。WebSocket 提供了一种标准化的方式进行双向通信，而 Socket.IO 则提供了更丰富的功能和更好的兼容性。通过这些工具，开发者可以轻松实现各种实时通信功能，满足现代 Web 应用的需求。
![[OJ]水位线问题，1.采用回溯法（深度优先遍历求解）2.采用广度优先遍历求解](http://pic.xiahunao.cn/[OJ]水位线问题，1.采用回溯法（深度优先遍历求解）2.采用广度优先遍历求解)
