当前位置：首页 > news >正文

前端实现即时通讯：短轮询、长轮询、SSE 与 WebSocket 全面解析

news 2025/6/20 10:29:51

📌 一、前言

在现代 Web 应用中，即时通讯 是不可或缺的功能之一，例如：在线客服、社交聊天、实时监控、协同编辑等场景都依赖它。

前端实现即时通讯的常见技术包括：

⏱ 短轮询（Short Polling）
⏳ 长轮询（Long Polling）
🔁 SSE（Server-Sent Events）
🔗 WebSocket

接下来我们逐一介绍这几种方式的原理、代码示例、优缺点以及应用场景。

⏱ 二、短轮询（Short Polling）

🧠 原理

客户端周期性发送请求，询问服务器是否有新消息。流程如下：

客户端每隔几秒用 setInterval() 发一次请求；
服务器立即响应当前是否有新数据；
客户端处理返回结果；
循环上述过程。

🧪 示例代码

setInterval(() => {fetch('/api/messages').then(res => res.json()).then(data => {if (data.newMessages) {updateUI(data.messages);}});
}, 3000); // 每3秒轮询

✅ 优点

实现简单；
兼容性强。

❌ 缺点

请求频繁，消耗资源；
延迟较高，不够实时。

⏳ 三、长轮询（Long Polling）

🧠 原理

客户端发出请求；
若服务器没有数据，保持连接不返回；
一旦有数据或超时，立即响应；
客户端收到数据后立即再次发请求。

🧪 示例（Node.js + Express）

服务端：

app.get('/long-poll', (req, res) => {waitForMessageOrTimeout().then(message => {res.json({ message });});
});

客户端：

function poll() {fetch('/long-poll').then(res => res.json()).then(data => {handleMessage(data.message);poll(); // 继续请求});
}
poll();

✅ 优点

接近实时；
比短轮询更省资源。

❌ 缺点

服务端需处理连接挂起；
不支持双向通信。

🔁 四、SSE（Server-Sent Events）

🧠 原理

服务端通过一个持续的 HTTP 连接推送事件流给客户端。

🧪 示例

服务端（Node.js）：

app.get('/events', (req, res) => {res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Connection', 'keep-alive');setInterval(() => {res.write(`data: ${JSON.stringify({ time: Date.now() })}\n\n`);}, 2000);
});

客户端：

const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {console.log('新事件:', event.data);
};

✅ 优点

实现简单；
自动断线重连；
适合实时推送（如通知系统）。

❌ 缺点

单向通信；
不支持 IE；
仅支持文本格式。

🔗 五、WebSocket

🧠 原理

WebSocket 是在 HTTP 握手基础上建立的 TCP 持久连接，支持全双工通信。

🧪 示例

服务端（Node.js + ws）：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });server.on('connection', socket => {socket.on('message', msg => {console.log('客户端消息:', msg);socket.send('收到啦');});
});

客户端：

const socket = new WebSocket('ws://localhost:8080');
socket.onmessage = event => console.log('服务器消息:', event.data);
socket.send('你好，服务器');

✅ 优点

真·实时双向通信；
支持二进制/文本；
网络开销小、性能高。

❌ 缺点

状态维护复杂；
部分代理网络可能阻断；
安全性需要额外关注（如身份认证、攻击防范）。

📊 六、技术对比：SSE vs WebSocket

特性	WebSocket	SSE（Server-Sent Events）
通信方向	双向	单向（服务器 -> 客户端）
协议	TCP + 自定义协议	基于 HTTP/1.1
数据类型	文本 + 二进制	仅支持文本
自动重连	❌ 手动实现	✅ 默认支持
浏览器支持	✅ 全面支持	部分旧浏览器不支持
实现复杂度	较高	简单
应用场景	聊天、游戏、协同编辑	推送通知、状态更新、日志流等

🧭 七、选型建议

需求	推荐方案
高实时双向通信	✅ WebSocket
单向实时推送（轻量级）	✅ SSE
实现简单，无需后端支持	✅ 短轮询
有实时需求，轻负载方案	✅ 长轮询