.NET實現(xiàn)ChatGPT的Stream傳輸?shù)倪^程
ChatGPT是如何實現(xiàn)不適用websocket進行一個一個字返回到前端的?
下面我們會介紹一下EventSource
EventSource
EventSource 接口是 web 內(nèi)容與服務器發(fā)送事件通信的接口。
一個 EventSource 實例會對 HTTP 服務器開啟一個持久化的連接,以 text/event-stream 格式發(fā)送事件,此連接會一直保持開啟直到通過調(diào)用 EventSource.close() 關閉。
EventTarget <= EventSource
一旦連接開啟,來自服務端傳入的消息會以事件的形式分發(fā)至你代碼中。如果接收消息中有一個 event 字段,觸發(fā)的事件與 event 字段的值相同。如果不存在 event 字段,則將觸發(fā)通用的 message 事件。
與 WebSocket 不同的是,服務器發(fā)送事件是單向的。數(shù)據(jù)消息只能從服務端到發(fā)送到客戶端(如用戶的瀏覽器)。這使其成為不需要從客戶端往服務器發(fā)送消息的情況下的最佳選擇。例如,對于處理如社交媒體狀態(tài)更新、消息來源(news feed)或?qū)?shù)據(jù)傳遞到客戶端存儲機制(如 IndexedDB 或 web 存儲)之類的,EventSource 無疑是一個有效方案。
- 參考文獻 EventSource
使用場景
- ChatGPT的Stream式對話,可以一個字一個字相應,增加用戶體驗
- 簡單的大數(shù)據(jù)量的數(shù)據(jù)進行推送到客戶端
- 耗時并且持續(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,這是服務端的實現(xiàn),下面寫客戶端的實現(xiàn),客戶端也是用.NET
使用js實現(xiàn)調(diào)用
首先啟動api服務,然后在打開的swagger的瀏覽器界面中打開開發(fā)者工具使用F12打開開發(fā)者工具

在控制臺中添加fetchAsStream方法用于調(diào)用IAsyncEnumerable<char>的接口服務,代碼如下
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)用這個方法,當執(zhí)行下面這個代碼會發(fā)現(xiàn)控制臺會一個一個字顯示內(nèi)容。
var stream = await fetchAsStream("http://localhost:5255/stream");
for await(var c of stream){
console.log(c);
}

看效果控制臺的字在一個一個輸出,請注意不要使用axios,默認是不支持的。
到此這篇關于.NET 如何實現(xiàn)ChatGPT的Stream傳輸?shù)奈恼戮徒榻B到這了,更多相關.NET Stream傳輸內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
ASP.NET.4.5.1+MVC5.0設置系統(tǒng)角色與權限(二)
這篇文章主要介紹了使用ASP.NET.4.5.1+MVC5.0構建項目中設置系統(tǒng)角色的全部過程,十分的詳細,附上全部源碼,推薦給想學習.net+mvc的小伙伴們2015-01-01
使用NLog給Asp.Net Core做請求監(jiān)控的方法
這篇文章主要介紹了使用NLog給Asp.Net Core做請求監(jiān)控的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Asp.net core中RedisMQ的簡單應用實現(xiàn)
這篇文章主要介紹了Asp.net core中RedisMQ的簡單應用實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
.NET性能優(yōu)化之為結構體數(shù)組使用StructLinq的問題解析
這篇文章主要介紹了.NET性能優(yōu)化為結構體數(shù)組使用StructLinq,本系列的主要目的是告訴大家在遇到性能問題時,有哪些方案可以去優(yōu)化;并不是要求大家一開始就使用這些方案來提升性能,需要的朋友可以參考下2022-05-05

