長連接：ChatGPT流式響應背后的邏輯
一、前言：
提起長連接，我們并不陌生，最常見的長連接非websocket莫屬了。即使沒有在項目中實際用過，至少也應該有所接觸。長連接指在一次網(wǎng)絡通信中，客戶端與服務器之間建立一條持久的連接，可以在多次請求和響應中重復使用該連接。這種方式的優(yōu)點是減少了連接建立和關閉的開銷，提高了通信效率，但需要注意控制連接的數(shù)量，避免資源浪費。短連接則是每次請求和響應都建立一個新的連接，完成后立即關閉，需要頻繁進行連接建立和關閉，效率相對較低。但是這種方式更加靈活，適用于請求量較小、請求頻率不高的場景。
二、背景：
最近項目在引用ChatGPT智能小助手，最開始采用的是當ChatGPT回答完成后一次性返回答案。但這種方式受限于網(wǎng)絡及服務較慢的原因導致用戶需要等待較長時間，極大的降低了用戶的使用體驗。經(jīng)過項目組成員商議決定采取答案逐字返回的形式，以便于用戶能更快的得到反饋。
關于長連接技術，主要考慮兩種方案websocket和sse
三、原理：
1.websocket概念：WebSocket是HTML5定義的新協(xié)議，實現(xiàn)了服務器與客戶端之間的全雙工通信。WebSocket連接一旦建立，客戶端和服務器端處于平等地位，可以相互發(fā)送數(shù)據(jù)，不存在請求和響應的區(qū)別。
2、websocket優(yōu)劣勢：優(yōu)勢在于實現(xiàn)了雙向通信，劣勢在于服務器端的邏輯非常復雜?，F(xiàn)在針對不同的后臺語言有不同的插件可以使用。
3、sse概念：SSE（Server-Sent Events）是HTML5新增的功能，允許服務器將數(shù)據(jù)推送到客戶端。與長輪詢和短輪詢不同，SSE不需要客戶端先發(fā)送請求，而是在服務器端數(shù)據(jù)有更新時立即發(fā)送到客戶端
4、sse優(yōu)劣勢：優(yōu)勢在于節(jié)約資源，提升應用性能。SSE可以實現(xiàn)只要服務器端數(shù)據(jù)有更新，就可以馬上發(fā)送到客戶端，不需要建立或保持大量的客戶端發(fā)往服務器端的請求。另外，SSE的實現(xiàn)非常簡單，并且不需要依賴其他插件。劣勢在于不是雙向通信，只能后臺向前臺推送。
5、相同點：都是基于tcp，都是可靠的傳輸協(xié)議
6、不同點：
- WebSocket是雙向通信協(xié)議，模擬Socket協(xié)議，可以雙向發(fā)送或接受信息
- HTTP是單向的
- WebSocket是需要瀏覽器和服務器握手進行建立連接的
- 而http是瀏覽器發(fā)起向服務器的連接，服務器預先并不知道這個連接
四、應用：
1、sse在chatgpt中的應用
前端代碼
import { fetchEventSource } from '@microsoft/fetch-event-source'
let answerContent = ''
fetchEventSource('/chatgptApi/chatgpt_qa_stream', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ messages }),
async onopen(response) {
if (response.ok && response.status === 200) {
console.log('連接成功')
} else {
console.log('連接異常')
}
},
async onmessage(event) {
// 表示整體結束
if (event.data === '[DONE]') {
console.log('結束')
return
}
if (event.data) {
const data = JSON.parse(event.data)
answerContent += data.content
}
},
async onerror(error) {
console.error('Error:', error)
},
async onclose() {
console.log('關閉連接')
}
})后端代碼
const http = require('http');
const yun = express();
const eventServer = http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
'Access-Control-Allow-Origin': "*",
'Access-Control-Allow-Headers': 'Content-Type,Content-Length,Authorization,Accept,X-Requested-With',
'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS'
});
setInterval(() => {
// 事件要用兩個\n結束
res.write('data: The server time is: ' + new Date() + '\n\n');
}, 1000);
req.connection.addListener('close', () => {
console.log('SSE connection closed!');
}, false);
}).listen(4001);
2、websockt在即時聊天中的應用
前端代碼
// 創(chuàng)建WebSocket對象
let ws = new WebSocket('ws://localhost:8888')
// 連接成功后的回調(diào)函數(shù)
ws.onopen = function (params) {
console.log('客戶端連接成功')
// 向服務器發(fā)送消息
ws.send('hello')
};
// 從服務器接受到信息時的回調(diào)函數(shù)
ws.onmessage = function (e) {
console.log('收到服務器響應', e.data)
};
// 連接關閉后的回調(diào)函數(shù)
ws.onclose = function(evt) {
console.log("關閉客戶端連接");
};
// 連接失敗后的回調(diào)函數(shù)
ws.onerror = function (evt) {
console.log("連接失敗了");
};
// 監(jiān)聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，這樣服務端會拋異常。
window.onbeforeunload = function() {
ws.close();
}后端代碼
/ 引入插件
const ws = require('nodejs-websocket')
// 只要有用戶鏈接，函數(shù)就會執(zhí)行，會給當前鏈接的用戶創(chuàng)建一個connect對象
const server = ws.createServer((connect)=>{
console.log('連接成功')
// console.log(connect)
// 注冊text事件 ，接收用戶傳遞過來的數(shù)據(jù)
connect.on('text',data=>{
console.log('接收客戶端數(shù)據(jù)---->', data)
// 給所有用戶發(fā)送消息
broadcast(server,data+"--返回數(shù)據(jù)")
})
// 連接斷開，觸發(fā)事件close
connect.on('close',()=>{
console.log('用戶鏈接斷開--close')
})
// 用戶鏈接斷開
connect.on('error',err=>{
console.log('err', err)
})
}).listen(3001,()=>{
console.log('websocket服務啟動成功了')
})
// 給所有人發(fā)消息
function broadcast(server,msg){
server.connections.forEach(element => {
element.send(msg)
});
}五、效果：
sse在chatgpt案例中的應用
作者：京東物流 田雷雷
來源：京東云開發(fā)者社區(qū) 自猿其說Tech
