http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html
阮一峰 Server-Sent Events 教程
http://www.ruanyifeng.com/blog/2017/05/websocket.html
阮一峰 WebSocket 教程
1、了解服务器向客户端推送数据的方式
服务端推,指的是由服务器主动的向客户端发送消息(响应)。
当前解决服务端推送的方案有这几个:
a、客户端长轮询
b、websocket双向连接
c、iframe永久帧
他们之间的差异和优缺点
2、SSE(server-send-event)
本质:发送的不是一次性的数据包,而是一个数据流,会连续不断地发送过来。这时,客户端不会关闭连接,会一直等着服务器发过来的新的数据流,视频播放就是这样的例子。本质上,这种通信就是以流信息的方式,完成一次用时很长的下载。
SSE 就是利用这种机制,使用流信息向浏览器推送信息。它基于 HTTP 协议,目前除了 IE/Edge,其他浏览器都支持。
3、SSE和websocket比较:
- SSE 使用 HTTP 协议,现有的服务器软件都支持。WebSocket 是一个独立协议。
- SSE 属于轻量级,使用简单;WebSocket 协议相对复杂。
- SSE 默认支持断线重连,WebSocket 需要自己实现。
- SSE 一般只用来传送文本,二进制数据需要编码后传送,WebSocket 默认支持传送二进制数据。
- SSE 支持自定义发送的消息类型。
4、客户端API:EventSource对象
4.1 EventSource 对象
创建eventSource实例: var source = new EventSource(url);
url是服务器传数据的接口,
也支持跨域:var source = new EventSource(url, { withCredentials: true });
上面的url可以与当前网址同域,也可以跨域。跨域时,可以指定第二个参数,打开withCredentials属性,表示是否一起发送 Cookie。
4.2 基本用法
4.2.1建立连接,触发open。
source.onopen = function(event){}
或者
source.addLisener('open',funcition(event){},false)
4.2.2 客户端收到服务器发来的数据,触发message事件
source.onmessage = function(message){
var data = message.data;
}
source.addLisener('message',funcition(message){},false)
message里面的data就是服务器传回来的数据(文本格式)。
4.2.3 通信出错,触发error事件
source.onerror = function(error){
}
source.addLisener('error',funcition(error){},false)
4.2.4 关闭SSE
source.close();
eventsource是单向通讯,而websocket是双向通讯,所以在一些场景中,我们只需要使用eventSource就可以完成服务器端像客户端推送数据。
3、websocket怎么使用