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

在控制臺中添加fetchAsStream方法用于調用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
然后下一步就調用這個方法,當執(zhí)行下面這個代碼會發(fā)現(xiàn)控制臺會一個一個字顯示內容。
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傳輸內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
.NET 8 中的 Keyed Services解鎖依賴注入的新方式(最新推薦)
.NET8引入KeyedServices,允許通過鍵區(qū)分同一接口的不同實現(xiàn),簡化服務選擇邏輯,通過注冊和注入特性實現(xiàn)靈活依賴管理,提升代碼可維護性,但需.NET8及以上版本支持,本文給大家介紹.NET 8 中的 Keyed Services解鎖依賴注入的新方式,感興趣的朋友一起看看吧2025-07-07
關于Asp.net頁面Page_Load被執(zhí)行兩次的問題分享
這篇文章介紹了關于Asp.net頁面Page_Load被執(zhí)行兩次的問題,有需要的朋友可以參考一下2013-09-09
使用ASP.NET.4.5.1+MVC5.0 搭建一個包含 Ninject框架 項目
這篇文章主要介紹了使用ASP.NET.4.5.1+MVC5.0 搭建一個包含 Ninject框架 項目的方法,需要的朋友可以參考下2015-01-01
在ASP.NET?MVC下限制同一個IP地址單位時間間隔內的請求次數(shù)的解決方法
有時候,當用戶請求一個Controller下的Action,我們希望,在單位時間間隔內,比如每秒,每分鐘,每小時,每天,每星期,限制同一個IP地址對某個Action的請求次數(shù),如何做呢?這篇文章主要介紹了在ASP.NET?MVC下限制同一個IP地址單位時間間隔內的請求次數(shù),需要的朋友可以參考下2024-01-01
asp.net MaxLengthValidator 最大長度驗證控件代碼
如果數(shù)據庫字段為varchar或char類型,ASP.NET控件在可輸入漢字的情況下,MaxLength屬性不能保證在保存到數(shù)據庫時不發(fā)生截斷錯誤,因此寫了一個最大長度驗證控件,還可用于多行文本框。2009-12-12
.Net8?WebAPI項目創(chuàng)建部署的實現(xiàn)
本文主要介紹了.Net8?WebAPI項目創(chuàng)建部署的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-05-05

