前端双工通信的几种方案详细描述

前端实现双工通信（全双工或半双工）的常见方案及详细实现如下：

一、WebSocket（全双工）

原理：基于 TCP 的持久化协议，客户端与服务端建立双向通信通道，支持实时双向数据传输。

// 客户端（浏览器）
const socket = new WebSocket('ws://your-server:port');// 监听消息
socket.onmessage = (event) => {console.log('收到消息:', event.data);
};// 发送消息
socket.send('Hello Server');// 服务端（Node.js示例，使用 ws 库）
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {ws.on('message', (message) => {console.log('收到客户端消息:', message);ws.send('Hello Client');});
});

适用场景：实时聊天、在线游戏、协同编辑等高频双向通信场景。
优点：低延迟、高效、支持二进制数据传输。
缺点：需服务端主动支持 WebSocket 协议。

二、Server-Sent Events (SSE) + HTTP（半双工）

原理：SSE 允许服务器单向推送数据到客户端，客户端通过普通 HTTP 请求发送数据。

// 客户端接收服务端推送
const eventSource = new EventSource('/sse-endpoint');
eventSource.onmessage = (e) => {console.log('收到服务端推送:', e.data);
};// 客户端发送数据（通过 Fetch API）
fetch('/send-data', {method: 'POST',body: JSON.stringify({ msg: 'Hello Server' })
});// 服务端（Node.js示例）
app.get('/sse-endpoint', (req, res) => {res.setHeader('Content-Type', 'text/event-stream');setInterval(() => {res.write(`data: ${Date.now()}\n\n`); // 推送数据}, 1000);
});app.post('/send-data', (req, res) => {console.log('收到客户端数据:', req.body.msg);res.sendStatus(200);
});

适用场景：股票行情、新闻推送等以服务端推送为主的场景。
优点：简单、支持自动重连、兼容 HTTP 协议。
缺点：客户端到服务端需额外 HTTP 请求，非真正全双工。

三、长轮询（Long Polling，半双工模拟）

原理：客户端发起请求后，服务端保持连接直到有数据或超时，客户端收到响应后立即发起新请求。

// 客户端轮询
function longPoll() {fetch('/polling-endpoint').then(res => res.json()).then(data => {console.log('收到数据:', data);longPoll(); // 递归调用维持连接});
}
longPoll();// 服务端（Node.js示例）
const messages = [];
app.get('/polling-endpoint', (req, res) => {// 等待新消息或超时（如30秒）const waitForMessage = (resolve) => {if (messages.length > 0) {res.json(messages.shift());} else {setTimeout(() => waitForMessage(resolve), 30000);}};waitForMessage();
});

适用场景：兼容性要求高、低频通信场景。
优点：兼容所有浏览器。
缺点：高延迟、服务端资源消耗大。

四、HTTP/2 Server Push（半双工）

原理：HTTP/2 允许服务端主动推送资源，但需配合客户端请求使用。

// 服务端（Node.js，使用 http2 模块）
const http2 = require('http2');
const server = http2.createSecureServer({ cert, key });
server.on('stream', (stream, headers) => {if (headers[':path'] === '/') {stream.pushStream({ ':path': '/api/data' }, (err, pushStream) => {pushStream.respond({ ':status': 200 });pushStream.end(JSON.stringify({ data: 'Pushed Data' }));});stream.end('Main Response');}
});

适用场景：预加载资源、减少延迟。
优点：无需额外协议，利用 HTTP/2 特性。
缺点：不能直接用于动态数据推送，客户端无法主动拦截。

五、WebRTC DataChannel（全双工）

原理：基于 UDP 的点对点通信，适合浏览器间直接数据传输。

// 客户端建立连接
const pc = new RTCPeerConnection();
const dataChannel = pc.createDataChannel('chat');dataChannel.onmessage = (e) => {console.log('收到消息:', e.data);
};
dataChannel.send('Hello Peer');// 需配合信令服务器交换 SDP 和 ICE 信息（代码略）

适用场景：视频会议、P2P 文件传输。
优点：低延迟、支持点对点通信。
缺点：需处理 NAT 穿透、需信令服务器。

六、WebTransport（实验性，全双工）

原理：基于 HTTP/3 的现代协议，支持双向流和多路复用。

// 客户端（需浏览器支持）
const transport = new WebTransport('https://server:port');
await transport.ready;
const stream = await transport.createBidirectionalStream();
const writer = stream.writable.getWriter();
writer.write(new TextEncoder().encode('Hello Server'));
const reader = stream.readable.getReader();
const { value } = await reader.read();
console.log('收到消息:', new TextDecoder().decode(value));

适用场景：未来替代 WebSocket 的高性能场景。
优点：基于 QUIC 协议，抗丢包能力强。
缺点：目前仅部分浏览器支持（如 Chrome 97+）。

对比总结

方案	协议	双工类型	延迟	适用场景
WebSocket	WS/WSS	全双工	低	实时聊天、高频交互
SSE + HTTP	HTTP	半双工	中等	服务端主导的推送
长轮询	HTTP	半双工	高	兼容性要求高的低频场景
HTTP/2 Push	HTTP/2	半双工	低	资源预加载
WebRTC	UDP	全双工	极低	P2P 通信、音视频
WebTransport	HTTP/3	全双工	极低	未来高性能应用