服务器和浏览器的持久化通信方式,有两种主流的方式:
WebSocket | EventSource |
|---|---|
| 双向:客户端和服务端都能交换消息 | 单向:仅服务端能发送消息 |
| 二进制和文本数据 | 仅文本数据 |
| WebSocket 协议 | 常规 HTTP 协议 |
EventSource 就是我们常讲的 SSE 通信技术,如果浏览器只需要简单持续的接收数据 EventSource 无疑比 WebSocket 是更加的选择。
SSE 入门
技术很简单,看看阮一峰老师写的就行了。
SSE 的缺点
无论是 XHR 还是 Fetch 技术本身都是 HTTP 技术,发送请求的时候都允许自定义 HTTP 的 Header。SSE 本身也是 HTTP 请求,但是你无法自定义 Header(Websocket 也不支持)。
所以如果你要用自定义 Header 做登录验证等,唯一的方法只能在发送的 URL 里面携带,例如?uuid=0000xxxx。
当然也可以选择另外一条路,因为 SSE 本身就是 HTTP 请求的,我们可以用 XHR 或者 Fetch 来传送 stream 模拟实现,event-source-polyfill 就是这个实现思路。
自己实现也有一个小问题,就是浏览器的调试面板无法正确显示数据,只能通过 console 来调试。原因就是浏览器默认只支持 EventSource 类创建的 SSE。
当然,理想情况还是让 EventSource 支持自定义 Header,但是 XMLHttpRequest、WebSocket 和 EventSource 三个 API 几乎很少有更新,原因就在于委员会很少花精力在这三个 API 上面,以后几乎都不在变动,如果可能将来它们三个的功能都会在 Fetch 里面实现。