在现代 Web 开发中，实时通讯已成为一个不可或缺的功能。而 Socket.io 则是一款非常流行的实现方式。多房间聊天室是一个常见的应用场景，本文将介绍如何使用 Socket.io 实现多房间聊天室。
Socket.io 简介
Socket.io 是基于 WebSocket 的实时通讯库，可以实现双向通讯。Socket.io 兼容所有支持 WebSocket 的浏览器（包括 IE5.5+）。它不仅可以处理 WebSocket 的连接，还支持轮询和长轮询等实现方式，以便与旧版浏览器兼容。
Socket.io 由服务端和客户端两部分组成。服务端部分是一个 Node.js 模块，客户端部分则是一个 JavaScript 文件，可以在浏览器中直接引用。
多房间聊天室实现步骤
以下是实现多房间聊天室的基本步骤：
1. 服务端代码
在服务端使用 Socket.io，需要通过 io 对象创建一个 WebSocket 服务器，代码如下：
const io = require('socket.io')(server);其中 server 是一个 HTTP 或 HTTPS 服务器实例。
接下来，需要监听客户端连接事件，并在客户端连接时设置房间信息：
io.on('connection', (socket) => {
// Set default room
socket.join('default-room');
});这里使用了 socket.join 方法将客户端加入了名为 default-room 的默认房间。
为了支持多房间，还需要添加一个切换房间的功能：
socket.on('switch-room', (roomName) => {
socket.leaveAll(); // leave all rooms
socket.join(roomName);
});这里使用了 socket.leaveAll 将客户端从所有房间中移除，然后再使用 socket.join 加入指定的房间。
最后，需要处理客户端发送的消息，并将消息转发给同一房间的所有客户端：
socket.on('message', (msg) => {
io.to(socket.rooms.values().next().value).emit('message', msg);
});这里使用了 socket.rooms.values().next().value 获取当前客户端所在的房间，然后使用 io.to 方法将消息发送给该房间中的所有客户端。
2. 客户端代码
在客户端中，需要使用 Socket.io 连接到服务器：
const socket = io();
这里使用了默认的连接地址 /。
接下来，需要设置客户端的昵称和房间信息，并向服务器发送加入房间的请求：
const nickname = prompt('What is your nickname?');
const roomName = prompt('Which room do you want to join?');
socket.emit('set-nickname', nickname);
socket.emit('switch-room', roomName);这里使用了 prompt 函数获取用户输入的昵称和房间名称，并使用 socket.emit 方法向服务器发送设置昵称和加入房间的请求。
最后，需要处理客户端接收到的消息，并将消息渲染到页面中：
socket.on('message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
document.querySelector('ul').appendChild(li);
});这里使用了 document.createElement 创建一个列表项元素，并使用 li.textContent 设置文本内容，最后使用 document.querySelector 将元素添加到页面中。
3. 示例代码
以下是完整的示例代码：
服务器端（使用 Express）：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ------ - ----------------------------------
----- -- - -----------------------------
-------------------------------- - ------------
------------------- -------- -- -
-- --- ------- ----
----------------------------
------------------------- ---------- -- -
--------------- - ---------
---
------------------------ ---------- -- -
------------------
----------------------
---
-------------------- ----- -- -
-----------------------------------------------
----------
-------------------- -------
--
---
---
------------------- -- -- -
------------------- --------- -- ---- -------
---客户端：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ----------------
-------
------
-----------------
---------
------
------ ----------- ----------------- - ------------
------- ---------------------------
-------
------- ---------------------------------------
--------
----- ------ - -----
----- -------- - ------------ -- ---- ------------
----- -------- - ------------- ---- -- --- ---- -- --------
--------------------------- ----------
-------------------------- ----------
--------------------------------------------------------- ------- -- -
-----------------------
----- ----- - --------------------------------
----- --- - -------------------
-- ----- -
---------------------- -----
----------- - ---
-
---
-------------------- ----- -- -
----- -- - -----------------------------
-------------- - ----
---------------------------------------------
---
---------
-------
-------总结
本文介绍了如何使用 Socket.io 实现多房间聊天室。实现多房间聊天室的关键在于切换房间和消息转发。Socket.io 可以方便地处理这些问题，使得实现多房间聊天室变得简单易懂。希望本文能对读者理解 Socket.io 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461e1ec968c7c53b0337ae2