websoket和eventSource

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怎么使用