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