Socket.IO 是一个实现了 WebSocket 协议的 JavaScript 库，可以在客户端和服务器之间建立实时的双向通信。在本文中，我们将使用 Socket.IO 来实现一个多房间聊天系统，用户可以加入不同的房间进行聊天。
准备工作
在开始本教程之前，请确保您已经安装了 Node.js 和 npm。然后，您可以使用以下命令安装 Socket.IO：
--- ------- ---------
服务器端代码
首先，我们需要创建一个 Node.js 服务器，并使用 Socket.IO 模块来处理 WebSocket 连接。下面是服务器端代码的示例：
----- ---- - ----------------
----- -------- - ---------------------
----- ------ - --------------------
----- -- - -----------------
------------------- -------- -- -
-------------- ---- ------------
----------------- ------ -- -
------------------
----------------- ------ ---- ----------
---
------------------ ------ -- -
-------------------
----------------- ---- ---- ----------
---
--------------- --------- ----- ----- -- -
---------------------- --------- -----
--------------------- ------- ----- ----------
---
----------------------- -- -- -
----------------- ---------------
---
---
------------------- -- -- -
---------------------- -- ---------
---上面的代码创建了一个 HTTP 服务器，并使用 Socket.IO 创建了一个 WebSocket 服务器。当有用户连接到服务器时，会触发 connection 事件。在 connection 事件的回调函数中，我们可以处理用户的加入、离开和发送消息等操作。
join 事件表示用户加入房间，leave 事件表示用户离开房间。这两个事件都接收一个房间名作为参数，我们可以使用 socket.join(room) 和 socket.leave(room) 方法来让用户加入或离开房间。
chat message 事件表示用户发送消息，同时也需要指定消息所属的房间。我们可以使用 io.to(room).emit('chat message', msg) 方法来向指定房间的所有用户发送消息。
最后，在 disconnect 事件中处理用户断开连接的操作。
客户端代码
接下来，我们需要编写客户端代码来连接到服务器，并进行聊天。下面是客户端代码的示例：
--------- -----
------
------
----- ----------------
---------------- ------------
------- ---------------------------------------
--------
----- ------ - -----
-------- -------------- -
------------------- ------
-
-------- --------------- -
-------------------- ------
-
-------- ------------- -
----- ----- - -----------------------------------
----- ---- - --------------------------------------
----- ------- - ------------
----------- - ---
----------------- --------- -------- ------
-
--------------- --------- ----- -- -
----- -------- - ------------------------------------
----- -- - -----------------------------
-------------- - ----
-------------------------
---
---------
-------
------
-----
------ ------------------------
------ ----------- ----------
------- -----------------------------------------------------------------------
------- -------------------------------------------------------------------------
------
--- -------------------
-----
------ ----------- -------------
------- -------------------------------------
------
-------
-------上面的代码使用 Socket.IO 客户端库连接到服务器，并定义了加入、离开和发送消息等操作的函数。在 sendMessage 函数中，我们获取了消息输入框中的内容和房间名，然后使用 socket.emit('chat message', message, room) 方法向服务器发送消息。
当收到服务器发送的消息时，我们可以使用 socket.on('chat message', (msg) => { ... }) 方法来处理消息。在这个例子中，我们将消息添加到一个 <ul> 元素中显示。
运行多房间聊天系统
现在，我们已经完成了多房间聊天系统的服务器端和客户端代码。您可以使用以下命令来启动服务器：
---- ---------
然后在浏览器中打开客户端页面，输入房间名并点击“加入”按钮，就可以开始聊天了。您可以在不同的浏览器窗口或标签页中打开客户端页面，并加入不同的房间进行聊天。
总结
本文介绍了如何使用 Socket.IO 实现一个多房间聊天系统。通过这个例子，您可以了解到 Socket.IO 的基本使用方法，以及如何处理 WebSocket 连接、加入房间、离开房间和发送消息等操作。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650ba58495b1f8cacd5b6952