.NET實現(xiàn)ChatGPT的Stream傳輸?shù)倪^程
ChatGPT是如何實現(xiàn)不適用websocket進(jìn)行一個一個字返回到前端的?
下面我們會介紹一下EventSource
EventSource
EventSource
接口是 web 內(nèi)容與服務(wù)器發(fā)送事件通信的接口。
一個 EventSource
實例會對 HTTP 服務(wù)器開啟一個持久化的連接,以 text/event-stream
格式發(fā)送事件,此連接會一直保持開啟直到通過調(diào)用 EventSource.close() 關(guān)閉。
EventTarget <= EventSource
一旦連接開啟,來自服務(wù)端傳入的消息會以事件的形式分發(fā)至你代碼中。如果接收消息中有一個 event 字段,觸發(fā)的事件與 event 字段的值相同。如果不存在 event 字段,則將觸發(fā)通用的 message 事件。
與 WebSocket 不同的是,服務(wù)器發(fā)送事件是單向的。數(shù)據(jù)消息只能從服務(wù)端到發(fā)送到客戶端(如用戶的瀏覽器)。這使其成為不需要從客戶端往服務(wù)器發(fā)送消息的情況下的最佳選擇。例如,對于處理如社交媒體狀態(tài)更新、消息來源(news feed)或?qū)?shù)據(jù)傳遞到客戶端存儲機(jī)制(如 IndexedDB 或 web 存儲)之類的,EventSource
無疑是一個有效方案。
- 參考文獻(xiàn) EventSource
使用場景
- ChatGPT的Stream式對話,可以一個字一個字相應(yīng),增加用戶體驗
- 簡單的大數(shù)據(jù)量的數(shù)據(jù)進(jìn)行推送到客戶端
- 耗時并且持續(xù)化的數(shù)據(jù)傳輸
- 等
ASP.NET Core 實現(xiàn)
創(chuàng)建WebApi項目
在Controllers
中新建一個StreamController.cs
文件,并且提供一個IAsyncEnumerable<out T>
的Demo
IAsyncEnumerable<out T>
- 公開對指定類型的值提供異步迭代的枚舉器。
StreamController.cs
using Microsoft.AspNetCore.Mvc; namespace WebApplication1.Controllers; [ApiController] [Route("[controller]")] public class StreamController : ControllerBase { [HttpPost] public async IAsyncEnumerable<char> Test() { const string value = "這是一個完整的測試數(shù)據(jù);為了測試IAsyncEnumerable<T>的使用"; foreach (var v in value) { await Task.Delay(500); yield return v; } await Task.CompletedTask; } }
上面案例的接口使用了IAsyncEnumerable<char>
,作為返回值,將value字符串一個一個字符返回到前端。
每次返回等待500,這是服務(wù)端的實現(xiàn),下面寫客戶端的實現(xiàn),客戶端也是用.NET
使用js實現(xiàn)調(diào)用
首先啟動api服務(wù),然后在打開的swagger的瀏覽器界面中打開開發(fā)者工具
使用F12
打開開發(fā)者工具
在控制臺中添加fetchAsStream
方法用于調(diào)用IAsyncEnumerable<char>
的接口服務(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]() { 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), }; }, }; }, }; }
輸入完成按回車鍵會顯示一個undefined
然后下一步就調(diào)用這個方法,當(dāng)執(zhí)行下面這個代碼會發(fā)現(xiàn)控制臺會一個一個字顯示內(nèi)容。
var stream = await fetchAsStream("http://localhost:5255/stream"); for await(var c of stream){ console.log(c); }
看效果控制臺的字在一個一個輸出,請注意不要使用axios
,默認(rèn)是不支持的。
到此這篇關(guān)于.NET 如何實現(xiàn)ChatGPT的Stream傳輸?shù)奈恼戮徒榻B到這了,更多相關(guān).NET Stream傳輸內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ASP.NET.4.5.1+MVC5.0設(shè)置系統(tǒng)角色與權(quán)限(二)
這篇文章主要介紹了使用ASP.NET.4.5.1+MVC5.0構(gòu)建項目中設(shè)置系統(tǒng)角色的全部過程,十分的詳細(xì),附上全部源碼,推薦給想學(xué)習(xí).net+mvc的小伙伴們2015-01-01使用NLog給Asp.Net Core做請求監(jiān)控的方法
這篇文章主要介紹了使用NLog給Asp.Net Core做請求監(jiān)控的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05Asp.net core中RedisMQ的簡單應(yīng)用實現(xiàn)
這篇文章主要介紹了Asp.net core中RedisMQ的簡單應(yīng)用實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12.NET?Core(.NET6)中g(shù)RPC使用實踐
gRPC是高性能的遠(yuǎn)程過程調(diào)用(RPC)框架,本文主要介紹了.NET?Core(.NET6)中g(shù)RPC使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04.NET性能優(yōu)化之為結(jié)構(gòu)體數(shù)組使用StructLinq的問題解析
這篇文章主要介紹了.NET性能優(yōu)化為結(jié)構(gòu)體數(shù)組使用StructLinq,本系列的主要目的是告訴大家在遇到性能問題時,有哪些方案可以去優(yōu)化;并不是要求大家一開始就使用這些方案來提升性能,需要的朋友可以參考下2022-05-05