Vue2实现流式输出–新手教程

前言

---

       在传统的前端开发模式下，数据通常是批量加载，等待所有数据加载完成后再一次性呈现给用户。然而，随着大数据🔎和实时应用的崛起，这种一次性加载的方式往往会导致页面加载时间过长，用户体验大打折扣。流式输出则提供了一种全新的解决方案，它允许数据分批加载并在接收到每一部分数据时立即更新视图，从而显著提升了页面响应速度和用户满意度。在接下来的内容中，我将讲述如何在Vue2中，利用SSE技术来实现流式输出。

流式输出🚀

---

       流式输出是一种数据处理和传输方式，它允许数据源连续不断地向接收端发送数据，而无需等待整个数据集准备完毕。在流式输出中，数据可以像水流一样源源不断地传输。在这种模式下，用户可以迅速开始观看或监听，而无需等到所有数据都加载完毕。例如：

---

---

1、SSE技术介绍

---

SSE (Server-Sent Events)🔍即服务器推送事件，是一种基于HTTP的服务器推送技术。它允许服务器实时地向客户端推送数据。在SSE中，客户端通过创建一个EventSource对象来监听来自服务器的事件流。一旦连接建立，服务器就可以开始发送事件到客户端。客户端可以通过监听特定的事件类型来处理这些消息，并在需要时执行相应的操作。

       SSE工作原理

       1、建立连接：

       客户端通过在HTTP请求中设置Accept: text/event-stream来表明其期望接收SSE。
       服务器响应一个持久连接，通常使用HTTP的Content-Type: text/event-stream和Connection: keep-alive头。
 
       2、数据传输：

       服务器通过这个连接发送事件流，每条事件由三部分组成：

            •  event字段：可选，用于标识事件类型。
            •  data字段：必需，包含实际的数据内容。
            •  id字段：可选，用于客户端确认消息的顺序或重播。
             每条事件之间用换行符分隔，每个字段之间用冒号和空格分隔。

      示例事件流：

   event: myEvent
   data: {"message": "Hello, World!"}
   id: 123

 
       3、客户端处理：

       浏览器会自动处理接收到的事件流，并触发一个eventSource对象的message事件。开发者可以注册事件监听器来处理这些事件。
⠀

2、数据准备

---

       本文后端的数据来源是使用Python代码，基于Flask框架进阶实现。具体文章内容请参考Flask框架进阶-Flask流式输出和受访配置–纯净详解版⭐⭐⭐

       在此仅仅强调四点。

       1、 返回数据response的响应头中的Content-Type应该设置成text/event-stream。

       2、返回数据response的响应头中的Cache-Control应该设置成no-cache。

       3、 数据响应要有一个结尾标识"done"。以便于数据流断开链接，避免重复发起请求。

       4、 跨域尽量再后端进行处理，如果跨域再前端处理的话，会出现数据等待，进而无法实现流式输出的效果。
 

3、关键方法实现

---

    connectToSSE() {
      this.eventSource = new EventSource('http://127.0.0.1:5000/llm/request');
      
      this.eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data)//将字符串转换成json格式
        if (data.number !== 'done') {
          this.numbers.push(data.number);
        } else {
          this.eventSource.close();
        }
      };
      
      this.eventSource.onerror = (error) => {
        if (this.eventSource.readyState === EventSource.CLOSED) {
          console.log('Connection to server closed');
        } else {
          console.error('Error occurred:', error);
        }
      };
    }

 

4、代码解析

---

       1、使用new EventSource(url)创建对象。url表示请求数据的地址。

       2、this.eventSource.onmessage = (event) => {}当服务器发送新的SSE事件时，onmessage 事件处理器会被触发。我们在这里对于业务逻辑进行主要编写。比如数据对象的补充。

       3、如果返回的数据为结束标识符"done"，则关闭与SSE源的连接。避免请求多发和资源浪费。

       4、this.eventSource.onerror = (error) =>{}如果SSE连接出现错误，onerror 事件处理器会被触发。及时的关闭数据流，避免长时间的等待，占用内存。

       5、F12，看一下具体请求头和响应头信息。
 

⠀

 

5、实现效果

---

       流式输出效果图如下图所示：
 

---

 

6、完整代码

---

<template>
  <div style="display: flex">
    <div v-for="(number, index) in numbers" :key="index"> {{ number }} </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      numbers: [],
      eventSource: null,
    };
  },
  created() {
    this.connectToSSE();
  },
  methods: {
    connectToSSE() {
      this.eventSource = new EventSource('http://127.0.0.1:5000/llm/request');
      this.eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data) //将字符串转换成json格式
        if (data.number !== 'done') { //判断结束标识
          this.numbers.push(data.number);
        } else {
          this.eventSource.close();
        }
      };
      this.eventSource.onerror = (error) => {
        if (this.eventSource.readyState === EventSource.CLOSED) {
          console.log('Connection to server closed');
        } else {
          console.error('Error occurred:', error);
        }
      };
    }
  },
  beforeDestroy() {
    if (this.eventSource) {
      this.eventSource.close();
    }
  },
};
</script>

 

总结📝

---

       以上就是前端Vue2利用SSE实现流式输出的介绍。目前后端的数据是我的学长使用Python提供，去做一下文章开头所展示的流式输出项目，已经基本完成，gitee代码地址为：llm-chat-demo。该项目的使用手册为：llm-chat-demo项目介绍
       此项目的后端数据调用了阿里通义千问大语言模型API，具体文章内容请参考调用阿里通义千问大语言模型API-小白新手教程-python。