在现代的互联网应用中，聊天系统已经成为了必备的功能之一。为了满足大量用户的需求，多人聊天系统的实现已经成为了各种应用领域的必学技术。在本文中，我们将介绍如何使用 Socket.io 实现一个多人聊天系统。
前置知识
在学习 Socket.io 的多人聊天系统之前，你需要掌握以下基础知识：
- HTML、CSS 和 JavaScript
- Node.js 和 Express.js 的基础使用方法
Socket.io 简介
Socket.io 是一个面向实时多人聊天系统开发的 JavaScript 库，它能够让开发者轻松地实现双向通信，从而构建高效、实时的应用程序。Socket.io 通过 WebSocket 技术实现了客户端和服务器之间的通讯。
Socket.io 包含了客户端和服务器端两个部分。首先，使用 Node.js 和 Express.js 构建服务器；其次，在客户端使用 Socket.io API 连接服务器，在代码中监听和发送事件。
实现多人聊天系统
多人聊天系统需要实现以下功能：
- 用户能够进入聊天室。
- 用户能够发送消息到聊天室。
- 用户能够从聊天室中退出。
- 所有用户能够收到其他用户的消息。
- 在线人数随时变化。
下面，我们将逐一介绍如何实现这些功能：
服务器端代码
首先，我们需要创建一个 Node.js 服务器，并运用 Express.js 构建它。在服务器端，我们需要引入 Socket.io 库。如下所示：
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);接下来，我们需要监听客户端的连接请求，并在连接时执行相关逻辑。通过监听 connection 事件，我们可以获得一个 socket 对象，该对象包含了每个客户端的信息，如下所示：
io.on('connection', (socket) => {
console.log('A user connected');
});在连接成功后，我们需要做两件事情：一是广播新用户加入的信息给所有在线用户，二是监听用户发送的消息并广播给其他用户。实现如下：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
----------------- ---------- -- -
--------------- - ---------
------------------------------- ---------
--------------------------- -------- ----------
---
--------------- --------- ----- -- -
-------------------------------- ---------
--------------------------- --------- ---------- ---------------- -------- ------
---
---现在，我们需要在客户端代码中定义两个事件：join 和 send。在 join 事件中，我们将用户输入的用户名发送给服务器。在 send 事件中，我们将用户输入的消息发送给服务器。客户端代码如下：
-- -------------------- ---- -------
------
------ ------------- ------------------ ---- ----- -
------ ------------ ------------------ ---- ---------
------- ------------- ------------------------------
------- ------------- ------------------------------
-------
---- --------------------
------- ---------------------------------------
--------
----- ------ - -----
-------- ------ -
----- -------- - ------------------------------------------
------------------- ----------
-
-------- ------ -
----- ------- - -----------------------------------------
----------------- --------- ---------
-
--------------- -------- ---------- -- -
----- ------- - -----------------------------
------------------- - ------------ ------ --- ------
----------------------------------------------------
---
--------------- --------- ----------- --------- -- -
----- -- - -----------------------------
-------------- - ------------- ------------
-----------------------------------------------
---
---------最后一步是监听用户退出事件，并广播用户离开的消息给所有在线用户。服务器端代码如下所示：
socket.on('disconnect', () => {
console.log(`${socket.username} disconnected`);
socket.broadcast.emit('user left', socket.username);
});同时，我们还需要在客户端添加对应的事件监听，如下所示：
socket.on('user left', (username) => {
const message = document.createElement('li');
message.textContent = `${username} left the chat`;
document.getElementById('messages').append(message);
});至此，多人聊天系统的所有功能都已完成。
示例代码
完整的实现代码如下所示：
服务器端代码：
-- -------------------- ---- -------
----- --- - ---------------------
----- ---- - ----------------------------------
----- -- - ---------------------------
------------ ----- ---- -- -
---------------------- - ---------------
---
------------------- -------- -- -
-------------- ---- ------------
----------------- ---------- -- -
--------------- - ---------
------------------------------- ---------
--------------------------- -------- ----------
---
--------------- --------- ----- -- -
-------------------------------- ---------
--------------------------- --------- ---------- ---------------- -------- ------
---
----------------------- -- -- -
------------------------------- ---------------
--------------------------- ------ -----------------
---
---
----------------- -- -- -
---------------------- -- -------
---客户端代码：
-- -------------------- ---- -------
------
------ ------------- ------------------ ---- ----- -
------ ------------ ------------------ ---- ---------
------- ------------- ------------------------------
------- ------------- ------------------------------
-------
---- --------------------
------- ---------------------------------------
--------
----- ------ - -----
-------- ------ -
----- -------- - ------------------------------------------
------------------- ----------
-
-------- ------ -
----- ------- - -----------------------------------------
----------------- --------- ---------
-
--------------- -------- ---------- -- -
----- ------- - -----------------------------
------------------- - ------------ ------ --- ------
----------------------------------------------------
---
--------------- --------- ----------- --------- -- -
----- -- - -----------------------------
-------------- - ------------- ------------
-----------------------------------------------
---
--------------- ------ ---------- -- -
----- ------- - -----------------------------
------------------- - ------------ ---- --- ------
----------------------------------------------------
---
---------小结
本文介绍了如何使用 Socket.io 实现一个多人聊天系统。我们从服务器端代码和客户端代码两个方面进行了详细的说明。实现多人聊天系统是一项非常有趣且必备的技能，它能够让你更好地了解 WebSocket 技术的实现原理。通过本文的学习，相信你已经有所收获。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6793dc6a504e4ea9bd84d18e