WebSocket和Socket.IO实现Web实时通信，适用于聊天、协作等场景；前者基于标准协议，后者兼容性更强，支持降级通信，需注意安全与高并发处理。
实时通信在现代Web应用中越来越重要，比如聊天室、在线协作工具、实时通知和多人游戏等场景。JavaScript 通过 Socket 编程实现客户端与服务器之间的双向实时通信，突破了传统 HTTP 请求-响应模式的限制。
WebSocket：原生支持实时通信
WebSocket 是 HTML5 提供的一种全双工通信协议，允许客户端和服务器之间建立持久连接，双方可以随时发送数据。
使用原生 WebSocket API 非常简单：
// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');
// 连接成功时触发
socket.onopen = function(event) {
socket.send('客户端已连接');
};
// 接收服务器消息
socket.onmessage = function(event) {
console.log('收到消息：', event.data);
};
// 处理错误
socket.onerror = function(error) {
console.error('连接出错：', error);
};
// 连接关闭
socket.onclose = function(event) {
console.log('连接已关闭');
};
在服务器端（Node.js），可以使用 ws 库来搭建 WebSocket 服务：
立即学习“Java免费学习笔记（深入）”；
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (socket) => {
console.log('客户端已连接');
socket.on('message', (data) => {
console.log('收到:', data.toString());
// 向所有客户端广播消息
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(`广播：${data}`);
}
});
});
});
Socket.IO：更强大的实时通信库
虽然 WebSocket 很强大，但在某些网络环境（如代理、防火墙）下可能不被支持。Socket.IO 在 WebSocket 基础上提供了降级机制（如轮询），并增强了功能，更适合复杂项目。
Socket.IO 分为服务端和客户端两部分，使用起来非常直观：
// 服务端代码（Node.js + socket.io）
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
console.log('用户上线');
socket.on('chat message', (msg) => {
// 广播给所有人（包括自己）
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('用户断开连接');
});
});
前端引入 Socket.IO 客户端库：
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
socket.on('connect', () => {
console.log('连接成功');
});
socket.on('chat message', (msg) => {
const div = document.createElement('div');
div.textContent = msg;
document.getElementById('messages').appendChild(div);
});
function sendMessage() {
const input = document.getElementById('messageInput');
socket.emit('chat message', input.value);
input.value = '';
}
</script>
常见应用场景与注意事项
实时通信适用于需要即时反馈的场景：
- 在线聊天应用
- 实时数据仪表盘（如股票、监控）
- 协同编辑文档
- 多人互动游戏
使用时注意以下几点：
- 合理管理连接生命周期，避免内存泄漏
- 对消息进行校验和过滤，防止 XSS 或恶意数据
- 生产环境建议配合 HTTPS/WSS，并加入身份验证机制
- 高并发下需考虑集群部署与消息中间件（如 Redis Pub/Sub）
