Skip to main content

websocket和see区别

WebSocket和SEE（Server-Sent Events）是Web开发中用于实现服务器到客户端实时通信的两种不同技术，它们有以下主要区别：

1. 通信方向​

  • WebSocket：双向通信，客户端和服务器可以随时互相发送数据。适用于需要实时交互的场景，如聊天应用、在线游戏、实时协作工具等。
  • SEE（Server-Sent Events）：单向通信，仅服务器可以向客户端发送数据。适用于服务器主动推送更新的场景，如新闻推送、股票行情、实时通知等。

2. 协议与连接方式​

  • WebSocket：基于TCP协议，使用ws://或wss://协议，建立持久化的TCP连接，连接建立后可保持长时间通信。
  • SEE：基于HTTP协议，使用普通的HTTP连接，通过保持长连接（Long Polling）或定期轮询（Polling）实现服务器推送。

3. 数据格式​

  • WebSocket：支持文本和二进制数据，使用灵活，可以自定义协议（如JSON、Protobuf等）。
  • SEE：只能发送文本数据，格式通常为简单的字符串或特定的事件流格式（如data: message\n\n）。

4. 连接管理​

  • WebSocket：连接一旦建立，除非手动关闭或网络中断，否则保持连接状态，适合长时间实时通信。
  • SEE：连接可能因网络波动或服务器问题中断，需要客户端主动重连（浏览器通常会自动处理重连）。

5. 浏览器兼容性​

  • WebSocket：现代浏览器（Chrome、Firefox、Safari、Edge等）均支持，IE10+以上版本支持。
  • SEE：主流浏览器支持良好，但IE不支持（需使用Polyfill）。

6. 适用场景​

  • WebSocket：实时聊天、在线游戏、实时数据仪表盘、协作编辑等需要双向实时交互的场景。
  • SEE：新闻推送、股票行情、实时通知、监控数据更新等单向推送场景。

7. 实现复杂度​

  • WebSocket：相对复杂，需要处理连接建立、断开、重连、消息格式解析等。
  • SEE：简单，浏览器原生支持，服务器只需按格式返回数据即可。

8. 示例代码对比​

WebSocket（JavaScript）​

// 客户端
const socket = new WebSocket('ws://example.com/socket');
socket.onopen = () => socket.send('Hello, server!');
socket.onmessage = (event) => console.log('Received:', event.data);

// 服务器（Node.js + ws库）
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
  ws.on('message', (message) => ws.send(`Echo: ${message}`));
});

SEE（JavaScript）​

// 客户端
const eventSource = new EventSource('http://example.com/events');
eventSource.onmessage = (event) => console.log('Received:', event.data);

// 服务器（Node.js + Express）
app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  setInterval(() => {
    res.write(`data: ${new Date().toISOString()}\n\n`);
  }, 1000);
});

总结​

特性WebSocketServer-Sent Events
通信方向双向单向（服务器→客户端）
协议基于TCP（ws/wss）基于HTTP
数据格式文本/二进制文本
连接管理需手动管理重连浏览器自动重连
复杂度较高较低
适用场景实时交互应用服务器推送通知

根据具体需求选择技术：若需要双向通信，选WebSocket；若只需服务器推送，SEE更简单高效。