完美世界txt全集下载,完美世界辰东,欢乐颂小说txt

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

.NET如何實(shí)現(xiàn)ChatGPT的Stream傳輸

.NET 如何實(shí)現(xiàn)ChatGPT的Stream傳輸

ChatGPT是如何實(shí)現(xiàn)不適用websocket進(jìn)行一個(gè)一個(gè)字返回到前端的？

創(chuàng)新互聯(lián)建站是專(zhuān)業(yè)的臨夏州網(wǎng)站建設(shè)公司，臨夏州接單;提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行臨夏州網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

下面我們會(huì)介紹一下EventSource

EventSource

EventSource 接口是 web 內(nèi)容與服務(wù)器發(fā)送事件[1]通信的接口。

一個(gè) EventSource 實(shí)例會(huì)對(duì) HTTP[2] 服務(wù)器開(kāi)啟一個(gè)持久化的連接，以 text/event-stream 格式發(fā)送事件[3]，此連接會(huì)一直保持開(kāi)啟直到通過(guò)調(diào)用 `EventSource.close()`[4] 關(guān)閉。

EventTarget <= EventSource

一旦連接開(kāi)啟，來(lái)自服務(wù)端傳入的消息會(huì)以事件的形式分發(fā)至你代碼中。如果接收消息中有一個(gè) event 字段，觸發(fā)的事件與 event 字段的值相同。如果不存在 event 字段，則將觸發(fā)通用的 `message`[5] 事件。

與 WebSocket[6] 不同的是，服務(wù)器發(fā)送事件是單向的。數(shù)據(jù)消息只能從服務(wù)端到發(fā)送到客戶端（如用戶的瀏覽器）。這使其成為不需要從客戶端往服務(wù)器發(fā)送消息的情況下的最佳選擇。例如，對(duì)于處理如社交媒體狀態(tài)更新、消息來(lái)源（news feed）或?qū)?shù)據(jù)傳遞到客戶端存儲(chǔ)[7]機(jī)制（如 IndexedDB[8] 或 web 存儲(chǔ)[9]）之類(lèi)的，EventSource 無(wú)疑是一個(gè)有效方案。

參考文獻(xiàn) EventSource[10]

使用場(chǎng)景

ChatGPT的Stream式對(duì)話，可以一個(gè)字一個(gè)字相應(yīng)，增加用戶體驗(yàn)
簡(jiǎn)單的大數(shù)據(jù)量的數(shù)據(jù)進(jìn)行推送到客戶端
耗時(shí)并且持續(xù)化的數(shù)據(jù)傳輸
等

ASP.NET Core 實(shí)現(xiàn)

創(chuàng)建WebApi項(xiàng)目

圖片

在Controllers中新建一個(gè)StreamController.cs文件，并且提供一個(gè)IAsyncEnumerable的Demo

IAsyncEnumerable

公開(kāi)對(duì)指定類(lèi)型的值提供異步迭代的枚舉器。

StreamController.cs

using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers;

[ApiController]
[Route("[controller]")]
public class StreamController : ControllerBase
{
    [HttpPost]
    public async IAsyncEnumerable Test()
    {
        const string value = "這是一個(gè)完整的測(cè)試數(shù)據(jù)；為了測(cè)試IAsyncEnumerable的使用";

        foreach (var v in value)
        {
            await Task.Delay(500);
            yield return v;
        }

        await Task.CompletedTask;
    }
}

上面案例的接口使用了IAsyncEnumerable，作為返回值，將value字符串一個(gè)一個(gè)字符返回到前端。

每次返回等待500，這是服務(wù)端的實(shí)現(xiàn)，下面寫(xiě)客戶端的實(shí)現(xiàn)，客戶端也是用.NET

使用js實(shí)現(xiàn)調(diào)用

首先啟動(dòng)api服務(wù)，然后在打開(kāi)的swagger的瀏覽器界面中打開(kāi)開(kāi)發(fā)者工具使用F12打開(kāi)開(kāi)發(fā)者工具

圖片

在控制臺(tái)中添加fetchAsStream方法用于調(diào)用IAsyncEnumerable的接口服務(wù)，代碼如下

async function fetchAsStream(url,data) {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data),
    });
    if (!response.ok) {
      const reader = response.body?.getReader();
      const { done, value } = await reader.read();
      throw new Error(
        `Failed to fetch `
      );
    }
    if (!response.body) {
      throw new Error("ReadableStream not supported in this browser.");
    }

    const reader = response.body.getReader();
    return {
      [Symbol.asyncIterator]( "Symbol.asyncIterator") {
        return {
          async next() {
            const { done, value } = await reader.read();
            if (done) {
              return { done: true, value: null };
            }
            return {
              done: false,
              value: new TextDecoder("utf-8").decode(value),
            };
          },
        };
      },
    };

  }

圖片

輸入完成按回車(chē)鍵會(huì)顯示一個(gè)undefined

然后下一步就調(diào)用這個(gè)方法，當(dāng)執(zhí)行下面這個(gè)代碼會(huì)發(fā)現(xiàn)控制臺(tái)會(huì)一個(gè)一個(gè)字顯示內(nèi)容。

var stream =  await fetchAsStream("http://localhost:5255/stream");

for await(var c of stream){
    console.log(c);
}

圖片

看效果控制臺(tái)的字在一個(gè)一個(gè)輸出，請(qǐng)注意不要使用axios，默認(rèn)是不支持的。

參考資料

[1]服務(wù)器發(fā)送事件: https://developer.mozilla.org/zh-CN/docs/Web/API/Server-sent_events

[2]HTTP: https://developer.mozilla.org/zh-CN/docs/Web/HTTP

[3]事件: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events

[4]EventSource.close(): https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource/close

[5]message: https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource/message_event

[6]WebSocket: https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API

[7]客戶端存儲(chǔ): https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage

[8]IndexedDB: https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

[9]web 存儲(chǔ): https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API

[10]EventSource: https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource

新聞標(biāo)題：.NET如何實(shí)現(xiàn)ChatGPT的Stream傳輸
文章位置：http://www.fisionsoft.com.cn/article/dpcgoce.html