ChatGPT之Fetch請求實例分析

本篇內容介紹了“ChatGPT之Fetch請求實例分析”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

SSE 介紹

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

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

在 SSE 中，客戶端通過向服務器端發送一個 HTTP 請求，請求某個資源，并且指定響應的類型是"text/event-stream"。服務器端在響應請求時，將數據格式化為事件流的形式，并通過 HTTP 響應發送回客戶端。客戶端通過事件流中的數據，可以實現實時地更新 UI 等操作。

下面是一個 SSE 的 Demo，展示了如何通過 SSE 實現一個簡單的服務器端推送應用。

服務端代碼：

const express = require('express');
const app = express();
const port = 3600;
app.get('/stream', (req, res) => {
  const { message = '' } = req.query
  // 3個請求頭重點，需要返回text/event-stream，告知瀏覽器以何種類型解析
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });
  let step = 0;
  // 定時器依次返回message
  const time = setInterval(() => {
    const data = { message: message[step++]};
    // 每個消息以 \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}`));

客戶端代碼：

// 創建一個EventSource
const eventSource = new EventSource(`/stream?message=${message}`);
// 監聽服務器返回的數據
eventSource.onmessage = function (event) {
  console.log(event.data);
};
eventSource.onerror = function () {
  eventSource.close();
};

在上面的代碼中，我們通過 EventSource 對象創建了一個 SSE 連接，并指定了服務器端的 URL。當有事件流數據時，onmessage 回調函數會被調用。 network 中可看到一條類型為eventsource的請求，其以下內容

咋和 ChatGPT 控制臺看到的內容不一樣？

ChatGPT 回車后，并未發送eventsource請求，而是發送了一個 fetch 請求，原因又是什么呢，仔細看

觀察上圖可得它發送了一個 fetch 的 POST 請求，服務端響應的是一個eventsource，那么 fetch 又能如何實現eventsource響應呢？因為 fetch 并沒有onmessage方法~

通過一番查找學習~主要有兩個關鍵的 API

• fetch 方法 查看文檔

• ReadableStream對象 查看文檔

fetch用于發起SSE請求，而EventSource用于處理服務器端推送的數據。結合兩個API簡單實現一個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);
    }
  };
  // 發送請求
  return fetch(url, otherParams)
    .then((response) => {
      // 以ReadableStream解析數據
      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());
};

調用方法

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

Server-Sent Events 相對于其他技術的優缺點

與WebSockets相比，SSE技術的優點在于：

• 更簡單的實現：SSE技術使用標準的HTTP協議來發送和接收數據，因此不需要額外的握手和協議協商步驟。這使得SSE技術的實現更加簡單，尤其是對于服務器端。

• 更廣泛的兼容性：SSE技術使用標準的HTTP協議，因此可以被大多數Web瀏覽器和服務器端支持。相比之下，WebSockets需要瀏覽器和服務器端都支持WebSocket協議。

• 更少的網絡開銷：SSE技術使用HTTP長連接來實現服務器端推送，因此相比WebSockets需要更少的網絡開銷和資源消耗。

與長輪詢技術相比，SSE技術的優點在于：

• 實時性更好：SSE技術可以實時地向客戶端推送數據，因此可以實現更快的響應速度和更好的實時性。

• 更少的網絡開銷：SSE技術使用HTTP長連接來實現服務器端推送，因此相比長輪詢需要更少的網絡開銷和資源消耗。

• 更好的客戶端兼容性：SSE技術可以被大多數現代瀏覽器和設備支持，因此更容易實現客戶端兼容性。

“ChatGPT之Fetch請求實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！