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