随着互联网的发展，即时通讯已经成为了生活中不可缺少的一部分。而多房间聊天系统则是一种常见的即时通讯方式。本文将介绍如何使用 Socket.io 实现一个多房间聊天系统，并提供完整的示例代码和学习指导。
Socket.io 简介
Socket.io 是一个基于事件驱动的实时双向通信库。它可以实现客户端和服务器之间的实时通信，并且可以支持多种协议，如 WebSocket、HTTP 长轮询等。
使用 Socket.io 可以方便地实现多人聊天、实时游戏、在线编辑等功能，而且使用也非常方便，只需要在客户端和服务器端分别引入相应的库即可。
多房间聊天系统实现
接下来就让我们使用 Socket.io 来实现一个简单的多房间聊天系统。这个聊天系统有以下功能：
- 支持多房间，用户可以在不同的房间发送消息
- 实时更新在线用户列表
- 支持发送图片和表情
- 超过一定长度的聊天记录自动清除
服务器端实现
首先我们需要启动一个 Node.js 服务器，并安装 socket.io 库。
npm install socket.io
然后我们创建一个名为 app.js 的文件，并在其中编写以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ------ - ----------------------------
----- -- - -----------------------------
-- ------
--- ----------- - ---
-- ------
--- ----------- - --
-- -------
------------------- ---------------- -
-------------- ---- ------------
-- ----------
----------------- -------------- -
------------------
-- ----
-------------------------
-- ----
-- ----------------------------- -
-------------------------- - -
--------- --------------
------- ------------
------- -----------
--
--------------
-
-- ---------
--------------------------------- -
------------ ------------
------------ ------------
----- ---------------------------
----- ------
---
-------------------------
---
-- ----------
------------------ -------------- -
------------------
-- ----
--------------------------
-- ----------
-- --------------------------- -- --------------------------------- --- ------------ -
------ ---------------------------
--------------
-
-- ---------
--------------------------------- -
------------ ------------
------------ ------------
----- ---------------------------
----- -------
---
-------------------------
---
-- ----------
-------------------- -------------- -
------------------
-- ------------
---------------------------------- -
--------- --------------
------- ------------
-------- -------------
----- --- ----------------
---
---
-- ----------
------------------ -------------- -
------------------
-- ------------
-------------------------------- -
--------- --------------
------- ------------
---- ---------
----- --- ----------------
---
---
---
------------------- ---------- -
---------------------- -- ---------
---在上面的代码中，我们先初始化了一个 express 应用，并创建了一个 http 服务器。然后我们使用 socket.io 库创建了一个 socket 实例，并监听 connection 事件，这个事件会在客户端连接成功后触发。
接下来我们使用 socket 的 join 方法将客户端加入相应的房间，并且记录在线用户。然后我们向房间内所有用户发送了一个 update 事件，这个事件用于实时更新在线用户列表。
当用户离开房间时，我们使用 leave 方法将客户端从房间中移除，并且从在线用户列表中删除该用户。同样要向房间内所有用户发送一个 update 事件。
当用户发送消息或图片时，我们也会向房间内所有用户发送一个 message 或 image 事件。
客户端实现
接下来让我们编写客户端代码，先创建一个 index.html 文件，并引入 socket.io 库。
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---------------
------- --------------------------------------------------------
-------
------
---- ------ ---
-----
------ ----------- ---------------- --------------
------ ----------- ----------------- ------------
------- -----------------------------
------
---- ----- ---
---- ----------------------
---- -------------
--------------- ------------------------------
--- ----------------------
------- ------------------------------
------
---- ----------
--- -------------------
----- ------------------
------ ----------- -------------------
------- -------------------------
-------
----- ----------------
------ ----------- -----------------
------- ---------------------------
-------
------
--------
-- --------
--- ------ - ------------------------------------
--- --------- ------- -------
-- --
-------- ------- -
-------- - ------------------------------------------
-- ----------- -
----------------
-------
-
------ - ----------------------------------------
-- --------- -
-----------------
-------
-
-- ------
------ - --------------------------- - ------------------------ - ----- - ------
-- --------
------------------- -
--------- ---------
------- -------
------- ------
---
-- -----
-------------------------------------------------------- - -------
-------------------------------------------------------- - -------
-
-- --
-------- -------- -
-- --------
-------------------- -
--------- ---------
------- -------
------- ------
---
-- ------
-------------------------------------------------------- - -------
-------------------------------------------------------- - -------
-
-- --------
-------- ------------------------------ -
--- --------------- - ---------------------------------------
------------------------- - ---
--- ---- --- -- ------------ -
--- ---- - -----------------
--- -- - -----------------------------
------------ - ----- ------ - ----------- - ---- - --------------
--------------------------------
-
--- --------------- - ---------------------------------------
------------------------- - --------------------------------
-
-- ----
-------- ----------------- -
--- ------------ - ------------------------------------
--- -- - -----------------------------
------------ - ----- ------ - ----------- - ---- - ------------- - -- - - -------------
-----------------------------
-- ------------
-- ----------------------------- - --- -
---------------------------------------------------
-
-- -----
---------------------- - --------------------------
-
-- ----
-------- --------------- -
--- ------------ - ------------------------------------
--- -- - -----------------------------
------------ - ----- ------ - ----------- - ---- - ------------- - -- ---- ------ - -------- - -----
-----------------------------
-- ------------
-- ----------------------------- - --- -
---------------------------------------------------
-
-- -----
---------------------- - --------------------------
-
-- ------
------------------- -------------- -
------------------
-- --------
------------------------------------
-- ---------
--- ------------ - ------------------------------------
--- -- - -----------------------------
------------ - ------------------ - ---------- --- ------ - - -------- - - ----------
-----------------------------
-- ------------
-- ----------------------------- - --- -
---------------------------------------------------
-
-- -----
---------------------- - --------------------------
---
-- ------
-------------------- -------------- -
------------------
------------------
---
-- ------
------------------ -------------- -
------------------
----------------
---
-- ----
--- ----------- - ----------------------------------------
-------------------------------------- ----------- -
-------------------
--- ------- - ------------------------------------------------------
-- ---------- -
-------
-
---------------------- -
--------- ---------
------- -------
------- -------
-------- -------
---
---------------------------------------------- - ---
---
-- ----
--- --------- - --------------------------------------
------------------------------------ ----------- -
-------------------
--- ---- - ------------------------------------------------
-- ------- -
-------
-
--- ------ - --- -------------
------------- - ------------- -
-------------------- -
--------- ---------
------- -------
------- -------
---- -----------------
---
-------------------------------------------- - ---
-
---------------------------
---
---------
------
-------
-------在上面的代码中，我们先创建了一个用户登录界面和一个聊天室界面。在登录时需要填写昵称和房间号，并发送 join 事件。当登录成功后，会隐藏登录界面，显示聊天室界面，并实时更新在线用户列表。
在聊天室界面中，我们使用了两个表单来发送消息和图片，并监听了这两个表单的 submit 事件，一旦用户提交了消息或图片，就会发送相应的 message 或 image 事件到服务器。
同时还监听了 server 发送的三种事件：更新事件、消息事件和图片事件，并在接收到这些事件后进行相应的操作。
总结
本文详细介绍了如何使用 Socket.io 实现一个多房间聊天系统，并提供了完整的示例代码和学习指导。Socket.io 是一个很好的实时通讯库，可以在多人聊天、实时游戏、在线编辑等场景中使用。但需要注意的是，Socket.io 并不能解决所有的实时通讯问题，在使用时需要根据实际场景选择合适的通讯库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df1d83f6b2d6eab3a47562