vue2使用event-source-polyfill建立流式传输对接ChatGPT

最新推荐文章于 2024-06-19 16:00:43 发布

十一（Eleven.）

最新推荐文章于 2024-06-19 16:00:43 发布

阅读量6.5k

点赞数 3

文章标签：前端 vue.js ajax

本文链接：https://blog.csdn.net/qq_40170536/article/details/130408812

版权

安装依赖

cnpm install event-source-polyfill --save

组件中使用

import { EventSourcePolyfill } from "event-source-polyfill";
export default{
  data(){
    sse:"",
  },
  methods:{
  // 建立长连接发送提问
    chatqaAdd() {
      var text = "";//接收返回的内容
      var url="/createSse";//建立长连接的接口
      const eventSource = new EventSourcePolyfill(url, {
        headers: {
          'Authorization': "token,根据需要传"
        }
      });
      eventSource.onopen = (event) => {
        console.log("开始输出后端返回值");
        this.sse = event.target;
      };
      eventSource.onmessage = (event) => {
        if (event.lastEventId == "[TOKENS]") {
        //结束前会返回tokens
          text = text+event.data
          return;
        }
        if (event.data == "[DONE]") {
          // 结束
          return;
        }
        let json_data = JSON.parse(event.data);
        if (json_data.content == null || json_data.content == "null") {
          return;
        }
        text = text + json_data.content;
      };
      eventSource.onerror = (event) => {
        console.log("服务连接异常请重试！");
        if (event.readyState === EventSource.CLOSED) {
          console.log("connection is closed");
        } else {
          console.log("Error occured11111", event);
        }
        event.target.close();
      };
      eventSource.addEventListener("message", (event) => {
        console.log("Message id is " + event.lastEventId);
      });
      this.questionPost();
    },
    // api发送问题
    questionPost() {
      app.ajax.post(
        "chatgpt/chat?userId=1",
        {
          msg: "问题",
          sessionId: 1,//会话id
        },
        (data, rspMsg) => {
          var questionTokens = data.question_tokens;//问题的tokents
        },
        (rspMsg, data) => {
          this.$message.error("请求失败，请重试");
        },
        {}
      );
    },
    //关闭
    stopRequest(){
      if (this.sse) {
        this.sse._close();
      }
    }
  }
}