前端怎么用 EventSource? EventSource怎么配置请求头及加参数？ EventSourcePolyfill使用方法

EventSource

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

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

EventSource 服务器发送事件是单向的。数据消息只能从服务端发送到客户端。

如果想了解更多请查看 EventSource 文档

EventSource使用方式

这里其实和webSocket 使用方式其实很像

这里需要注意 我在网上查了说参数可以配置headers(请求头) 实际使用的时候我这边传入请求头是没有生效（可能是我操作有误吧）

首先先安装EventSource

 npm install eventsource
1

示例代码

//创建一个新的 EventSource 对象的同时，你可以指定一个接受事件的 URI
// 如果需要加参数的话是在url 后面拼接参数 sysm/user/1
  const eventSource = new EventSource('url')
  //与事件源的连接刚打开时触发
  eventSource.onopen = function (e) {
        console.log(e, "连接刚打开时触发");
      };
    /*
       * message：后端返回信息，格式可以和后端协商
       */

      eventSource.onmessage = function (e) {
        console.log(e,'后端返回信息，格式可以和后端协商');
      };
       /*
       * error：错误（可能是断开，可能是后端返回的信息）
       */
      eventSource.onerror = function (e) {
        console.log(e, "连接无法打开时触发");

        eventSource.close(); // 关闭连接
        setTimeout(() => {
        //关闭连接后重新调用 

        }, 5000);
      };
      // 关闭连接
    // eventSource.close();   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

EventSourcePolyfill 是EventSource封装的一个方法，EventSourcePolyfill 可以配置请求头

EventSourcePolyfill可以配置请求头 目前我EventSource配置请求头不生效所以才用 EventSourcePolyfill

首先先安装 EventSourcePolyfill

 npm install event-source-polyfill
1

引用 EventSourcePolyfill

import { EventSourcePolyfill } from "event-source-polyfill";
1

示例代码

// 如果需要加参数的话是在url 后面拼接参数 sysm/user/1
 const eventSource = new EventSourcePolyfill(
        `${process.env.VUE_APP_BASE_API}/sysm/user/1`,
        {
          heartbeatTimeout:3*60*1000,//这是自定义配置请求超时时间  默认是4500ms(印象中是)
          headers: {
            Authorization: "Bearer " + 'token',
          },
        }
      );
      /*
       * open：订阅成功（和后端连接成功）
       */
      eventSource.onopen = function (e) {
        console.log(e, "连接刚打开时触发");
      };
      /*
       * message：后端返回信息，格式可以和后端协商
       */

      eventSource.onmessage = function (e) {
        console.log(e,'后端返回信息，格式可以和后端协商');
        const data = JSON.parse(e.data) || {};//这里后端返回的是字符串所以目前我这边有转换

      };
      /*
       * error：错误（可能是断开，可能是后端返回的信息）
       */
      eventSource.onerror = function (e) {
        console.log(e, "连接无法打开时触发");

        eventSource.close(); // 关闭连接

        setTimeout(() => {

        }, 5000);
      };

      // 需要关闭了
      // eventSource.close();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40