fetchEventSource

最新推荐文章于 2025-03-13 13:24:55 发布

weixin_45713857

最新推荐文章于 2025-03-13 13:24:55 发布

阅读量4.3k

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_45713857/article/details/139766451

版权

sse 长链接,window中有一个叫EventSource的构造函数。一个EventSource实例会对服务器开启一个持久化的连接，以text/event-stream格式发送事件，此连接会一直保持开启直到通过调用EventSource.close()关闭。但使用EventSource时只能把参数加到url后面，而且也不能像fetch请求那样设置header等参数。借助fetch-event-source这个库就可以像发起fetch请求一样发起服务器单向通信请求。

它声明了fetchEventSource的第2个参数的类型。参数一共有7个。
headers 请求头。

onopen 连接建立时的回调函数，如果没有设置会调用默认的defaultOnOpen，这个默认回调里进行了返回值类型判断。
onmessage每次收到消息时的回调函数，参数是消息对象，它的类型就是parse.ts中定义的EventSourceMessage。

onclose 连接关闭时的回调函数。

onerror连接发送错误时的回调函数，如果没有指定这个回调或返回undefined就会发起重新连接请求。

openWhenHidden 默认为false，监听visibilitychange，当页面不可见时关闭连接，当页面重新可见时重新打开连接。

let ctrlAbout = new AbortController()
let eventSourcepost = fetchEventSource(
      你的url,
      {
        method: 'post',
        headers: {
          t: getCookie('t'),
          satoken: getCookie('satoken'),
          'Content-Type': 'application/json'
        },
        signal: ctrlAbout.signal,
        body: JSON.stringify(data),
        openWhenHidden: true,//默认为false，监听visibilitychange，当页面不可见时关闭连接，当页面重新可见时重新打开连接。
        onmessage(event) {
         
          // 成功之后操作
          console.log("成功之后操作")
        },
        onerror() {
          console.log(11)
          // 服务异常
        },
        onclose() {
          // 服务关闭
        }
      }
    )

参考文章:fetch-event-source库使用源码学习_JavaScript_脚本之家