SSE 中的事件类型及其对应的用途-JavaScript中文网-JavaScript教程资源分享门户

HTML5 中推出的 Server-Sent Events（简称 SSE），是一种在 Web 浏览器上使用基于 HTTP 协议的单向实时消息传递的技术。SSE 常用于前端实现推送服务，是一个很重要的前端技术。本文将介绍 SSE 中的事件类型及其对应的用途。

SSE 事件类型

SSE 事件类型如下：

这是 SSE 最常用的事件类型。当服务器向客户端发送新的消息时，就会触发一个 message 事件。这个消息被存储在 event.data 中。可以通过 addEventListener 来监听 message 事件。

示例代码：

const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', event => {
  console.log(event.data);
});

当浏览器与服务器建立 SSE 连接时，会触发一个 open 事件。这个事件触发后，可以做一些与 SSE 相关的初始化操作。

示例代码：

const eventSource = new EventSource('/sse');
eventSource.onopen = () => {
  console.log('SSE 连接已经建立！');
};

当与服务器的 SSE 连接中断时，会触发一个 error 事件。这个事件可以用来处理连接断开后的一些操作。

示例代码：

const eventSource = new EventSource('/sse');
eventSource.onerror = () => {
  console.log('连接已断开！');
};

SSE 事件可以用于实现许多功能，如实时聊天、关注/订阅等。因为 SSE 是基于 HTTP 协议的，所以它不需要任何其他的协议或库，也不需要 WebSocket 中的“握手”和“帧”的概念，体积更小，使用更简单，而且可以做到实时性更高。

本文介绍了 SSE 中的三种事件类型：message、open 和 error，以及它们对应的用途。SSE 是一个强大的前端技术，可以做到实时推送和服务器端推送数据，而且非常容易使用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64ce30e0b5eee0b52561bb4c