服务器推送在某些场景下是非常重要且不可或缺的部分,比如看 NBA 总决赛的时候,各种比赛数据的实时更新等,而著名的 WebSocket 协议就可以很简单的实现服务器推送,当然我要讲的并不是 WebSocket ,而是 server-sent event ( SSE )。
SSE
Server-sent event ( 简称 SSE ),顾名思义,服务器推送事件,在 web 的 HTML5 标准中已经得到实现。
SSE 本质上仍然是使用 HTTP( 包括后文均指 1.1 版 )协议,其本身并没有跳出 HTTP 协议内容的规范, HTTP 协议其实是无法做到服务器主动推送的,那么 SSE 又是如何实现的呢?
当我们点击某个视频进行观看,这时就相当于客户端发起一个 HTTP 请求,而视频服务器接受到请求之后进行响应,并将视频通过 stream 的形式源源不断的发送给客户端,其实这就是我们看视频的时候不断增长的进度条,为什么这样做,因为响应的文件太大,无法直接完成传输,所以就以 stream 流的形式进行。
而 SSE 其实与上面的场景类似,在响应上做文章,仍然由客户端发起请求,但是服务器接受到请求后保持此连接,一次一次慢慢的推送消息,这就形成了我们看到的服务器推送。
SSE 兼容性一览
通过上图我们可以看到 SSE 在 PC 和移动端都是支持的,至于 IE 这个老大难,大家都懂的。
实战
1、先准备一个我们的服务器端,每秒钟推送数据:
很简单是不是,重点关注下红色框中的部分,保持连接、使用事件流的形式、不使用缓存,每秒钟推送一下当前的时间等,注释我都写了,你肯定可以看懂。
2、再写个前端页面负责展示:
代码很简单,打印下服务器推送的数据,看我的注释你就明白了。
3、最终的效果:
结语
SSE 实现服务器推送更加轻量、实现更简单,某些时候是一种不错的选择。