一文解析之請求

更新時間：2023年03月31日 12:14:54 作者：川、

這篇文章主要為大家介紹了之請求的內容解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步chatgpt請求發送異常，早日升職加薪

目錄

SSE 介紹

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

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

在 SSE 中，客戶端通過向服務器端發送一個 HTTP 請求，請求某個資源，并且指定響應的類型是"text/-"。服務器端在響應請求時chatgpt請求發送異常，將數據格式化為事件流的形式，并通過 HTTP 響應發送回客戶端。客戶端通過事件流中的數據chatgpt請求發送異常，可以實現實時地更新 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();
};

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

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

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

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

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

用于發起SSE請求，而用于處理服務器端推送的數據。結合兩個API簡單實現一個方法

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);
  },
});

經過簡單封裝實現的應答請求效果~

另外推薦一個成熟的第三方依賴-- 點擊查看

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

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

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

總結

最后呈上一個完整的demo，地址

以上就是一文解析 之 請求的詳細內容，更多關于 請求的資料請關注腳本之家其它相關文章！

免責聲明：本文系轉載，版權歸原作者所有；旨在傳遞信息，不代表本站的觀點和立場和對其真實性負責。如需轉載，請聯系原作者。如果來源標注有誤或侵犯了您的合法權益或者其他問題不想在本站發布，來信即刪。