tp5 openapi chatgpt EventSource打印项目总结
未知
2023-08-25 15:37:48
0

 

1、最近速度慢是因为 OpenAI 对于免费账号限速了,在 platform.openai.com 绑定了信用卡的才是之前的正常速度;

2、限速指的是流式请求时,首个 token 返回需要 20 秒左右,而绑定了信用卡的账号,在 2 秒左右;
3, $url =  IP.'/v1/chat/completions';反向代理https://api.openai.com的IP。调用对话接口

<script type="text/javascript">
    var qaIdx = 0,contentIdx=0,answers = [],answerWords=[],typing=false,typingIdx=0,contentEnd=false,answerContent='',codeStart=false,lastWord='',lastLastWord='';
   
    // *发送对话消息
    $(".chatbtn").click(function(){
       
            var message=$(".layui_textarea_inner").val();
            qaIdx+=1;
            $("#user_"+qaIdx).html(message);
            $("#answer_"+qaIdx).html(m'AI思考中……');
         
            $('.scrollbar-wrapper').scrollTop($('.scrollbar-wrapper')[0].scrollHeight);
            // 点击发送按钮后,输入框里的文字恢复原状
            $(".layui_textarea_inner").val('');
            answers[qaIdx] = $('#answer_'+qaIdx);
            
            getAnswer(message,'web',last_id,0,0,modelname);
  
        function getAnswer(messagesa,platform,group_id,prompt_id,role_id,model){
            const url = "/web/duihua/sendText?message="+messagesa+"&platform="+platform+"&group_id="+group_id+"&prompt_id="+prompt_id+"&role_id="+role_id+"&model="+model;
          
            const eventSource = new EventSource(url);
            // open:订阅成功(和后端连接成功)
            eventSource.addEventListener("open", (event) => {
                console.log("连接已建立", JSON.stringify(event));
            });
            // message:后端返回信息,格式可以和后端协商
            eventSource.addEventListener("message", (event) => {
                console.log("接收数据:", JSON.parse(event.data));
                try {
                    var result = JSON.parse(event.data);
                    if(result.code==1001 ){
                        console.log("停止接收数据");
                        layer.msg(result.msg,{icon:2,title:''});
                    }
                    contentIdx  += 1;   

                    // 向数组的末尾添加一个或多个元素,并返回新的长度             
                    answerWords.push(result.word);
                    console.log('开始执行打印函数');

                    //打印文字
                    // 不要用Apache,要用Nginx,似乎是因为Apache对flush()方法支持有问题,无论怎么搞,最终还是一次性输出事件流;
                   typingWords();
                       
                } catch (error) {
                    console.log(error);
                }
            });
            // error:错误(可能是断开,可能是后端返回的信息)
            eventSource.addEventListener("error", (event) => {
                console.error("发生错误:", JSON.stringify(event));
            });
            //echo 'event: close'.PHP_EOL;  告诉前端,结束了,该说再见了
            // echo 'data: Connection closed'.PHP_EOL.PHP_EOL; 告诉前端,连接已关闭会执行下面的代码
            eventSource.addEventListener("close", (event) => {
                console.log("连接已关闭", JSON.stringify(event.data));
                eventSource.close();
                contentEnd = true;
                contentIdx  = 0;
                typingIdx  = 0;
                answerWords  = [];
                console.log((new Date().getTime()), 'answer end');
            });
        }
        function typingWords(){
        
            if(contentEnd && contentIdx==typingIdx){
                clearInterval(typingTimer);
                answerContent = '';
                answerWords = [];
                answers = [];
                qaIdx  += 1;
                typingIdx = 0;
                contentIdx = 0;
                contentEnd = false;
                lastWord = '';
                lastLastWord = '';
                input.disabled = false;
                sendButton.disabled = false;
                console.log((new Date().getTime()), 'typing end');
                return;
            }
           
            if(contentIdx<=typingIdx){
                return;
            }
            if(typing){
                return;
            }
            typing = true;
            if(!answers[qaIdx]){
                answers[qaIdx] = $('#answer_' +qaIdx);
            }
            const content = answerWords;
            if(content.indexOf('`') != -1){
                if(content.indexOf('```') != -1){
                    codeStart = !codeStart;
                }else if(content.indexOf('``') != -1 && (lastWord +  content).indexOf('```') != -1){
                    codeStart = !codeStart;
                }else if(content.indexOf('`') != -1 && (lastLastWord +  lastWord +  content).indexOf('```') != -1){

                    codeStart = !codeStart;
                }
            }         
            lastLastWord = lastWord;
            lastWord = content;          
            answerContent  = content;       
            answers[qaIdx].html(answerContent);
            typingIdx  += 1;
            typing = false;
        }
    })  

</script>
<?php
 // 这行代码设置 HTTP 响应的 Content-Type 为 text/event-stream,这是服务器发送事件(SSE)的 MIME 类型。
            header('Content-Type: text/event-stream');
            // 这行代码设置 HTTP 响应的 Cache-Control 为 no-cache,告诉浏览器不要缓存此响应。
            header('Cache-Control: no-cache');
            // 这行代码设置 HTTP 响应的 Connection 为 keep-alive,保持长连接,以便服务器可以持续发送事件到客户端。
            header('Connection: keep-alive');
            // 这行代码设置 HTTP 响应的自定义头部 X-Accel-Buffering 为 no,用于禁用某些代理或 Web 服务器(如 Nginx)的缓冲。
            // 这有助于确保服务器发送事件在传输过程中不会受到缓冲影响。
            header('X-Accel-Buffering: no');
            $a=['0'=>'天','1'=>'涯','2'=>'何','3'=>'处','4'=>'有','5'=>'我','6'=>'鑫','7'=>'','8'=>'空','9'=>'?'];
  for( $i = 0 ; $i <= 9 ; $i++ ){
   echo 'data: '.json_encode(['code'=>1000, 'word'=>$a[$i]]).PHP_EOL.PHP_EOL;;

   ob_flush();
   flush();
   sleep(1);
}
echo 'event: close'.PHP_EOL; // 告诉前端,结束了,该说再见了
echo 'data: Connection closed'.PHP_EOL.PHP_EOL; // 告诉前端,连接已关闭
exit();

相关内容

掌握 PHP sg15:核...
本文介绍了PHP sg15的核心技术,包括面向对象编程、命名空间、...
2026-02-12 01:23:35
PHP sg15 实战教程...
PHP SG15实战教程:从基础到高级,学习PHP语言安全协议与技...
2026-02-11 01:23:35
探索 PHP sg15 在...
摘要: 本文探讨了PHP的sg15项目在Web开发中的应用,包括...
2026-02-11 01:23:34
PHP sg15 与数据库...
本文介绍了使用PHP与数据库交互的方法,特别是使用sg15框架或库...
2026-02-10 01:23:38
PHP sg15 框架集成...
本文详细介绍了如何将sg15框架集成到PHP项目中,包括准备工作、...
2026-02-10 01:23:36
iPhone 17系列发布...
iPhone 17系列发布,具备技术升级、外观设计精美和良好用户体...
2025-09-20 01:23:46

热门资讯

object json转化为数... //调用api 程序,通知商户订单异常 20200314 public function callt...
tp5 composer we... 问题: 正常使用中的tp5程序需要安装微信支付v3。 tp5使用cmd面板composer requ...
laravel 对接支付宝当面... 第一步 开发中心网页移动应用下支付接入 第二步 创建应用后需添加可支付的方式 第三步 配置公钥与私钥...
tp5 jquery判断手机端... application--common.php中添加如下代码 //函数作用是判断用户打开的是手机端还...
Laravel 查看SQL操作... 方法一:临时打印操作记录 DB::connection()-enableQueryLog(); # ...
php 打印date函数出现错... 问题描述: 我使用的是phpstudy,在练习时间函数的时候,打印出现在的时间,date(Y-m-d...
Laravel 5.5 .No... 创建了新的laravel项目后, 运行提示:No application encryption ke...
生成随机字符唯一标识符guid... /** * @param $length * @return string * 生成随机字符串 */...
php函数substr_rep... php函数substr_replace从某个位置替换或删除或插入字符串
layui缩略图 div class=layui-form-item label class=layui-form-l...