Socket.io 是一个基于 Node.js 的实时应用程序框架，可以方便地实现实时通信。多人聊天室是一个典型的实时应用场景，本文将详细介绍如何使用 Socket.io 实现多人聊天室。
简介
Socket.io 是一个基于 WebSocket 的实时应用程序框架，它可以在客户端和服务器之间建立一个持久的双向连接，实现实时通信。Socket.io 支持多种传输方式，包括 WebSocket、Ajax 轮询、JSONP 等，可以自动选择最佳的方式进行通信。
多人聊天室是一个典型的实时应用场景，它可以让多个用户在同一个页面上进行实时聊天。使用 Socket.io 实现多人聊天室需要以下步骤：
- 创建一个 Socket.io 服务器
- 在客户端连接 Socket.io 服务器
- 在客户端发送消息到服务器
- 在服务器接收消息并广播给所有客户端
- 在客户端接收广播消息并显示在页面上
接下来将详细介绍如何实现这些步骤。
创建 Socket.io 服务器
首先需要安装 Socket.io：
npm install socket.io
然后在 Node.js 中创建一个 Socket.io 服务器：
const io = require('socket.io')(server);其中 server 是一个 HTTP 服务器，可以使用 Node.js 的 http 模块创建：
const http = require('http');
const server = http.createServer((req, res) => {
// 处理 HTTP 请求
});接下来需要监听客户端连接事件：
io.on('connection', (socket) => {
console.log('a user connected');
});这里的 socket 是一个表示客户端连接的对象，可以使用它来发送和接收消息。
连接 Socket.io 服务器
在客户端需要连接 Socket.io 服务器：
<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); </script>
这里的 /socket.io/socket.io.js 是 Socket.io 客户端脚本的地址，可以使用 Node.js 的 express 模块提供静态文件服务：
const express = require('express');
const app = express();
app.use(express.static('public'));发送消息到服务器
在客户端可以使用 socket.emit() 方法向服务器发送消息：
socket.emit('chat message', message);其中 chat message 是消息类型，message 是消息内容。
接收消息并广播给所有客户端
在服务器需要监听 chat message 消息类型：
socket.on('chat message', (message) => {
console.log('message: ' + message);
io.emit('chat message', message);
});其中 io.emit() 方法可以将消息广播给所有客户端。
接收广播消息并显示在页面上
在客户端需要监听 chat message 消息类型：
socket.on('chat message', (message) => {
const li = document.createElement('li');
li.textContent = message;
messages.appendChild(li);
});其中 messages 是一个 <ul> 元素，用来显示聊天记录。
示例代码
以下是一个完整的多人聊天室示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------------
-------
--------- -
---------------- -----
------- --
-------- --
-
--------- -- -
-------- --- -----
-
--------- ----------------- -
----------------- --------
-
------ -
----------- -----
-
--------
-------
------
--- -------------------
---- -----------
------ ------------ ------------
------- -----------------------
------
------- ---------------------------------------
--------
----- ------ - -----
----- -------- - ------------------------------------
----- ------- - -----------------------------------
----- ---- - --------------------------------
------------------------------ -- -- -
----------------- --------- ---------------
------------- - ---
---
--------------- --------- --------- -- -
----- -- - -----------------------------
-------------- - --------
-------------------------
---
---------
-------
-------在 Node.js 中需要创建一个 HTTP 服务器并监听 Socket.io 连接事件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- --- - ----------
----------------------------------
----- ------ - -----------------------
----- -- - -----------------------------
------------------- -------- -- -
-------------- ---- ------------
--------------- --------- --------- -- -
--------------------- - - ---------
------------- --------- ---------
---
----------------------- -- -- -
----------------- ---------------
---
---
------------------- -- -- -
---------------------- -- ---------
---启动 Node.js 服务器后即可在浏览器中访问多人聊天室。
总结
本文介绍了如何使用 Socket.io 实现多人聊天室，包括创建 Socket.io 服务器、连接 Socket.io 服务器、发送消息到服务器、接收消息并广播给所有客户端、接收广播消息并显示在页面上等步骤。使用 Socket.io 可以方便地实现实时通信，适用于多种实时应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bdb713add4f0e0ff75dd6a