ChatGPT 的打字回覆效果,原理是什麼?我帶你們實現!
前言
大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心。
chatGPT 回覆效果
相信使用過 chatGPT 的朋友,都會看到,當你提問一個問題時,chatGPT 會一字一字地給你展示出來,而不是一次性給你返回,如下圖:
這樣做的好處,我想應該是節省性能吧,並且應該也是因爲 AI 需要一邊學習,一邊把學習到的結果返回到前端,所以需要這樣持續輸出
怎麼實現的?
一開始我聯想到 Websocket,因爲它能做到跟前端建立長連接,不斷向前端輸送東西,但是我一打開 Network 界面,看到用的不是 Websocket,而是 Server-sent events
Server-sent events
一個網頁獲取新的數據通常需要發送一個請求到服務器,也就是向服務器請求的頁面。使用 server-sent 事件,服務器可以在任何時刻向我們的 Web 頁面推送數據和信息。這些被推送進來的信息可以在這個頁面上作爲 Events + data 的形式來處理。
EventSource
想要使用 Server-sent events,就不得不依賴到一個 API —— EventSource
實現
接下來帶大家來簡單實現以下吧!
Nodejs 起服務
Nodejs 起服務需要注意幾個響應頭
-
'Content-Type': 'text/event-stream'
-
'Connection': 'keep-alive'
-
'Access-Control-Allow-Origin': '*'
const http = require('http');
// 將歌詞變成一個數組
let song = [
'我', '懶', '得', '寫', '你', '谷', '搜', '到', '處', '皆', '只', '因', '你',
'太', '美', '淺', '唱', '動', '人', '說', '不', '出', '我', '試', '着', '多',
'看', '你', '一', '眼', '卻', '發', '現', '我', '已', '沉', '溺', '於', '你',
'的', '鏡', '頭', '裏', '只', '因', '你', '太', '美', '所', '以', '我', '多',
'看', '了', '一', '眼', '只', '因', '我', '太', '傻', '所', '以', '我', '放',
'不', '開', '你', '的', '手', '只', '因', '你', '太', '美', '所', '以', '我',
'做', '了', '個', '夢', '夢', '見', '你', '在', '微', '笑', '我', '在', '注',
'視', '只', '因', '你', '太', '美', '所', '以', '我', '放', '了', '你', '的',
'手', '所', '以', '我', '會', '微', '笑', '因', '爲', '你', '太', '美', 'end'
];
http.createServer((req, res) => {
if (req.url === '/article') {
res.writeHead(200, {
// 開啓 Server-sent events
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
// 保持連接
'Connection': 'keep-alive',
// 允許跨域
'Access-Control-Allow-Origin': '*'
});
let index = 0;
// 模擬每隔0.5s向前端推送一次
setInterval(() => {
const s = song[index];
if (s) {
res.write(`data: ${song[index]}\n\n`);
} else {
res.write('0');
}
index++;
}, 500);
}
}).listen(3000);
console.log('Server running at http://localhost:3000/');
前端
// 建立連接
const source = new EventSource('http://localhost:3000/article');
let str = '';
// 接收信息
source.onmessage = function (e) {
if (e.data === 'end') {
// 判斷end,關閉連接
source.close()
}
str += e.data
// 實時輸出字符串
console.log(str)
};
效果
現在我們可以去前端看效果:
我們只需要把這個字符串,實時渲染到頁面上就行了,就能實現一個字一個字打出來的效果!!!!!
結語
我是林三心,一個熱心的前端菜鳥程序員。如果你上進,喜歡前端,想學習前端,那咱們可以交朋友,一起摸魚哈哈,摸魚羣,關注我,拉你進羣,有 5000 多名前端小夥伴在等着一起學習哦 -->
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/3ah4ReA_VeXxJ7vyruefdw