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();

相关内容

react创建项目命令
react创建项目命令
2024-08-19 20:54:32
tp5中MySQL如何获取...
第一种: // 假设$user是从数据库中查询出的用户信息 $us...
2024-05-10 09:02:51
recv() failed...
宝塔计划任务url访问502
2024-04-29 10:37:24
穿梭框layui.tran...
div id=test1 class=demo-transfer/...
2024-04-09 15:59:09
tp5和layui表单提交...
form class=layui-form layui-form-...
2024-04-09 14:45:31
tp5 layui登录时失...
使用tp5和layui框架结合的登录页面,在首次登录时不出现验证码...
2024-02-26 09:59:58

热门资讯

tp5 jquery判断手机端... application--common.php中添加如下代码 //函数作用是判断用户打开的是手机端还...
Laravel 5.5 .No... 创建了新的laravel项目后, 运行提示:No application encryption ke...
php 打印date函数出现错... 问题描述: 我使用的是phpstudy,在练习时间函数的时候,打印出现在的时间,date(Y-m-d...
生成随机字符唯一标识符guid... /** * @param $length * @return string * 生成随机字符串 */...
layui缩略图 div class=layui-form-item label class=layui-form-l...
php函数substr_rep... php函数substr_replace从某个位置替换或删除或插入字符串
Laravel 引入自定义类库... 强烈建议引入的类 都是含有命名空间的,这样使用起来就不会出现重名的情况。!!当然,没有命名空间也可以...
object json转化为数... //调用api 程序,通知商户订单异常 20200314 public function callt...
Laravel 查看SQL操作... 方法一:临时打印操作记录 DB::connection()-enableQueryLog(); # ...
php银行开放平台接口:pfx... 问题描述: 对接易通银行,他们的服务开放平台是java开发,而我的是php,现在需要php版本的SD...