.NET实现ChatGPT的Stream传输的过程

2024-03-01 0 694
目录
  • EventSource
  • 使用场景
  • ASP.NET Core 实现
    • 创建WebApi项目
    • 使用js实现调用

ChatGPT是如何实现不适用websocket进行一个一个字返回到前端的?

下面我们会介绍一下EventSource

EventSource

EventSource接口是 web 内容与服务器发送事件通信的接口。

一个EventSource实例会对HTTP服务器开启一个持久化的连接,以text/event-stream格式发送事件,此连接会一直保持开启直到通过调用EventSource.close()关闭。

EventTarget <= EventSource

一旦连接开启,来自服务端传入的消息会以事件的形式分发至你代码中。如果接收消息中有一个 event 字段,触发的事件与 event 字段的值相同。如果不存在 event 字段,则将触发通用的message事件。

与WebSocket不同的是,服务器发送事件是单向的。数据消息只能从服务端到发送到客户端(如用户的浏览器)。这使其成为不需要从客户端往服务器发送消息的情况下的最佳选择。例如,对于处理如社交媒体状态更新、消息来源(news feed)或将数据传递到客户端存储机制(如IndexedDB或web 存储)之类的,EventSource无疑是一个有效方案。

  • 参考文献EventSource

使用场景

  • ChatGPT的Stream式对话,可以一个字一个字相应,增加用户体验
  • 简单的大数据量的数据进行推送到客户端
  • 耗时并且持续化的数据传输

ASP.NET Core 实现

创建WebApi项目

.NET实现ChatGPT的Stream传输的过程

在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&lt;char&gt; Test()
{
const string value = \”这是一个完整的测试数据;为了测试IAsyncEnumerable&lt;T&gt;的使用\”;

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

await Task.CompletedTask;
}
}

上面案例的接口使用了IAsyncEnumerable<char>,作为返回值,将value字符串一个一个字符返回到前端。

每次返回等待500,这是服务端的实现,下面写客户端的实现,客户端也是用.NET

使用js实现调用

首先启动api服务,然后在打开的swagger的浏览器界面中打开开发者工具使用F12打开开发者工具

.NET实现ChatGPT的Stream传输的过程

在控制台中添加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),
};
},
};
},
};

}

.NET实现ChatGPT的Stream传输的过程

输入完成按回车键会显示一个undefined

然后下一步就调用这个方法,当执行下面这个代码会发现控制台会一个一个字显示内容。

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

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

.NET实现ChatGPT的Stream传输的过程

看效果控制台的字在一个一个输出,请注意不要使用axios,默认是不支持的。

到此这篇关于.NET如何实现ChatGPT的Stream传输的文章就介绍到这了,更多相关.NETStream传输内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • Asp.netcore实现PushStream视频流推送
  • .NETCore跨平台串口通讯使用SerialPortStream基础类库问题解决
  • asp.net使用DataSet的ReadXml读取XML文件及Stream流的方法
  • asp.net StreamReader 创建文件的实例代码
  • .Net笔记:System.IO之Stream的使用详解
  • asp.net下DataSet.WriteXml(String)与(Stream)的区别

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 ASP.NET .NET实现ChatGPT的Stream传输的过程 https://www.u-9.cn/biancheng/aspnet/181849.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务