前端如何接收EventStream中的数据？

本文目录

1、fetch
2、EventSource

fetch

fetch是浏览器内置的方法无需下载

fetch("http://127.0.0.1:6594/ws/getAccessToken", {
        method: "get",
      })
        .then((response) => {
          const decoder = new TextDecoder("utf-8");
          let buffer = [];
          const reader = response.body.getReader();
          function read() {
            reader.read().then(function processText({ done, value }) {
              if (done) {
                return buffer;
              }
              const chunk = decoder.decode(value, { stream: false });
              buffer.push(buffer)
              console.log(chunk);
              read();
            });
          }
          return read();
        })
        .then((result) => {
          console.log(result);
        })
        .catch((error) => console.log("error", error));

发送请求后浏览器显示的效果

可以接收到了！

EventSource

EventSource 是用于接收服务器端发送的服务器推送事件（Server-Sent Events，SSE）的接口。它允许客户端从服务器端获取实时更新，是一种基于 HTTP 的单向通信机制。

const es = new EventSource("http://127.0.0.1:6594/ws/getAccessToken");
      es.onmessage = function (e) {
        console.log(e.data);
        setTimeout(()=>{
          es.close() //4秒后关闭服务器的推送
        },4000)
      };