在前端领域，常常需要实现多人聊天室这样的实时通讯功能。为了方便实现这一类功能，可以使用 Socket.io 这个广泛使用且易于上手的库。
本文将从零开始详细介绍如何使用 Socket.io 实现多人聊天室，同时提供示例代码供读者参考。
什么是 Socket.io
Socket.io 是一个为实时应用提供跨平台、事件驱动的 JavaScript 库。它可以让开发人员实现客户端和服务器之间的双向通信，通过 WebSocket 协议进行通信，并根据运行环境自动降级至轮询。
使用 Socket.io 将大大简化通讯协议，使通讯更加稳定并提高效率。
如何使用 Socket.io
要使用 Socket.io，需要在服务端和客户端分别安装和加载它。下面将详细介绍如何安装 Socket.io。
安装和加载 Socket.io
服务端
可以使用 npm 进行安装：
npm install socket.io
在应用程序中使用以下代码加载 Socket.io：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - -------------------- ----- -- - ----------------------------- ------------------- ---------------- - -------------- ---- ------------ --- ------------------- ---------- - ---------------------- -- --------- ---
在上述代码中，我们首先创建了一个 HTTP 服务器，并使用 socket.io 函数将我们的服务器与 Socket.io 进行绑定。然后使用 on 函数监听连接事件，并在有用户连接的时候输出一条日志消息。
客户端
可以使用 npm 或 script 引入 Socket.io：
<!-- 通过 CDN 引入 Socket.io --> <script src="https://cdn.socket.io/socket.io-3.1.2.min.js"></script> <!-- 通过 npm 安装和引入 Socket.io --> <script src="/socket.io/socket.io.js"></script>
在引入脚本之后，就可以在客户端代码中使用 Socket.io 了：
const socket = io();
socket.on('connect', function() {
console.log('connected!');
});在这段代码中，我们首先创建了一个 Socket.io 实例，并使用 on 函数监听连接事件，并在连接成功之后输出一条日志消息。
实现多人聊天室
现在我们已经成功安装和加载了 Socket.io，接下来就可以开始使用它实现一个多人聊天室了。
服务端实现
在服务端，我们首先需要监听连接事件，并在连接成功之后将这个连接保存下来：
-- -------------------- ---- -------
------------------- ---------------- -
-------------- ---- ------------
-- -------
--------------------- - -------
----------------------- ---------- -
----------------- ---------------
-- ----
------ ----------------------
---
---在上述代码中，我们使用 socketList 对象保存连接，并在连接断开之后将其从 socketList 中删除。
接下来，我们需要监听 message 事件，将客户端发来的消息转发给其他所有连接：
-- -------------------- ---- -------
-------------------- ------------- -
--------------------- - - -----
-- -------
-------------------------------------------------- -
-- --------- --- ---------- -
------------------------------------ -----
-
---
---在上述代码中，我们使用 Object.keys 遍历所有的连接对象，并将消息转发给除了发送者之外的所有连接。
客户端实现
在客户端，我们需要监听连接事件，当连接成功之后，向服务器发送消息：
const socket = io();
socket.on('connect', function() {
console.log('connected!');
socket.send('hello');
});在上述代码中，我们向服务器发送了一个 hello 消息。
同时，我们还需要监听 message 事件，将从服务器转发过来的消息显示在页面上：
-- -------------------- ---- ------- ----- ------ - ----- -------------------- ---------- - -------------------------- --------------------- --- -------------------- ------------- - --------------------- - - ----- ----- -- - ----------------------------- -------------- - ---- ---------------------------------------------------- ---
在上述代码中，我们使用 document.createElement 创建了一个新的列表项，并使用 document.querySelector 选择器将其添加到 DOM 中。
示例代码
下面是完整的示例代码：
服务端
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - --------------------
----- -- - -----------------------------
----- ---------- - ---
------------------- ---------------- -
-------------- ---- ------------
-- -------
--------------------- - -------
----------------------- ---------- -
----------------- ---------------
-- ----
------ ----------------------
---
-------------------- ------------- -
--------------------- - - -----
-- -------
-------------------------------------------------- -
-- --------- --- ---------- -
------------------------------------ -----
-
---
---
---
------------------- ---------- -
---------------------- -- ---------
---客户端
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---- ------------
-------
------
--- -------------------
------
------ ---------------- ------------------ -----------------------
-------
---- -- --- -- --------- ---
------- ------------------------------------------------------------
--------
----- ------ - -----
-------------------- ---------- -
--------------------------
---------------------
---
-------------------- ------------- -
--------------------- - - -----
----- -- - -----------------------------
-------------- - ----
----------------------------------------------------
---
--------------------------------------------------------- ----------- -
-------------------
----- ----- - ---------------------------------------
----- --- - ------------
----------- - ---
-----------------
---
---------
-------
-------结论
本文介绍了 Socket.io 的基本概念和使用方法，同时提供了一个多人聊天室的示例。读者可以根据这些代码实现自己的实时通讯功能，也可以通过本文了解更多使用方法。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f2178ddbabfafba6bca917