SSE通信

一,什么是SSE

1.SSEServer-Send Events)是基于 HTTP协议中的持久连接

2.是一种服务端向客户端推送信息的单向通信方法

二,EventSource

1.SSE具有由 W3C 标准化的网络协议

2.EventSourceSSE客户端接口

三,前端使用SSE通信

1.使用EventSource建立连接

let source = new EventSource('http://xxx.xxx/sse/' + id')

2.监听连接完成

source.onopen = function(event){
	console.log(event)
}

3.接受信息

source.onmessage= function(event){
	console.log(event.data)
}

4.监听错误事件

source.onerror= function(event){
	console.log(event.readyState)
}

5.断开SSE通信

source.close();

6.如上几个事件中,每一个事件对象都有都有readyState表示连接状态

event.readyState == EventSource.CONNECTING //0 连接尚未建立,或已关闭且客户端正在重新连接
event.readyState == EventSource.OPEN //1  客户端有一个打开的连接并在接收到事件时处理它们
event.readyState == EventSource.CLOSED //2 连接未打开,并且客户端未尝试重新连接,要么出现致命错误,要么调用了 close() 方法

四,传递header参数

1.EventSource不支持headers参数

五,注意事项

1.可以在onerror中处理一下EventSource断线重连的问题。

var source = new EventSource('your/api/url');
source.onerror = function() {
  source.close();
  source = new EventSource('your/api/url'); // 重新连接
};

2.使用EventSource传输,传输内容一定是text/event-stream的,即后台要设置返回的content-typetext/event-stream

你可能感兴趣的:(接口技术,前端,javascript,网络)