前端SSE(Server Sent Events)长连接

548 阅读1分钟

SSE(Server Sent Events)长链接

通常来说,我们开发过程中使用最多的请求方式,就是使用AJAX向服务端发起请求,服务端得到请求后按实际业务情况进行数据返回,然后结束连接,下次还有需要就再继续发起,这样一来一回。

而在某种业务情况下我们需要与服务端保持持久化连接来获得到实时的数据,大多数人第一想到的就是使用WebSocket,但有时我们仅仅是想得到实时数据,并无需与服务端做数据交互,那么这情况下还用WebSocket,多少显得有点繁杂了。

EventSource 接口是 web 内容与服务器发送事件通信的接口。

一个 EventSource 实例会对HTTP服务器开启一个持久化的连接,以text/event-stream 格式发送事件,此连接会一直保持开启直到通过调用EventSource.close()关闭。

// 创建一个新的 EventSource,用于从指定的 URL 接收服务器发送事件,可以选择开启凭据模式。
//let pc = new EventSource(url, configuration);

//示例
let evtSource = new EventSource("sse.php");
let eventList = document.querySelector("ul");

evtSource.onmessage = function (e) {
  let newElement = document.createElement("li");

  newElement.textContent = "message: " + e.data;
  eventList.appendChild(newElement);
};

// 关闭连接
// evtSource.close()

参数

属性描述
url它代表远程资源的位置
configurationEventSource接口的withCredentials默认false,该值指示EventSource对象是否是用CORS凭据集实例化的。

事件

属性描述
open在与事件源的连接打开时触发。
message在从事件源接收到数据时触发。
error在事件源连接未能打开时触发。
close用于关闭当前的连接。
自定义事件当接收到自定义事件时触发。

浏览器兼容情况

image.png

详细文档介绍:点击前往