初接触SSE(简单了解)

为什么会接触到SSE以及什么是SSE

本次需求中需要在页面中实时获取接口返回的信息状态，即：服务端主动向客户端推送消息，使客户端能够即时接收到信息。
这种情况会用到的场景有：聊天 弹幕 实时更新数据 网站在线的实时人数 电商大促的实时成交额 页面的点赞和消息提醒
SSE(Server Sent Event)：直译为服务器发送事件，基于 HTTP 协议中的持久连接，作为 HTML5 出现的新功能，不用客户端一直向服务器发请求，而是当服务器数据发生改变，直接对客户端响应
简单来说，也就是客户端可以获取到服务器发送的事件。我们常见的 http 交互方式是客户端发起请求，服务端响应，然后一次请求完毕；但是在 sse 的场景下，客户端发起请求，连接一直保持，服务端有数据就可以返回数据给客户端，这个返回可以是多次间隔的方式
SSE的特点：

• 长连接
• 单通道，只能服务端向客户的发消息 只支持get请求
• 默认支持短线重连
• http协议
• 文本传输
• 支持自定义发送消息类型

前端如何使用SSE

// 1、先判断当前浏览器是否支持SSE
if (window.EventSource){
// 2、声明EventSource方法 有两个参数 参数一：要请求的后端地址 参数二：第二个参数是可选的，如果要填就只能填{withCredentials:true}或{withCredentials:true}，表示发送或不发送Cookie
  var source = new EventSource('https://localhost:8080/sse/userConnect');
}
console.log('source:', source);
// 3、监听接受数据的事件
eventSource.addEventListener("onmessage",
	function(event) {console.log(event.data)}
);

source 默认有三个方法：onopen、onmessage、onerror
分别表示客户端和后端建立了连接、客户端接收到了来自后端的数据、客户端报错这三个场景
关闭SSE连接

// 4、关闭SSE连接
source.close()

参考文档：
参考文档一
参考文档二：请求的时候需要添加请求头
参考文档三：文档接口
参考文档四：官方文档
参考文档五：SSE用post请求