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

你可能感兴趣的:(http,SSE,EventSource)