浏览器端的使用:
const es = new EventSource('/sse')
服务端的使用:
const sseStream = new SseStream(req)
sseStream.pipe(res)
sseStream.write({
id: sendCount,
event: 'server-time',
retry: 20000, // 告诉客户端,如果断开连接后,20秒后再重试连接
data: {ts: newDate().toTimeString(), count: sendCount }
})
更多API使用和demo介绍分别参考:SSE API、demo代码。
6.6 兼容性及缺点兼容性:
▲ 上图来自 https://caniuse.com/?search=Server-Sent-Events
缺点:
- 1)因为是服务器 -> 客户端的,所以它不能处理客户端请求流;
- 2)因为是明确指定用于传输UTF-8数据的,所以对于传输二进制流是低效率的,即使你转为base64的话,反而增加带宽的负载,得不偿失。
[1] WebSocket API文档
[2] SSE API文档
[3] 新手入门贴:史上最全Web端即时通讯技术原理详解
[4] Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE
[5] SSE技术详解:一种全新的HTML5服务器推送事件技术
[6] Comet技术详解:基于HTTP长连接的Web端实时通信技术
[7] 新手快速入门:WebSocket简明教程
[8] WebSocket详解(三):深入WebSocket通信协议细节
[9] WebSocket详解(四):刨根问底HTTP与WebSocket的关系(上篇)
[10] WebSocket详解(五):刨根问底HTTP与WebSocket的关系(下篇)
[11] 使用WebSocket和SSE技术实现Web端消息推送
[12] 详解Web端通信方式的演进:从Ajax、JSONP 到 SSE、Websocket
[13] MobileIMSDK-Web的网络层框架为何使用的是Socket.io而不是Netty?
[14] 理论联系实际:从零理解WebSocket的通信原理、协议格式、安全性
[15] WebSocket从入门到精通,半小时就够!
[16] WebSocket硬核入门:200行代码,教你徒手撸一个WebSocket服务器
[17] 网页端IM通信技术快速入门:短轮询、长轮询、SSE、WebSocket
,本文已同步发布于“即时通讯技术圈”公众号。
同步发布链接是:http://www.52im.net/thread-3695-1-1.html