Socket.io 是一个实时通信的库，提供了 WebSocket 协议的兼容性，可以用于在客户端和服务器之间建立实时双向连接。在前端开发中，Socket.io 是一个非常常见的工具，可以用于实现类似聊天室、直播间等实时交互的功能。
一个常见的场景是，需要向所有连接上服务器的客户端实时发送消息，这被称为广播（Broadcast）。如何使用 Socket.io 实现广播，下面将详细介绍。
Socket.io 基础
首先，需要了解 Socket.io 的一些基本概念和 API。
调用方式
Socket.io 有两种调用方式：
- 服务器端（Node.js）：通过引入
socket.io模块，创建一个io对象即可。例如：
const io = require('socket.io')(server);其中 server 是一个 Node.js 的 HTTP 服务器实例。
- 客户端（浏览器）：通过引入
socket.io.js文件，创建一个 Socket.io 客户端对象。例如：
<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); </script>
注意：客户端需传入服务器地址，例如 http://localhost:3000。
事件监听与触发
Socket.io 基于事件模型，可以通过监听和触发事件来实现实时交互。事件监听分为以下两种：
- 服务器端（Node.js）：通过
io.on()方法监听事件。例如：
io.on('connection', (socket) => {
console.log('a user connected');
});其中，connection 事件会在客户端连接上服务器时触发。
- 客户端（浏览器）：通过
socket.on()方法监听事件。例如：
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
});其中，chat message 事件是自定义的事件名称，在服务器端需要触发该事件才能被客户端监听到。
事件触发分为以下两种：
- 服务器端（Node.js）：通过
socket.emit()方法触发事件。例如：
socket.emit('chat message', 'Hello world!');其中，chat message 为事件名称，Hello world! 为传输的数据。
- 客户端（浏览器）：通过
socket.emit()方法触发事件。例如：
$('form').submit(() => {
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});其中，$('form') 包含表单的 jQuery 选择器，submit() 为表单提交的事件名称。
Socket.io 广播消息的实现
有了 Socket.io 的基础知识，就可以实现 Socket.io 广播消息了。广播消息的实现思路是：
- 服务器端监听事件，当有客户端连接上服务器后，保存其
socket.id。 - 服务器端监听广播事件，当有客户端触发广播事件时，向保存的所有
socket.id发送消息。 - 客户端监听消息事件，当有消息到达时，将消息显示在页面上。
以下是具体的实现细节：
服务器端
-- -------------------- ---- -------
-- -- ---------
--- ------- - ---
------------------- -------- -- -
-------------- ---- ------------
-- -- ---------
------------------ - -------
-- -------------- ---------
----------------------- -- -- -
----------------- ---------------
------ -------------------
---
-- ------------- --------- ----
---------------------- --------- -- -
--- ---- -- -- -------- -
--------------------------- ---------
-
---
---在服务器端，首先定义了一个 clients 对象，用于保存所有连接上服务器的客户端的 socket.id。在客户端连接上服务器时，保存其 socket.id。在客户端断开连接时，删除保存的 socket.id。
在服务器端，还监听了一个自定义事件 broadcast，当有客户端触发该事件时，向保存的所有 socket.id 发送消息，消息使用自定义事件 message 传递。
客户端
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------
-------
------
------ ---------- ----------- --
------- -----------------------
--- -------------------
------- ---------------------------------------
--------
----- ------ - -----
-- ------
--------------------------------------------------------- -- -- -
----- ----- - ---------------------------------
------------------------ -------------
----------- - ---
---
-- ----
-------------------- --------- -- -
----- -- - -----------------------------
-------------- - --------
----------------------------------------------------
---
---------
-------
-------在客户端，定义了一个包含输入框、按钮、消息列表的 HTML 页面，并引入了 Socket.io 客户端库。当用户点击按钮时，客户端触发广播事件 broadcast，将输入框中的内容发送到服务器。
客户端使用 socket.on() 监听自定义事件 message，当服务器端广播消息时，客户端将消息添加到消息列表中。
总结
通过以上实现，可以看到 Socket.io 广播消息的整个过程，从服务器端保存到维护客户端的 socket.id，到响应客户端触发的广播事件，并将消息通过 socket.emit() 方法发送给所有客户端；再到客户端通过 socket.on() 监听服务器端的自定义事件 message，将消息添加到消息列表中。
Socket.io 广播消息的实现，让我们深刻理解了 Socket.io 的基础知识及其事件模型，掌握了实时交互的原理及实现方法，有着重要的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb65cd5ad90b6d04205b3f