使用Fetch替换EventSource

        前几天做了一个项目,需要用到SSE(Server-Send Events)技术,在前端中,我们一般是通过EventSource来实时接收后端传来的数据。

        EventSource建立连接非常简单,直接通过其构造函数即可。

const eventSource = new EventSource(url);

        监听服务器发送的数据:

eventSource.onmessage = function (event) { 
    console.log(event.data); 
};

        常理说就能读取服务器中的数据了,不过我在做项目时用该方法迟迟没有读取到服务器传过来的数据,而且在本地浏览器中是可以读取数据的,困扰了很长时间,然后向大佬请教,大佬直接发我他写的使用Fetch替换EventSource的方法,拿着代码稍微改造了一下,成功读取数据,给大家分享一波。

async function myEventSource(url) {
  const resp = await fetch(url);
  if (resp.ok) {
    const reader = resp.body.getReader();
    let accumulatedData = ''; // 用于累积数据
    while (SSE.value) {       // SSE.value设置成true,并在组件生命周期调用销毁的钩子时设置为false
      const { value, done } = await reader.read();
      if (done) {
        break;
      }
      accumulatedData += new TextDecoder().decode(value);
      // 检查是否完整接收了一条 SSE 事件数据, 如果不是完整的数据, 就要返回循环, 继续读取数据
      if (accumulatedData.includes('\n\n')) {
        try {
          const currentInfo = JSON.parse(eventData).data.data;  // 将数据转换成JSON格式
        } catch (error) {
          console.log(error);
        }
        accumulatedData = remainingData; // 处理完一条数据后,将剩余数据留作下一次拼接
      }
    }
  }
}

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值