一比一实现ChatGPT流式接口前端显示效果(打字机效果)【对比几种不同的流式实现方案】

前端实现GPT或者其他大模型的流式推送的数据接收可以通过EventSourceAxios、或者基于EventSource实现的@microsoft/fetch-event-source插件库;

GPT官方是基于原生EventSource实现的流式数据接收,我们作为个人开发使用可以使用Axios或者使用@microsoft/fetch-event-source插件库,后两种可以携带header并且操作接口请求参数格式较为自由

话不多说,直接开始(注:以下代码基于vue)

方案一 EventSource

javascript 复制代码
sendSSEMessage() {
      // 只有当eventSource不存在时才创建新的EventSource连接
      if (!this.eventSource) {
        this.messages.push({text: this.inputText, isMine: true});
        this.messages.push({text: "", isMine: false});

        // 创建新的EventSource连接
        this.eventSource = new EventSource('http://127.0.1.1:8383/completions?messages='+this.inputText);

        // 设置消息接收的回调函数
        this.eventSource.onmessage = (event) => {
          const data = JSON.parse(event.data);
          this.messages[this.messages.length - 1].text += data.choices[0].delta.content;
        };

        // 可选:监听错误事件,以便在出现问题时能够重新连接或处理错误
        this.eventSource.onerror = (event) => {
          console.error("EventSource failed:", event);
          this.eventSource.close(); // 关闭出错的连接
          this.eventSource = null; // 重置eventSource变量,允许重建连接
        };
      }
    }

异常处理和重连

处理连接中断或其他异常也是至关重要的。你可能需要在失去连接时尝试重新连接,或者至少提醒用户当前的连接状态。这可以通过监听EventSource的错误事件并采取适当的行动来实现。

如果需要携带header或者其他参数可以考虑使用更完善的插件库@microsoft/fetch-event-source,我自己开发的GPT4.0网站也是基于这个插件库实现的,

这里给自己网站打个广告--->>欢迎各位看官老爷点击这里参观

--重回正题--

方案二 @microsoft/fetch-event-source插件库(更好用的SSE库)

1.首先从@microsoft/fetch-event-source中引入fetchEventSource

javascript 复制代码
import { fetchEventSource } from '@microsoft/fetch-event-source';
javascript 复制代码
   async sseSendStream(){
   			let that = this
            let token = "获取token";
            let tokens = "Bearer" + ' ' + token;

            let params =  {
                "model": that.gptmodel,
                "stream": true,
                "convGroupId": that.convGroupId,
                "parentConvId": that.convId,
                "request": that.inputText,
            }
            that.inputText = ""; //发送请求前将输入清空
            return new Promise((resolve, reject) => {
                try {
                    let concateContent = "";
                    fetchEventSource(url, {
                        method: 'post',
                        headers: {
                            'Content-Type': 'application/json',
                            "Accept": "text/event-stream",
                            "Authorization": tokens,
                        },
                        responseType: 'text/event-stream',
                        body: JSON.stringify(params),
                        signal: that.controller.signal,
                        openWhenHidden: true,
                        async onopen(response) {//建立连接的回调},
                        onmessage(msg) {//接收一次数据段时回调,因为是流式返回,所以这个回调会被调用多次
                            if(msg.event==''){
                                //进行连接正常的操作
                                try{
                                    const dataObj = JSON.parse(msg.data)
                                    // 检查数据块是否包含有效的content字段
                                    if (dataObj) {
                                        // 将content字段的值拼接到结果字符串中
                                        concateContent += dataObj.choices[0].delta.content;
                                        that.dialogueList[that.dialogueList.length - 1].text = concateContent
                                    }
                                }catch (e){
                                }
                            }else if (msg.event === 'close') {
                                //连接错误的操作
                                reject('close error')
                            }
                        },
                        onclose() {//正常结束的回调
                           //在这里写一些GPT回答结束后的一些操作
                        },
                        onerror(err) {//连接出现异常回调
                            // 取消请求
                            reject(err); // 发生错误,拒绝 Promise
                            throw err
                        },
                    })
                } catch (e) {
                    reject(e); // 拒绝 Promise
                }
            });
        },
  1. 通过 fetchEventSource(url, {...}) 发送 SSE 请求。
  2. 传递给 fetchEventSource 的参数包括请求的方法、头部信息、请求体、信号等
  3. onopen(response):建立连接时的回调函数。
  4. onmessage(msg):接收到数据时的回调函数。由于 SSE 是流式传输,所以这个回调函数会被多次调用。在这个回调函数中,首先检查是否发生了用户手动取消请求的情况,然后根据消息的类型进行相应的处理
  5. onclose():正常结束连接时的回调函数。
  6. onerror(err):连接出现异常时的回调函数。
  7. onmessage 回调函数中,根据接收到的消息进行相应的处理。如果消息类型为空字符串,则表示连接正常,对数据进行解析和处理;如果消息类型为 'close',则表示连接错误

axios方案暂时先不写了,还是更推荐上面两种正儿八经的SSE推送接收方案,希望各位都能用上接的大模型,

也可以直接访问我的半公益网站使用GPT,点我嗷...(呸,又一次广告...)

相关推荐
贩卖纯净水.2 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
LuckyLay11 分钟前
Spring学习笔记_27——@EnableLoadTimeWeaving
java·spring boot·spring
向阳121823 分钟前
Dubbo负载均衡
java·运维·负载均衡·dubbo
懒惰才能让科技进步27 分钟前
从零学习大模型(十二)-----基于梯度的重要性剪枝(Gradient-based Pruning)
人工智能·深度学习·学习·算法·chatgpt·transformer·剪枝
Gu Gu Study33 分钟前
【用Java学习数据结构系列】泛型上界与通配符上界
java·开发语言
yyfhq35 分钟前
sdnet
python
测试199842 分钟前
2024软件测试面试热点问题
自动化测试·软件测试·python·测试工具·面试·职场和发展·压力测试
love_and_hope42 分钟前
Pytorch学习--神经网络--搭建小实战(手撕CIFAR 10 model structure)和 Sequential 的使用
人工智能·pytorch·python·深度学习·学习
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
WaaTong1 小时前
《重学Java设计模式》之 原型模式
java·设计模式·原型模式