SSE之EventSource学习

        SSE 的客户端 API 部署在EventSource对象上，EventSource是一个用于接收服务器发送的事件流的API。它允许客户端通过HTTP连接订阅服务器端的事件，并在服务器端发送事件时接收到通知。

        使用EventSource非常简单，只需要在客户端创建一个新的EventSource对象，然后指定要连接的服务器端URL即可。一旦连接建立，服务器端发送的事件将会被自动接收并触发相应的事件处理函数。

EventSource属性有：

• readyState: 表示EventSource对象的状态，有三种可能的值：CONNECTING（连接中）、OPEN（已连接）、CLOSED（已关闭）。

  0：相当于常量EventSource.CONNECTING，表示连接还未建立，或者断线正在重连。
  1：相当于常量EventSource.OPEN，表示连接已经建立，可以接受数据。
  2：相当于常量EventSource.CLOSED，表示连接已断，且不会重连。

• url: 表示EventSource对象连接的服务器端URL。
• withCredentials: 表示是否携带跨域请求的凭据，可以设置为true或false。

  var source = new EventSource(url, { withCredentials: true });

EventSource 的工作原理：

1. 客户端向服务器发起 HTTP GET 请求，请求一个特定的 URL。
2. 服务器接收请求，并在 HTTP 头中添加 "Content-Type: text/event-stream"。
3. 服务器建立一个持续的 HTTP 连接，向客户端发送数据，直到连接被关闭。
4. 当服务器有新的事件数据要发送时，它将这些数据以特定的格式发送给客户端。事件数据格式如下： 

   data: eventData; //事件数据
   event：eventName; //事件名
   id：id; //数据标识符，相当于每一条数据的编号
   retry //指定浏览器重新发起连接的时间间隔
   

5. 客户端通过 EventSource 对象注册事件处理函数，以接收来自服务器的事件数据（文本格式）。当客户端接收到来自服务器的事件数据时，它将创建一个 Event 对象，并触发相应的事件处理函数，传递 Event 对象作为参数。Event 对象包含以下属性：

   type：事件类型，通常为 "message"。 
   data：事件数据。 
   lastEventId：上一个事件的 ID。 
   origin：事件源的 URL。

6. 当连接出现错误或被关闭时，客户端将触发 "error" 事件或 "close" 事件，以便进行错误处理或重新连接。

附录： 

        在这里想强调一下服务器的EventSource 的工作原理：中的第四点的event事件，event字段表示是自定义的事件类型，默认是message事件。浏览器可以用addEventListener()监听该事件。

服务器：

event: foor

客户端：

source.addEventListener('foor', function (event) {
  var data = event.data;
  // handle message
}, false);

参考与推荐： 更详细版本强烈推荐大家一定一定要阅读阮一峰大大的文章！！！太详细了！！！

javascript EventSource：实时服务器端推送 - 掘金 (juejin.cn)

Server-Sent Events 教程 - 阮一峰的网络日志 (ruanyifeng.com)

EventSource: EventSource() constructor - Web APIs | MDN (mozilla.org)