Websocket 是一种基于 TCP 协议的新型双向通信协议，它可以在客户端和服务器之间建立持久性的连接，实现实时通信效果。在前端领域，Websocket 可以用于实现在线聊天、实时消息推送、多人协同编辑等应用场景。
Express.js 是一款流行的 Node.js Web 应用框架，它提供了强大的路由、中间件和模板引擎等功能，可以帮助我们快速开发 Web 应用。本文将介绍如何在 Express.js 中集成 Websocket 通信，实现实时通信效果。
安装依赖
在 Express.js 中集成 Websocket，我们需要使用一个第三方库 socket.io。它是一个基于 Node.js 的双向通信库，可以实现实时通信的功能。我们可以通过 npm 安装它：
npm install socket.io
创建 Websocket 服务器
我们需要在 Express.js 中创建一个 Websocket 服务器，以便客户端和服务器之间建立连接。在 Express.js 中，我们可以通过以下代码来创建一个 Websocket 服务器：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- ----- -------- - --------------------- ----- --- - ---------- ----- ------ - ----------------------- ----- -- - --- ----------------- ------------------- -------- -- - -------------- ---- ------------ --- ------------------- -- -- - ---------------------- -- --------- ---展开代码
在上面的代码中，我们创建了一个 Express.js 应用，并创建了一个 HTTP 服务器。然后，我们使用 socket.io 创建了一个 Websocket 服务器，并监听 connection 事件。当有客户端连接时，会触发 connection 事件，并执行回调函数。在回调函数中，我们可以处理客户端和服务器之间的通信。
发送消息
当客户端连接到 Websocket 服务器时，我们可以向客户端发送消息。在 Express.js 中，我们可以使用 socket.emit() 方法向客户端发送消息。例如，我们可以在 connection 事件回调函数中添加以下代码：
io.on('connection', (socket) => { console.log('a user connected'); socket.emit('message', 'Hello, world!'); });
在上面的代码中，我们向客户端发送了一条消息 Hello, world!。客户端可以通过 socket.on() 方法监听 message 事件，接收到消息。例如，在客户端中可以添加以下代码：
const socket = io(); socket.on('message', (data) => { console.log(data); // 输出：Hello, world! });
接收消息
当客户端向 Websocket 服务器发送消息时，我们可以在服务器端接收到消息。在 Express.js 中，我们可以使用 socket.on() 方法监听客户端发送的消息。例如，我们可以在 connection 事件回调函数中添加以下代码：
io.on('connection', (socket) => { console.log('a user connected'); socket.on('message', (data) => { console.log(data); // 输出客户端发送的消息 }); });
在上面的代码中，我们监听了客户端发送的 message 事件，并在回调函数中输出了客户端发送的消息。
广播消息
在实际应用中，我们可能需要将消息广播给所有连接的客户端。在 Express.js 中，我们可以使用 io.emit() 方法将消息广播给所有连接的客户端。例如，我们可以在服务器端添加以下代码：
io.on('connection', (socket) => { console.log('a user connected'); socket.on('message', (data) => { console.log(data); io.emit('message', data); // 广播消息给所有客户端 }); });
在上面的代码中，当客户端发送消息时，我们将消息广播给所有连接的客户端。
示例代码
下面是一个完整的 Express.js 集成 Websocket 的示例代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- ----- -------- - --------------------- ----- --- - ---------- ----- ------ - ----------------------- ----- -- - --- ----------------- -------------------------------- - ------------ ------------------- -------- -- - -------------- ---- ------------ -------------------- ------ -- - ------------------ ------------------ ------ --- ----------------------- -- -- - ----------------- --------------- --- --- ------------------- -- -- - ---------------------- -- --------- ---展开代码
在上面的代码中，我们创建了一个 Express.js 应用，并使用 express.static() 中间件将 public 目录作为静态文件目录。然后，我们创建了一个 HTTP 服务器，并使用 socket.io 创建了一个 Websocket 服务器。在 connection 事件回调函数中，我们监听了客户端发送的 message 事件，并将消息广播给所有连接的客户端。当客户端断开连接时，我们输出了一条日志。
总结
本文介绍了如何在 Express.js 中集成 Websocket 通信，实现实时通信效果。我们学习了如何创建 Websocket 服务器、发送消息、接收消息和广播消息。希望本文能够帮助读者更好地了解 Websocket 技术，提升前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65100dc995b1f8cacd8b3108
