Socket.io 是一个基于 Node.js 的实时网络库，它可以帮助我们轻松地实现实时通信功能。在本文中，我们将使用 Socket.io 来开发一个多人聊天系统。
准备工作
在开始开发之前，我们需要先安装 Node.js 和 Socket.io。可以通过以下命令来安装它们：
npm install node npm install socket.io
开始开发
首先，我们需要创建一个服务器来处理客户端的连接请求。以下是服务器端的代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ------ - ---------------------------------- ----- -- - ----------------------------- ------------------- -------- -- - -------------- ---- ------------ --- ------------------- -- -- - ------------------- ------- -- ---- ------- ---展开代码
以上代码创建了一个 Express 应用，并使用 Socket.io 将其升级为实时应用。当客户端连接到服务器时，将会在服务器端打印出 "A user connected"。
接下来，我们需要处理客户端发送的消息并将其广播给所有其他客户端。以下是服务器端的代码：
io.on('connection', (socket) => { console.log('A user connected'); socket.on('message', (message) => { console.log(`Received message: ${message}`); io.emit('message', message); }); });
以上代码添加了一个事件监听器，当客户端发送消息时，服务器将在控制台中打印出消息并将其广播给所有其他客户端。
现在，我们需要创建一个客户端来连接到服务器并发送消息。以下是客户端的代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------- ------------ ------- ------ ------ ------ ------------ ----------- ----------------- ---- ------- --------- ------- --------------------------- ------- --- ------------------- ------- --------------------------------------- -------- ----- ------ - ----- ----- ---- - ------------------------------- ----- ----- - ----------------------------------- ----- -- - ------------------------------------ ------------------------------- ------- -- - ----------------------- ----- ------- - ------------ ----------- - --- ---------------------- --------- --- -------------------- --------- -- - ----- -- - ----------------------------- -------------- - -------- ------------------- --- --------- ------- -------展开代码
以上代码创建了一个简单的 HTML 页面，其中包含一个表单用于发送消息，并一个列表用于显示所有消息。客户端使用 Socket.io 连接到服务器，并在发送消息时使用 "message" 事件，接收到消息时将其添加到列表中。
总结
通过本文的学习，我们了解了如何使用 Socket.io 开发一个多人聊天系统。这个例子只是一个简单的示例，我们可以通过 Socket.io 实现更复杂的实时应用程序。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f3b51d2b3ccec22fc258c3
