国产日产欧产精品精品图片,欧美久久久久久久久,成人免费网站视频www

flush();

這里我們定義了我們自己使用的一個(gè)數(shù)據(jù)格式，里邊只放了 time 和 content ，不用解釋都懂，time 是時(shí)間， content 就是我們要返回給前端的內(nèi)容。

注意，回答全部傳輸完畢后，我們需要關(guān)閉連接，可以用以下代碼：

echo?'retry:?86400000'.PHP_EOL;?//?告訴前端如果發(fā)生錯(cuò)誤，隔多久之后才輪詢一次

echo?'event:?close'.PHP_EOL;?//?告訴前端，結(jié)束了，該說(shuō)再見(jiàn)了

echo?'data:?Connection?closed'.PHP_EOL.PHP_EOL;?//?告訴前端，連接已關(guān)閉

flush();

EventSource

前端 js 通過(guò) const eventSource = new EventSource(url); 開(kāi)啟一個(gè) EventSource 請(qǐng)求。

之后服務(wù)器按照 data: {"kev1":"value1","kev2":"value2"} 格式向前端發(fā)送數(shù)據(jù)，前端就可以在 EventSource 的 message 回調(diào)事件中的 event.data 里獲取 {"kev1":"value1","kev2":"value2"} 字符串形式 json 數(shù)據(jù)，再通過(guò) JSON.parse(event.data) 就可以得到 js 對(duì)象。

具體代碼在 getAnswer 函數(shù)中，如下所示：

function?getAnswer(inputValue){

????inputValue?=?inputValue.replace('+',?'{[$add$]}');

????const?url?=?"./chat.php?q="+inputValue;

????const?eventSource?=?new?EventSource(url);



????eventSource.addEventListener("open",?(event)?=>?{

????????console.log("連接已建立",?JSON.stringify(event));

????});



????eventSource.addEventListener("message",?(event)?=>?{

????????//console.log("接收數(shù)據(jù)：", event);

????????try?{

????????????var?result?=?JSON.parse(event.data);

????????????if(result.time?&&?result.content?){

????????????????answerWords.push(result.content);

????????????????contentIdx?+=?1;

????????????}

????????}?catch?(error)?{

????????????console.log(error);

????????}

????});



????eventSource.addEventListener("error",?(event)?=>?{

????????console.error("發(fā)生錯(cuò)誤：",?JSON.stringify(event));

????});



????eventSource.addEventListener("close",?(event)?=>?{

????????console.log("連接已關(guān)閉",?JSON.stringify(event.data));

????????eventSource.close();

????????contentEnd?=?true;

????????console.log((new?Date().getTime()),?'answer?end');

????});

}

打字機(jī)效果

對(duì)于后端返回的所有回復(fù)內(nèi)容，我們需要用打字機(jī)形式打印出來(lái)。

最初的方案是

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]?=?document.getElementById('answer-'+qaIdx);
????}

????const?content?=?answerWords[typingIdx];
????if(content.indexOf('')?!=?-1){<br>????????if(content.indexOf('`')?!=?-1){<br>????????????codeStart?=?!codeStart;<br>????????}else?if(content.indexOf('')?!=?-1?&&?(lastWord?+?content).indexOf('`')?!=?-1){<br>????????????codeStart?=?!codeStart;<br>????????}else?if(content.indexOf('')?!=?-1?&&?(lastLastWord?+?lastWord?+?content).indexOf('``')?!=?-1){<br>????????????codeStart?=?!codeStart;<br>????????}<br>????}<br><br>????lastLastWord?=?lastWord;<br>????lastWord?=?content;<br><br>????answerContent?+=?content;<br>????answers[qaIdx].innerHTML?=?marked.parse(answerContent+(codeStart?'\n\n``':''));

????typingIdx?+=?1;
????typing?=?false;
}