在 Web 开发中，实时通信是一个非常重要的功能，而 WebSocket 是实现实时通信的一种技术。而 Socket.io 是一个基于 WebSocket 的库，它提供了更加灵活、可靠的实时通信方案，并且支持多房间的在线聊天室。
什么是 WebSocket
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许服务器端和客户端进行实时通信，而无需进行轮询或长轮询等技术。WebSocket 协议由 RFC6455 定义，目前已被所有现代浏览器支持。
WebSocket 的优点有：
- 实时性好
- 支持双向通信
- 基于 TCP 协议，比 HTTP 更加高效
什么是 Socket.io
Socket.io 是一个基于 WebSocket 的库，它提供了更加灵活、可靠的实时通信方案，并且支持多房间的在线聊天室。Socket.io 可以运行在 Node.js 和浏览器中，它提供了一致的 API，可以在不同的环境中进行实时通信。
Socket.io 的优点有：
- 兼容所有浏览器
- 支持多种实时通信方式
- 支持多房间的在线聊天室
Socket.io 的基本使用
使用 Socket.io 首先需要在服务器端和客户端都引入 Socket.io 库。在 Node.js 中，可以使用 npm 进行安装：
npm install socket.io
在服务器端使用 Socket.io：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -------- - --------------------- ----- ------ - ----------------------- ---- -- - ------------------ ---------------- --------------- -------------- ---------- --- ----- -- - ----------------- ------------------- -------- -- - -------------- ---- ------------ --- ------------------- -- -- - ---------------------- -- --------- ---
在客户端使用 Socket.io：
<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); </script>
以上代码实现了一个最简单的 Socket.io 应用，当客户端连接到服务器端时，服务器端会输出 a user connected。
Socket.io 实现多房间在线聊天室
下面我们将使用 Socket.io 实现一个多房间在线聊天室。首先，我们需要在服务器端维护一个房间列表以及房间内的用户列表：
-- -------------------- ---- -------
----- ----- - ---
------------------- -------- -- -
----------------- ------ -- -
------------------
-- -------------- -
----------- - ---
-
----------------------------
------------------------ -----------
------------------------- -------------
---
-------------------- ------ -------- -- -
--------------------------- ---------- ---------
---
------------------ ------ -- -
-------------------
-- ------------- -
----- ----- - -------------------------------
-- ------ --- --- -
------------------------- ---
------------------------- -----------
------------------------- -------------
-- ------------------- --- -- -
------ ------------
-
-
-
---
---以上代码实现了用户加入房间、发送消息、离开房间的功能，并且在用户加入房间、离开房间时会向房间内的其他用户发送消息，通知他们有新用户加入或离开。
客户端需要实现以下功能：
- 加入房间：向服务器发送
join消息，并传递房间名。 - 发送消息：向服务器发送
message消息，并传递房间名和消息内容。 - 离开房间：向服务器发送
leave消息，并传递房间名。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ---- ------------
------- ---------------------------------------
--------
----- ------ - -----
-------- ---------- -
------------------- ------
-
-------- ----------------- -
----- ----- - -----------------------------------------
----- ------- - -------------------
-- --------- -
---------------------- ----- ---------
----------- - ---
-
-
-------- ----------- -
-------------------- ------
-
----------------- ---- -- -
----- -- - -------------------------------------
----- -- - -----------------------------
----- - ---
-------------- - ---
-------------------
---
------------------ ---- -- -
----- -- - ----------------------------
-- ---- -
------------------------------
-
---
------------------ ------- -- -
----- -- - -------------------------------------
----- --------------- -
------------------------------
-
------------------ -- -
----- -- - -----------------------------
----- - ---
-------------- - ---
-------------------
---
---
-------------------- ---- -------- -- -
----- -- - ----------------------------------------
----- -- - -----------------------------
-------------- - ------- ------------
-------------------
---
---------
-------
------
------ ----------- --------------- ----------------- ------
------- -------------------------------------------------------------------------
------- ---------------------------------------------------------------------------
----
--- --------------------
----
--- -----------------------
------ ----------- ------------------ ----------------------
------- --------------------------------------------------------------------------------
-------
-------以上代码实现了一个基本的多房间在线聊天室，用户可以加入、离开房间，并且可以在房间内发送消息。
总结
Socket.io 是一个非常强大的实时通信库，它提供了更加灵活、可靠的实时通信方案，并且支持多房间的在线聊天室。使用 Socket.io 可以轻松地实现实时通信功能，为 Web 开发带来更多的可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6560aa1ed2f5e1655dadc72b