谈谈实时通信
- WebSocket
- Server-Sent Events（SSE）
WebSocket
- 双向通信：WebSocket允许客户端和服务器之间建立双向通信通道
- 持久连接：一旦建立了WebSocket连接，它将保持打开状态，直到客户端或服务器明确关闭它。这降低了每次通信都需要建立新连接的开销。
- 可以发送文本，也可以发送二进制数据
- 基于TCP协议
- 没有同源限制，客户端可以与任意服务器通信
- 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL
适用场景：
- 聊天应用
- 监控数据
- 实时销量
- 即时通知应用程序
Server-Sent Events
-
单向通信：SSE允许服务器向客户端发送事件，但客户端不能向服务器发送数据。这是一种从服务器到客户端的单向流通信
-
基于HTTP：SSE建立在HTTP协议之上，因此不需要额外的协议或端口。它使用简单的文本数据流，易于实现。
-
自动重连：SSE具有自动重新连接的能力，如果连接中断，客户端会尝试重新连接服务器，确保持续接收事件
适用场景：
- 即时更新的新闻网站
- 实时监控系统
- 服务器推送通知给客户端
- 客户端不需要向服务器发送数据的应用程序
服务端设置
- 1、设置响应头
Content-Type: text/event-stream- 指定响应内容类型为 Event Stream，告诉客户端这是一个 SSE 响应
Cache-Control: no-cacheno-cache指令确实会被缓存，只是每次使用缓存时都要向服务器验证缓存响应的有效性。这种方式确保了客户端获取的是最新的资源
Connection: keep-alive- 告诉服务器保持连接，以便持续发送事件给客户端。
- 2、发送事件数据
- 3、处理客户端断开连接
客户端设置
- 客户端通过创建一个 EventSource 对象来与服务器建立 SSE 连接
// 客户端创建 EventSource 对象，并指定要监听的服务器端SSE的URL
const eventSource = new EventSource('/api/v1/sse');
// 监听事件
eventSource.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received message from server:', data.message);
// Handle the received data as needed
};
// 处理错误
eventSource.onerror = (error) => {
console.error('EventSource error:', error);
};
// 关闭连接
eventSource.close()
WebSocket和Server-Sent Event对比
- SSE服务器压力小，WebSocket服务器压力更大
- SSE 是比较适合单向数据传递的场景，不需要客户端向服务端发送数据
- WebSocket比SSE更强大，双向通信
WebRTC
- WebRTC（Web Real-Time Communication）是一种实时通信技术，用于在Web浏览器之间直接传输音频、视频和数据，而无需中间服务器的参与