羞羞视频在线观看不卡,精品一区二区三区的国产在线观看,全午夜免费一级毛片

在本文中，我們將探討主流的大型語言模型（LLM）提供商如何實現其流式輸出的 HTTP API。我們將深入研究流式輸出的工作原理，探討其優勢，并提供示例代碼以幫助您理解如何在實際應用中使用流式輸出。

什么是流式輸出？

流式輸出（Streaming Output）是一種使后端將數據分塊、逐步發送到前端的技術。通過這種方法，前端應用能夠即時接收和渲染數據，不必等到整個響應體生成完畢后再處理。

傳統的API 通常會一次性返回所有數據，然后客戶端一次性接收。

流式輸出則允許服務器在生成數據的同時將其發送給客戶端，從而實現實時更新。

流式輸出通常用于以下幾種場景：

實時數據更新，例如股票行情、社交媒體的實時消息流。
大數據處理，例如長時間查詢或計算的結果逐步傳輸。
節省帶寬，在網絡環境不佳的情況下減少一次性傳輸大量數據的壓力。

流式 API 的優勢

流式 API 提供了即時響應的體驗，允許用戶在內容生成過程中即時查看部分結果。相比等待整個響應完成，流式輸出極大提高了用戶體驗。適用于多種場景，例如：

實時內容生成：用戶在等待生成大段文本時，可以即時查看部分內容。
漸進式加載：減少等待時間，提升交互性。
流式處理：流式 API 讓開發者能夠邊生成邊處理數據，尤其適用于實時應用。

流式輸出的實現方式

在具體實現流式輸出時，常用的技術包括：

HTTP 分塊傳輸（Chunked Transfer Encoding）：HTTP 協議支持將數據以分塊的方式傳輸，每個數據塊都會攜帶長度信息。后端可以在響應完成之前，逐步地發送多個數據塊給前端。
Server-Sent Events (SSE)：SSE 是一種在服務器向客戶端推送事件的技術，適合實時性要求高但傳輸頻率不高的場景。
WebSocket：WebSocket 是一個全雙工協議，允許服務器和客戶端相互通信，適合高頻率的實時數據傳輸。

本文主要講解SSE的實現。

SSE數據格式

Server-Sent Events（SSE）返回的數據格式是由一系列文本流組成，每行包含一個鍵值對，表示一個數據事件。每條事件消息由事件名稱、數據內容等字段組成，并且這些字段具有特定的格式和規則。

SSE 格式的基本結構
SSE 使用 Content-Type: text/event-stream，將數據以純文本的方式分塊傳輸到客戶端，每次傳輸一個事件，數據傳輸結束時不需要關閉連接。每個事件消息有幾個常用字段：

data：表示事件的主要數據內容，數據可以是單行或多行。
id：事件的唯一標識符（可選）。客戶端會自動記錄最近一次接收到的 id，以便在重新連接時從該事件之后恢復。
event：事件的類型，默認為 message。客戶端可以通過 addEventListener 監聽不同類型的事件。
retry：重試時間（以毫秒為單位），用于在連接中斷時自動重連。

SSE 數據格式示例
在每條事件中，字段通過換行分隔，格式如下：

event: custom-event

id: 1

retry: 5000

data: {"message": "Hello, World!"}

event：自定義事件名為 custom-event。
id：該事件的唯一標識符為 1。
retry：指示客戶端在連接斷開后每隔 5000 毫秒（5 秒）重新嘗試連接。
data：該事件的主要數據部分為 JSON 字符串 {“message”: “Hello, World!”}。
每條事件結束后，必須包含兩個換行符。若需要傳輸多條事件，可按此格式依次添加。

多行數據
data 字段支持多行。對于多行內容，在每行前都需要加 data: 前綴, 并且以兩個換行符(\n\n)結尾，SSE 會自動將其拼接為單個字符串傳遞到客戶端。例如：

data: {"message": "Part 1 of the message"}



data: {"message": "Part 2 of the message"}



data: {"message": "Part 3 of the message"}

在客戶端收到時，這幾行會被拼接成一條數據。

示例：使用SSE實現流式輸出

后端實現
后端需要實現一個 HTTP 接口，該接口返回一個流式響應。在 C# 中，可以使用 ASP.NET Core 來實現。以下是一個簡單的示例：

[HttpPost, HttpGet]

[ActionTitle(Name = "聊天")]

[Route("chat")]

public async Task Completions([FromBody] ChatDto chatDto)

{

    Response.ContentType = "text/event-stream";



    await foreach( var message in GetStreamingResponseAsync(chatDto.Input) ) {

        var data = $"data: {message}\n\n";

        Console.Write(data);

        var bytes = Encoding.UTF8.GetBytes(data);

        await Response.Body.WriteAsync(bytes);

        await Response.Body.FlushAsync();

        await Task.Delay(100);

    }

}



public static async IAsyncEnumerable<string> GetStreamingResponseAsync(string userInput)

{

    // 隨機獲取一個配置

    GptConfig gptConfig = new GptConfig() { 

        ApiKey = "your-api-key",

        Version = "2023-03-15-preview"

    };



    HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Post, $"URL_ADDRESS");

    request.Headers.Add("api-key", gptConfig.ApiKey);



    var requestBody = new {

        messages = new[]

        {

            new { role = "user", content = userInput }

        },       

        stream = true

    };



    var jsonRequestBody = JsonSerializer.Serialize(requestBody);

    request.Content = new StringContent(jsonRequestBody, Encoding.UTF8, "application/json");



    using HttpClient httpClient = new HttpClient();



    using( var response = await httpClient.SendAsync(request, HttpCompletionOption.ResponseHeadersRead) ) {

        response.EnsureSuccessStatusCode();

        var responseStream = await response.Content.ReadAsStreamAsync();



        using( var reader = new StreamReader(responseStream) ) {

            while( !reader.EndOfStream ) {

                var line = await reader.ReadLineAsync();

                if( !string.IsNullOrWhiteSpace(line) && line.StartsWith("data:") ) {

                    var jsonData = line.Substring(5).Trim();

                    if( jsonData == "[DONE]" )

                        break;



                    var data = JsonSerializer.Deserialize<JsonElement>(jsonData);



                    // 檢查是否包含 content 字段，避免報錯

                    if( data.TryGetProperty("choices", out var choices) &&

                        choices[0].TryGetProperty("delta", out var delta) &&

                        delta.TryGetProperty("content", out var content) ) {

                        yield return content.GetString();

                    }

                }

            }

        }

    }



}

前端實現
在前端，我們可以使用 vue3來實現。以下是一個簡單的示例：

chat() {

    fetch(/v20/openai/chat, {
      method: 'POST',
      body: JSON.stringify({ input: this.input }),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then((res) => {
      const reader = res.body.getReader();

      this.handleReadStream(reader)
    }).finally(() => {
      this.input = ''
    })

},
// 流式對話
handleReadStream(stream) {
  stream.read().then(({ done, value }) => {
    if (done) {
      return
    }
    const data = new TextDecoder().decode(value)
    if (!data) {
      return
    }

    this.message += data.replaceAll('data: ', '')
    // 強制 Vue 渲染更新
    this.$nextTick(() => {
      console.log("Stream updated");
    });
    // 遞歸處理流
    this.handleReadStream(stream)
  })
},

實現效果

需要注意的是，vue3項目在本地開發代理api接口的時候似乎默認啟用了gzip壓縮，導致前端無法正常解析SSE的數據格式。可以在vue.config.js中配置關閉gzip壓縮。

devServer: {

    port: 9588,

    compress: false,

    allowedHosts: "all",

    proxy: {

      'v20': { target: 'http://localhost:2222', changeOrigin: true },

    }

  }