一、前言：

提起長連接，我們并不陌生，最常見的長連接非websocket莫屬了。即使沒有在項目中實際用過，至少也應該有所接觸。長連接指在一次網絡通信中，客戶端與服務器之間建立一條持久的連接，可以在多次請求和響應中重復使用該連接。這種方式的優(yōu)點是減少了連接建立和關閉的開銷，提高了通信效率，但需要注意控制連接的數量，避免資源浪費。短連接則是每次請求和響應都建立一個新的連接，完成后立即關閉，需要頻繁進行連接建立和關閉，效率相對較低。但是這種方式更加靈活，適用于請求量較小、請求頻率不高的場景。

二、背景：

最近項目在引用ChatGPT智能小助手，最開始采用的是當ChatGPT回答完成后一次性返回答案。但這種方式受限于網絡及服務較慢的原因導致用戶需要等待較長時間，極大的降低了用戶的使用體驗。經過項目組成員商議決定采取答案逐字返回的形式，以便于用戶能更快的得到反饋。

關于長連接技術，主要考慮兩種方案websocket和sse

(資料圖片)

三、原理：

1.websocket概念：WebSocket是HTML5定義的新協(xié)議，實現了服務器與客戶端之間的全雙工通信。WebSocket連接一旦建立，客戶端和服務器端處于平等地位，可以相互發(fā)送數據，不存在請求和響應的區(qū)別。

2、websocket優(yōu)劣勢：優(yōu)勢在于實現了雙向通信，劣勢在于服務器端的邏輯非常復雜?，F在針對不同的后臺語言有不同的插件可以使用。

3、sse概念：SSE（Server-Sent Events）是HTML5新增的功能，允許服務器將數據推送到客戶端。與長輪詢和短輪詢不同，SSE不需要客戶端先發(fā)送請求，而是在服務器端數據有更新時立即發(fā)送到客戶端

4、sse優(yōu)劣勢：優(yōu)勢在于節(jié)約資源，提升應用性能。SSE可以實現只要服務器端數據有更新，就可以馬上發(fā)送到客戶端，不需要建立或保持大量的客戶端發(fā)往服務器端的請求。另外，SSE的實現非常簡單，并且不需要依賴其他插件。劣勢在于不是雙向通信，只能后臺向前臺推送。

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")// 連接成功后的回調函數ws.onopen = function (params) {  console.log("客戶端連接成功")  // 向服務器發(fā)送消息  ws.send("hello")};// 從服務器接受到信息時的回調函數ws.onmessage = function (e) {  console.log("收到服務器響應", e.data)};// 連接關閉后的回調函數ws.onclose = function(evt) {  console.log("關閉客戶端連接");};// 連接失敗后的回調函數ws.onerror = function (evt) {  console.log("連接失敗了");};// 監(jiān)聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，這樣服務端會拋異常。window.onbeforeunload = function() {    ws.close();}

后端代碼

/ 引入插件const ws = require("nodejs-websocket")// 只要有用戶鏈接，函數就會執(zhí)行，會給當前鏈接的用戶創(chuàng)建一個connect對象const server = ws.createServer((connect)=>{    console.log("連接成功")    // console.log(connect)    // 注冊text事件 ，接收用戶傳遞過來的數據    connect.on("text",data=>{        console.log("接收客戶端數據---->", data)        // 給所有用戶發(fā)送消息        broadcast(server,data+"--返回數據")    })    // 連接斷開，觸發(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

關鍵詞：