EventStream 处理实时数据流

简介

text/event-stream 和 application/octet-stream 本质上都是客户端与服务端打开了一个长连接，服务端可以多次写入一部分数据给客户端，客户端可以多次读取，直到全部读取完成。使用场景很多，例如：模拟机器人回复，几个词几个词的展示。

下面我就以最近的一个功能需求为例，展示一下该如何使用event-stream：

streamBack() {
      const url = "/api/...";
      this.contentItems = [];
      fetchEventSource(url, {
        method: "POST",
        headers: {
          "Content-type": "application/json",
          Accept: "text/event-stream",
        },
        body: JSON.stringify(this.params),
        onopen: (response) => {
          if (response.status == "500") {
            this.$message.error("服务器忙，请稍后再试.");
          } else {
            return;
          }
        },
        onmessage: (event) => {
          console.log("event", event, JSON.parse(event.data).answer);
          // 将消息添加到页面上的某个元素中
          const newItem = {
            id: Date.now(),
            content: JSON.parse(event.data).answer
              ? JSON.parse(event.data).answer.replace(/\n/g, "
")
              : "",
          };
          this.contentItems.push(newItem);
        },
        onclose: (ee) => {
          this.$emit('closeLoad')
        },
        onerror: (error) => {
          // 关闭流
          // controller.abort()
          // 返回报错流
          console.log("error", error);
          return 5000;
          // throw error
        },
      });
    },

 <span
    v-for="(item, index) in contentItems"
    :key="index"
    class="streaming-item"
    :style="{ animationDelay: `${index * 0.1}s` }"
 >
  <span v-html="item.content">span>
span>

.streaming-item {
  opacity: 0;
  animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}