在 Web 开发中，实时通信是一个非常重要的功能，而 WebSocket 是实现实时通信的一种技术。而 Socket.io 是一个基于 WebSocket 的库，它提供了更加灵活、可靠的实时通信方案，并且支持多房间的在线聊天室。
什么是 WebSocket
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许服务器端和客户端进行实时通信，而无需进行轮询或长轮询等技术。WebSocket 协议由 RFC6455 定义，目前已被所有现代浏览器支持。
WebSocket 的优点有：
- 实时性好
- 支持双向通信
- 基于 TCP 协议，比 HTTP 更加高效
什么是 Socket.io
Socket.io 是一个基于 WebSocket 的库，它提供了更加灵活、可靠的实时通信方案，并且支持多房间的在线聊天室。Socket.io 可以运行在 Node.js 和浏览器中，它提供了一致的 API，可以在不同的环境中进行实时通信。
Socket.io 的优点有：
- 兼容所有浏览器
- 支持多种实时通信方式
- 支持多房间的在线聊天室
Socket.io 的基本使用
使用 Socket.io 首先需要在服务器端和客户端都引入 Socket.io 库。在 Node.js 中，可以使用 npm 进行安装：
npm install socket.io
在服务器端使用 Socket.io：
// javascriptcn.com 代码示例
const http = require('http');
const socketIO = require('socket.io');
const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
});
const io = socketIO(server);
io.on('connection', (socket) => {
console.log('a user connected');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});在客户端使用 Socket.io：
<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); </script>
以上代码实现了一个最简单的 Socket.io 应用，当客户端连接到服务器端时，服务器端会输出 a user connected。
Socket.io 实现多房间在线聊天室
下面我们将使用 Socket.io 实现一个多房间在线聊天室。首先，我们需要在服务器端维护一个房间列表以及房间内的用户列表：
// javascriptcn.com 代码示例
const rooms = {};
io.on('connection', (socket) => {
socket.on('join', (room) => {
socket.join(room);
if (!rooms[room]) {
rooms[room] = [];
}
rooms[room].push(socket.id);
io.to(room).emit('join', socket.id);
io.to(room).emit('users', rooms[room]);
});
socket.on('message', (room, message) => {
io.to(room).emit('message', socket.id, message);
});
socket.on('leave', (room) => {
socket.leave(room);
if (rooms[room]) {
const index = rooms[room].indexOf(socket.id);
if (index !== -1) {
rooms[room].splice(index, 1);
io.to(room).emit('leave', socket.id);
io.to(room).emit('users', rooms[room]);
if (rooms[room].length === 0) {
delete rooms[room];
}
}
}
});
});以上代码实现了用户加入房间、发送消息、离开房间的功能，并且在用户加入房间、离开房间时会向房间内的其他用户发送消息，通知他们有新用户加入或离开。
客户端需要实现以下功能：
- 加入房间：向服务器发送
join消息，并传递房间名。 - 发送消息：向服务器发送
message消息，并传递房间名和消息内容。 - 离开房间：向服务器发送
leave消息，并传递房间名。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Socket.io Chat Room</title>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
function join(room) {
socket.emit('join', room);
}
function sendMessage(room) {
const input = document.getElementById('message-input');
const message = input.value.trim();
if (message) {
socket.emit('message', room, message);
input.value = '';
}
}
function leave(room) {
socket.emit('leave', room);
}
socket.on('join', (id) => {
const ul = document.getElementById('user-list');
const li = document.createElement('li');
li.id = id;
li.textContent = id;
ul.appendChild(li);
});
socket.on('leave', (id) => {
const li = document.getElementById(id);
if (li) {
li.parentNode.removeChild(li);
}
});
socket.on('users', (users) => {
const ul = document.getElementById('user-list');
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
users.forEach((id) => {
const li = document.createElement('li');
li.id = id;
li.textContent = id;
ul.appendChild(li);
});
});
socket.on('message', (id, message) => {
const ul = document.getElementById('message-list');
const li = document.createElement('li');
li.textContent = `${id}: ${message}`;
ul.appendChild(li);
});
</script>
</head>
<body>
<input type="text" id="room-input" placeholder="Room Name">
<button onclick="join(document.getElementById('room-input').value)">Join</button>
<button onclick="leave(document.getElementById('room-input').value)">Leave</button>
<hr>
<ul id="user-list"></ul>
<hr>
<ul id="message-list"></ul>
<input type="text" id="message-input" placeholder="Message">
<button onclick="sendMessage(document.getElementById('room-input').value)">Send</button>
</body>
</html>以上代码实现了一个基本的多房间在线聊天室，用户可以加入、离开房间，并且可以在房间内发送消息。
总结
Socket.io 是一个非常强大的实时通信库，它提供了更加灵活、可靠的实时通信方案，并且支持多房间的在线聊天室。使用 Socket.io 可以轻松地实现实时通信功能，为 Web 开发带来更多的可能性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6560aa1ed2f5e1655dadc72b