无论是实时聊天、多人协作编辑还是在线游戏，都需要实现实时双向通信。而基于 WebSocket 的一系列技术，尤其是 Socket.io，已成为实现这种需求的首选技术。
本文将详细介绍如何使用 Socket.io 实现实时双向通信，并提供示例代码供读者参考。同时，本文还将对 Socket.io 的部分工作原理进行探讨，以及一些实践中的经验和技巧。
Socket.io 的基础使用
Socket.io 是基于 WebSocket 实现的一套实时通信框架。相比于 WebSocket，Socket.io 具有兼容性更好、实现更简单、支持的功能更丰富等优点。它支持实时双向通信、断线重连、多房间、多协议等特性，使用也非常简单。
下面是基于 Socket.io 实现的一个简单聊天室示例：
服务端
-- -------------------- ---- -------
----- -- - -----------------------------
------------------- -------- -- -
------------------- ------------ ------------
----------------- ------ -- -
------------------
------------------- ------------ ------ ---- ----------
----------------------------------------- -
----- ---------
-------- ------- ------------ ------ --- -----
---
---
------------------ ------ -- -
-------------------
------------------- ------------ ---- ---- ----------
----------------------------------------- -
----- ---------
-------- ------- ------------ ---- --- -----
---
---
-------------------- --------- -- -
------------------- ------------ ---- ------- -------------
------------------------------------------------- -
----- -------
-------- ----------------
------- ---------
---
---
---以上代码创建了一个 Socket.io 服务器，并处理了几个简单的事件：
connection：当客户端连接时触发此事件，返回一个 Socket 对象，可以获得该客户端的 ID 等信息。join：当客户端发送加入房间请求时触发此事件，服务器调用join方法将客户端加入房间。同时发送系统消息通知其他客户端。leave：当客户端发送离开房间请求时触发此事件，服务器调用leave方法将客户端从房间中移除。同时发送系统消息通知其他客户端。message：当客户端发送消息时触发此事件，服务器将消息广播到目标房间中的其他客户端。
客户端
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ---- ---- ---------------
-------
------
------ ----------- ------------
------- ------------------------- -------------
------- --------------------------- -------------
----
--- -------------------
------ ----------- -------------
------- -------------------------------------
-------
------- ---------------------------------------
--------
----- ------ - -----
-------- ---------- -
----- ------ - ----------------------------------------
------------------- --------
-
-------- ----------- -
----- ------ - ----------------------------------------
-------------------- --------
-
-------- ------------- -
----- ------ - ----------------------------------------
----- ------- - -----------------------------------------
---------------------- - ----- ------- -------- ------- ---
-
-------------------- --------- -- -
----- ---- - ------------------------------------
----- ---- - -----------------------------
-- ------------- --- --------- -
-------------- - --------------------------------------
- ---- -
-------------- - ------------------- --------------------
-
-----------------------
---
---------
-------以上代码创建了一个简单的聊天室页面，支持加入、离开房间和发送消息等操作。它通过 Socket.io 的 emit 方法向服务器发送请求或者接收从服务器推送的事件，在事件回调中更新页面。
Socket.io 的进阶使用
虽然 Socket.io 非常易于使用，但它的实现原理却相当复杂。如果您要深入使用 Socket.io 或者出现异常情况需要排查故障时，了解 Socket.io 的工作原理就非常有必要了。
协议栈
Socket.io 相关的协议主要由四部分组成：
- Engine.IO：Socket.io 的实现基础。它支持双向传输、多协议和心跳等特性，可以自动适配浏览器和服务器（比如使用 WebSocket、XHR、JSONP、IFrame 等技术），并负责将数据包封装以及管理心跳等底层细节。
- WebSocket：浏览器和服务器之间的实时通信技术。
- Socket.IO：针对具体的应用场景，定义了一组基于 Engine.IO 和 WebSocket 的高级 API，包括连接管理、事件机制、房间管理、协议解析、参数校验等功能。
- 应用层：根据具体的业务场景，构建业务协议。
这些协议构成了 Socket.io 的协议栈，让 Socket.io 能够在多种环境下运行，并能够提供高效和安全的通信。
断线重连
在实际使用中，客户端和服务器之间的连接会存在很多异常情况，比如网络波动、服务器崩溃、客户端异常退出等。针对这些情况，Socket.io 内置了断线重连的特性，让客户端能够在连接异常时自动重连。
在默认情况下，Socket.io 会尝试在断开连接后的 20 秒内进行 5 次重连。如果 5 次重连都失败了，客户端会触发 disconnect 事件并关闭连接。
您也可以通过以下参数自定义重连策略：
const options = {
reconnection: true, // 是否开启重连，默认为 true
reconnectionAttempts: 10, // 最大重连次数，默认为 Infinity
reconnectionDelay: 1000, // 重连延迟（毫秒），默认为 1000
reconnectionDelayMax: 5000 // 最大重连延迟（毫秒），默认为 5000
}
const socket = io('http://localhost:3000', options);在重连过程中，Socket.io 会触发以下事件：
reconnect：每次重连成功后触发。事件回调函数接收一个表示已经重连次数的参数。reconnect_attempt：在每次重连尝试之前触发。reconnecting：正在进行重连时触发。事件回调函数接收一个表示目前已经重连次数的参数。reconnect_error：每次重连失败后触发。事件回调函数接收一个表示错误信息的参数。reconnect_failed：尝试了所有重连次数后失败后触发。
命名空间和房间
在实际开发中，单个 Socket.io 服务器可能需要同时支持多个业务场景或多种类型的实时通信。为了满足这种需求，Socket.io 引入了命名空间和房间的概念。
命名空间和房间虽然从本质上讲都是基于事件机制的分组概念，但它们的适用场景有所不同：
命名空间：当多个 Socket.io 客户端需要连接同一个服务器，但需要使用不同的事件命名空间，或者只监听某些事件时，就需要使用命名空间来区分这些客户端。命名空间在服务器中以字符串的形式命名，并通过
of方法绑定到一个 Socket 对象上（默认是全局的不带命名空间的 Socket 对象）。客户端可以通过socket.of('/namespace').emit(event, data)的方式发送事件，而服务器也通过io.of('/namespace').on(event, (socket) => {})的方式监听事件。默认情况下，一个 Socket 连接只能在一个命名空间中监听事件。房间：Socket.io 的房间可以用来管理连接到服务器的客户端，让客户端能够以组织的方式发送和接收事件。与命名空间不同，房间是在客户端和服务器之间生效的，且不同 Socket 连接可以同时加入或离开多个房间。一般来说，房间的枚举和管理都是在服务器端完成的，可以通过
socket.join(room)和socket.leave(room)分别加入或离开房间，在事件回调中使用io.to(room).emit(event, data)广播事件到指定房间中的其他客户端。
结尾
总之，Socket.io 可能是当前最强大的实时通信技术之一。然而，Socket.io 往往只能构成实时通信的“结构”或“框架”，实际上，底层技术还需要处理各种复杂的细节，比如协议栈、断线重连、多房间切换等问题。而大部分开发者，往往只能获得原生的呈现。
希望本文可以对您理解 Socket.io 的一些工作原理、掌握 Socket.io 应用的一些技巧和经验有所帮助。如果您想深入学习 Socket.io 的源码实现，可以阅读其开源项目并持续关注其更新。
本篇文章的示例代码已经开源，您可以在我的 GitHub 中找到它：https://github.com/mannyhung/socket.io-chat-room-example。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678257f5935627c90003033b
