前端实时通信技术之HTTP轮询、SSE、WebSocket、WebRTC详解

// 短轮询示例
setInterval(async () => {
  const response = await fetch('/api/messages');
  const data = await response.json();
  updateUI(data);
}, 1000); // 每秒请求一次

// 长轮询示例
async function longPoll() {
  const response = await fetch('/api/wait-for-messages');
  const data = await response.json();
  updateUI(data);
  longPoll(); // 立即发起下一次
}
longPoll();

// 客户端代码
const eventSource = new EventSource('/api/stream');

eventSource.onmessage = (event) => {
  console.log('收到数据:', event.data);
};

eventSource.onerror = (error) => {
  console.error('连接出错:', error);
};

// 关闭连接
// eventSource.close();
javascript

// 服务端代码（Node.js + Express示例）
app.get('/api/stream', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 每秒推送一条消息
  const interval = setInterval(() => {
    res.write(`data: ${JSON.stringify({ time: Date.now() })}\n\n`);
  }, 1000);

  req.on('close', () => clearInterval(interval));
});

// 客户端代码
const ws = new WebSocket('wss://example.com/socket');

ws.onopen = () => {
  console.log('连接已建立');
  ws.send(JSON.stringify({ type: 'join', room: 'chat' }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('收到消息:', data);
};

ws.onerror = (error) => {
  console.error('WebSocket错误:', error);
};

ws.onclose = () => {
  console.log('连接已关闭');
};

// 服务端代码（Node.js + ws库示例）
import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('客户端已连接');
  
  ws.on('message', (data) => {
    console.log('收到:', data.toString());
    // 广播给所有客户端
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
  
  ws.send('欢迎加入聊天室！');
});

// 获取麦克风流
const stream = await navigator.mediaDevices.getUserMedia({
  audio: {
    echoCancellation: true,  // 回声消除
    noiseSuppression: true,  // 噪声抑制
    autoGainControl: true    // 自动增益
  },
  video: true
});

// 创建对等连接
const pc = new RTCPeerConnection();

// 添加本地流
stream.getTracks().forEach(track => {
  pc.addTrack(track, stream);
});

// 接收远程流
pc.ontrack = (event) => {
  remoteVideo.srcObject = event.streams[0];
};

// 创建offer（发起方）
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
// 通过信令服务器发送offer给远端

需要实时通信？
    │
    ├─ 只需要服务器推送给客户端？
    │       │
    │       ├─ 是 → SSE（简单、轻量）
    │       │
    │       └─ 需要客户端也能发送数据？
    │               │
    │               ├─ 文本/JSON数据 → WebSocket
    │               │
    │               └─ 音视频流 → WebRTC
    │
    └─ 需要极低延迟、P2P直连？
            │
            └─ 是 → WebRTC