在 Web 开发中，Socket.io 是一种使用 WebSocket 实现实时双向通信的库，可以轻松地实现聊天室、实时消息推送等功能。而 Express 是一种基于 Node.js 的 Web 框架，可以快速地构建 Web 应用程序。在实际开发中，结合使用 Socket.io 和 Express，可以为 Web 应用程序增加实时通信功能。
下面将介绍如何在 Express 中使用 Socket.io 搭建一个简单的实时聊天室。
安装 Socket.io
首先，需要安装 Socket.io 库。使用以下命令：
npm install socket.io
创建 Express 应用程序
在项目中创建一个新的 Express 应用程序：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- -------- --- ----- ------ - ---------------- -- -- - ---------------------- -- --------- ---
添加 Socket.io 到 Express 应用程序
接下来，需要将 Socket.io 添加到 Express 应用程序中。为此，使用以下代码：
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
});以上代码会创建一个 Socket.io 实例，并将其附加到 Express 应用程序的 HTTP 服务器上。然后，当一个客户端连接到服务器时，io.on('connection') 回调函数就会被触发。
创建聊天室
现在已经连接到服务器，并且可以观察到连接事件。接下来，将创建一个聊天室，允许连接的客户端实时地发送和接收消息。
为了创建聊天室，需要几个简单的步骤：
向客户端发送消息
使用以下代码将消息从客户端发送到服务器：
socket.emit('message', 'Hello, World!');从服务器接收消息
使用以下代码从服务器接收消息：
socket.on('message', (msg) => {
console.log('message: ' + msg);
});向所有客户端广播消息
使用以下代码将消息从服务器发送到所有客户端：
io.emit('message', 'Hello, World!');接收所有客户端发送的消息
为了接收所有客户端的消息，需要将以下代码放在 io.on('connection') 回调函数内部：
socket.on('message', (msg) => {
io.emit('message', msg);
});完整示例代码
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------ ----- ---- -- -
---------------------- - ---------------
---
----- ------ - ---------------- -- -- -
---------------------- -- ---------
---
----- -- - -----------------------------
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
----------------- ---------------
---
-------------------- ----- -- -
------------------ -----
---
---在此示例中，使用了 Express 的 sendFile 方法来返回一个包含 Socket.io 客户端库的 HTML 文件。在客户端文件中，使用以下代码初始化 Socket.io：
-- -------------------- ---- -------
------- ---------------------------------------
--------
----- ------ - -----
-------------------- ----- -- -
----- -- - -----------------------------
-------------- - ----
----------------------------------------------------
---
-------------------------------------------------------------- --- -- -
-------------------
----- -------- - -------------------------------------
----------------------------
-------------- - ---
------ ------
---
---------在客户端文件中，使用 socket.on('message') 注册一个事件处理程序，以在收到消息时更新 UI。socket.send() 方法用于将消息发送到服务器。
总结
通过结合 Socket.io 和 Express，可以很容易地实现实时通信功能。使用 Socket.io 的优势在于它可以为不支持 WebSocket 的旧版浏览器提供兼容性，同时也支持多种实时通信协议。通过使用本文介绍的实践，可以为 Web 应用程序增加实时消息推送、聊天室等实时应用功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64950e4248841e9894256082