SSE 介紹

隨著 ChatGPT 已生活工作中的一部分，介紹其中一種服務(wù)器端推送技術(shù)——Server-Sent Events (SSE)，并簡單實(shí)現(xiàn)其效果。

SSE 是一種 HTML5 技術(shù)，它允許服務(wù)器向客戶端發(fā)送事件，從而實(shí)現(xiàn)服務(wù)器端推送。相對(duì)于 WebSockets 或長輪詢技術(shù)，SSE 提供了更簡單的方式來實(shí)現(xiàn)服務(wù)器端推送，并且支持更廣泛的客戶端和服務(wù)器端。

在 SSE 中，客戶端通過向服務(wù)器端發(fā)送一個(gè) HTTP 請(qǐng)求，請(qǐng)求某個(gè)資源，并且指定響應(yīng)的類型是"text/event-stream"。服務(wù)器端在響應(yīng)請(qǐng)求時(shí)，將數(shù)據(jù)格式化為事件流的形式，并通過 HTTP 響應(yīng)發(fā)送回客戶端?？蛻舳送ㄟ^事件流中的數(shù)據(jù)，可以實(shí)現(xiàn)實(shí)時(shí)地更新 UI 等操作。

下面是一個(gè) SSE 的 Demo，展示了如何通過 SSE 實(shí)現(xiàn)一個(gè)簡單的服務(wù)器端推送應(yīng)用。

服務(wù)端代碼：

const express = require('express');
const app = express();
const port = 3600;
app.get('/stream', (req, res) => {
  const { message = '' } = req.query
  // 3個(gè)請(qǐng)求頭重點(diǎn)，需要返回text/event-stream，告知瀏覽器以何種類型解析
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });
  let step = 0;
  // 定時(shí)器依次返回message
  const time = setInterval(() => {
    const data = { message: message[step++]};
    // 每個(gè)消息以 \n\n分割
    res.write(`data: ${JSON.stringify(data)}\n\n`);
    if (step > message.length - 1) {
      res.end()
      clearInterval(time)
    }
  }, 500);
});
app.listen(port, () => console.log(`Server running at http://localhost:${port}`));

客戶端代碼：

// 創(chuàng)建一個(gè)EventSource
const eventSource = new EventSource(`/stream?message=${message}`);
// 監(jiān)聽服務(wù)器返回的數(shù)據(jù)
eventSource.onmessage = function (event) {
  console.log(event.data);
};
eventSource.onerror = function () {
  eventSource.close();
};

在上面的代碼中，我們通過 EventSource 對(duì)象創(chuàng)建了一個(gè) SSE 連接，并指定了服務(wù)器端的 URL。當(dāng)有事件流數(shù)據(jù)時(shí)，onmessage 回調(diào)函數(shù)會(huì)被調(diào)用。 network 中可看到一條類型為eventsource的請(qǐng)求，其以下內(nèi)容

咋和 ChatGPT 控制臺(tái)看到的內(nèi)容不一樣？??

ChatGPT 回車后，并未發(fā)送eventsource請(qǐng)求，而是發(fā)送了一個(gè) fetch 請(qǐng)求，原因又是什么呢，仔細(xì)看

觀察上圖可得它發(fā)送了一個(gè) fetch 的 POST 請(qǐng)求，服務(wù)端響應(yīng)的是一個(gè)eventsource，那么 fetch 又能如何實(shí)現(xiàn)eventsource響應(yīng)呢？因?yàn)?fetch 并沒有onmessage方法~

通過一番查找學(xué)習(xí)~主要有兩個(gè)關(guān)鍵的 API

• fetch 方法 查看文檔
• ReadableStream對(duì)象 查看文檔

fetch用于發(fā)起SSE請(qǐng)求，而EventSource用于處理服務(wù)器端推送的數(shù)據(jù)。結(jié)合兩個(gè)API簡單實(shí)現(xiàn)一個(gè)fetchStream方法

const fetchStream = (url, params) => {
  const { onmessage, onclose, ...otherParams } = params;
  const push = async (controller, reader) => {
    const { value, done } = await reader.read();
    if (done) {
      controller.close();
      onclose?.();
    } else {
      onmessage?.(Uint8ArrayToString(value));
      controller.enqueue(value);
      push(controller, reader);
    }
  };
  // 發(fā)送請(qǐng)求
  return fetch(url, otherParams)
    .then((response) => {
      // 以ReadableStream解析數(shù)據(jù)
      const reader = response.body.getReader();
      const stream = new ReadableStream({
        start(controller) {
          push(controller, reader);
        },
      });
      return stream;
    })
    .then((stream) => new Response(stream, { headers: { 'Content-Type': 'text/html' } }).text());
};

調(diào)用方法

fetchStream(`/stream?message=${message}`, {
  method: 'GET',
  headers: {
    'accept': 'text/event-stream',
    'Content-Type': 'application/json',
  },
  onmessage: (res) => {
    // todo
    console.log(res);
  },
});

經(jīng)過簡單封裝實(shí)現(xiàn)ChatGPT的應(yīng)答請(qǐng)求效果~

另外推薦一個(gè)成熟的第三方依賴fetch-event-source 點(diǎn)擊查看

Server-Sent Events 相對(duì)于其他技術(shù)的優(yōu)缺點(diǎn)

與WebSockets相比，SSE技術(shù)的優(yōu)點(diǎn)在于：

• 更簡單的實(shí)現(xiàn)：SSE技術(shù)使用標(biāo)準(zhǔn)的HTTP協(xié)議來發(fā)送和接收數(shù)據(jù)，因此不需要額外的握手和協(xié)議協(xié)商步驟。這使得SSE技術(shù)的實(shí)現(xiàn)更加簡單，尤其是對(duì)于服務(wù)器端。
• 更廣泛的兼容性：SSE技術(shù)使用標(biāo)準(zhǔn)的HTTP協(xié)議，因此可以被大多數(shù)Web瀏覽器和服務(wù)器端支持。相比之下，WebSockets需要瀏覽器和服務(wù)器端都支持WebSocket協(xié)議。
• 更少的網(wǎng)絡(luò)開銷：SSE技術(shù)使用HTTP長連接來實(shí)現(xiàn)服務(wù)器端推送，因此相比WebSockets需要更少的網(wǎng)絡(luò)開銷和資源消耗。

與長輪詢技術(shù)相比，SSE技術(shù)的優(yōu)點(diǎn)在于：

• 實(shí)時(shí)性更好：SSE技術(shù)可以實(shí)時(shí)地向客戶端推送數(shù)據(jù)，因此可以實(shí)現(xiàn)更快的響應(yīng)速度和更好的實(shí)時(shí)性。
• 更少的網(wǎng)絡(luò)開銷：SSE技術(shù)使用HTTP長連接來實(shí)現(xiàn)服務(wù)器端推送，因此相比長輪詢需要更少的網(wǎng)絡(luò)開銷和資源消耗。
• 更好的客戶端兼容性：SSE技術(shù)可以被大多數(shù)現(xiàn)代瀏覽器和設(shè)備支持，因此更容易實(shí)現(xiàn)客戶端兼容性。

總結(jié)

最后呈上一個(gè)完整的demo，github地址

以上就是一文解析ChatGPT 之 Fetch 請(qǐng)求的詳細(xì)內(nèi)容，更多關(guān)于ChatGPT Fetch 請(qǐng)求的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！