H5 服务端推送websocket | server sent events

websocket

WebSocket 协议在2008年诞生，2011年成为国际标准，所有浏览器均已支持。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，属于服务器推送技术的一种。
其他特点包括：

• 属于应用层协议，它基于TCP传输协议，并复用HTTP的握手通道
• 支持双向通信，实时性更强
• 更好的二进制支持
• 较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部。
• 支持扩展。ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等）
• 不支持断线重连，可以通过心跳机制解决

客户端：申请协议升级

Connection: Upgrade：表示要升级协议
Upgrade: websocket：表示要升级到websocket协议。
Sec-WebSocket-Version: 13：表示websocket的版本。如果服务端不支持该版本，需要返回一个Sec-WebSocket-Versionheader，里面包含服务端支持的版本号。
Sec-WebSocket-Extensions：协议扩展， 某类协议可能支持多个扩展，通过它可以实现协议增强;
Sec-WebSocket-Key：与服务端响应首部的Sec-WebSocket-Accept是配套的，客户端发送的一个 base64编码的密文，要求服务端必须返回一个对应加密的Sec-WebSocket-Accept应答，否则客户端会抛出Error during WebSocket handshake错误，并关闭连接，可以提供基本的防护，比如恶意的连接，或者无意的连接，

服务端：响应协议升级

code码：101 服务器根据客户端的请求切换协议，此处当然是切换为websocket协议
Sec-WebSocket-Accept：对request中的Sec-WebSocket-Key进行加密后的内容

Server Sent Events

服务器向客户端声明，接下来要发送的是流信息（streaming），也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。SSE 就是利用这种机制，使用流信息向浏览器推送信息。

SSE 与 WebSocket 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。

总体来说，WebSocket 更强大和灵活。因为它是全双工通道，可以双向通信；SSE 是单向通道，只能服务器向浏览器发送，因为流信息本质上就是下载。

• SSE 使用 HTTP 协议，现有的服务器软件都支持
• SSE 属于轻量级，使用简单
• SSE 默认支持断线重连
• SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据
• SSE 支持自定义发送的消息类型

总结：

Websockets超过SSE的优点：

• 实时传输，双方向通信
• 二进制支持

SSE超过Websockets的优点：

• 运行HTTP协议，而不是自定义协议
• 内置支持重新连接和事件识别符
• 可以更轻松的实现后台操作
• 不需要服务器重新部署

参考文章：
http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html
http://www.ruanyifeng.com/blog/2017/05/websocket.html