当前位置:首页 » 《休闲阅读》 » 正文

ASP.NET Core Web API 流式返回,实现ChatGPT逐字显示

17 人参与  2024年03月26日 15:31  分类 : 《休闲阅读》  评论

点击全文阅读


?作者:科技、互联网行业优质创作者
?专注领域:.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造
?欢迎关注我(Net数字智慧化基地),里面有很多高价值技术文章,是你刻苦努力也积累不到的经验,能助你快速成长。升职+涨薪!!

Websocket、SSE(Server-Sent Events)和长轮询(Long Polling)都是用于网页和服务端通信的技术。

Websocket是一种全双工通信协议,能够实现客户端和服务端之间的实时通信。它基于TCP协议,并且允许服务器主动向客户端推送数据,同时也允许客户端向服务器发送数据。

SSE是一种单向通信协议,允许服务器向客户端推送数据,但不支持客户端向服务器发送数据。SSE建立在HTTP协议上,通过在HTTP响应中使用特殊的Content-Type和事件流(event stream)格式来实现。

长轮询是一种技术,客户端向服务器发送一个请求,并且服务器保持连接打开直到有数据可以返回给客户端。如果在指定的时间内没有数据可用,则服务器会关闭连接,客户端需要重新建立连接并再次发起请求。

New Bing聊天页面是通过WebSocket进行通信。

图片

Open AI的ChatGPT接口则是通过SSE协议由服务端推送数据

图片

事实上,以上几种方式包括长轮询,都可以实现逐字显示的效果。那还有没有其他的办法可以实现这种效果了呢?

流式响应

当客户端返回流的时候,客户端可以实时捕获到返回的信息,并不需要等全部Response结束了再处理。

下面就用ASP.NET Core Web API作为服务端实现流式响应。

返回文本内容

服务端

[HttpPost("text")]public async Task Post(){    string filePath = "文档.txt";    Response.ContentType = "application/octet-stream";    var reader = new StreamReader(filePath);    var buffer = new Memory<char>(new char[5]);    int writeLength = 0;    //每次读取5个字符写入到流中    while ((writeLength = await reader.ReadBlockAsync(buffer)) > 0)    {        if (writeLength < buffer.Length)        {          buffer = buffer[..writeLength];        }        await Response.WriteAsync(buffer.ToString());        await Task.Delay(100);    }}

客户端

C# HttpClient

public async void GetText(){    var url = "http://localhost:5000/config/text";    var client = new HttpClient();    using HttpRequestMessage httpRequestMessage = new HttpRequestMessage(HttpMethod.Post, url);    var response = await client.SendAsync(httpRequestMessage, HttpCompletionOption.ResponseHeadersRead);    await using var stream = await response.Content.ReadAsStreamAsync();    var bytes = new byte[20];    int writeLength = 0;    while ((writeLength = stream.Read(bytes, 0, bytes.Length)) > 0)    {      Console.Write(Encoding.UTF8.GetString(bytes, 0, writeLength));    }    Console.WriteLine();    Console.WriteLine("END");}

HttpCompletionOption枚举有两个值,默认情况下使用的是ResponseContentRead

ResponseContentRead:等到整个响应完成才完成操作

ResponseHeadersRead:一旦获取到响应头即完成操作,不用等到整个内容响应

图片

js XMLHttpRequest

<script>    var div = document.getElementById("content")    var url = "http://localhost:5000/config/text"    var client = new XMLHttpRequest()    client.open("POST", url)    client.onprogress = function (progressEvent) {        div.innerText = progressEvent.target.responseText    }    client.onloadend = function (progressEvent) {        div.append("END")    }    client.send()</script>

​​​​​​​用axios请求就是监听onDownloadProgress了。

浏览器是通过Response Header中的Content-Type来解析服务端响应体的。如果后端接口没有设置Response.ContentType = "application/octet-stream"onprogress只会在响应全部完成后触发。

图片

返回图片

服务端

​​​​​​

[HttpGet("img")]public async Task Stream(){    string filePath = "pixelcity.png";    new FileExtensionContentTypeProvider().TryGetContentType(filePath, out string contentType);    Response.ContentType = contentType ?? "application/octet-stream";    var fileStream = System.IO.File.OpenRead(filePath);    var bytes = new byte[1024];    int writeLength = 0;    while ((writeLength = fileStream.Read(bytes, 0, bytes.Length)) > 0)    {        await Response.Body.WriteAsync(bytes, 0, writeLength);        await Task.Delay(100);    }}

图片

?欢迎关注我(Net数字智慧化基地),里面有很多高价值技术文章,是你刻苦努力也积累不到的经验,能助你升职+涨薪!!
?点击下方卡片关注公众号,里面有很多大佬的技术文章,能助你快速成长。还可免费领取如下15个视频教程!

回复'面试',获取C#/.NET/.NET Core面试宝典

回复'C#',领取零基础学习C#编程

回复'NET',领取.NET零基础入门到实战

回复'Linux',领取Linux从入门到精通

回复'wpf',领取高薪热门【WPF上位机+工业互联网】从零手写实战

回复'Modbus',领取初识C#+上位机Modbus通信

回复'PLC',领取C#语言与西门子PLC的通信实操

回复'blazor',领取blazor从入门到实战

回复'TypeScript',领取前端热门TypeScript系统教程

回复'vue',领取vue前端从入门到精通

回复'23P',领取C#实现23种常见设计模式

回复'MongoDB',领取MongoDB实战

回复'Trans',领取分布式事务

回复'Lock',领取分布式锁实践

回复'Docker',领取微服务+Docker综合实战

回复'K8s',领取K8s部署微服务

回复'加群',进.NET技术社区交流群 

 


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/85977.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 林晚夏江肆年(进错房,嫁给八零最牛特种兵在线阅读)全文免费阅读无弹窗大结局_(林晚夏江肆年)进错房,嫁给八零最牛特种兵在线阅读免费阅读全文最新章节列表_笔趣阁(林晚夏江肆年) -
  • 进错房,嫁给八零最牛特种兵完整版阅读小说(林晚夏江肆年)全文免费阅读无弹窗大结局_(进错房,嫁给八零最牛特种兵完整版阅读)林晚夏江肆年免费阅读全文最新章节列表_笔趣阁(进错房,嫁给八零最牛特种兵完整版阅读) -
  • 新雪藏旧事全文全文(商云萝周砚京)全文免费阅读无弹窗大结局_(新雪藏旧事全文小说免费阅读)最新章节列表_笔趣阁(新雪藏旧事全文) -
  • 在线免费小说重生七零替嫁:不嫁教授,嫁军官_乔珊珊乔婉月新热门小说_热门小说乔珊珊乔婉月
  • 免费小说《冯云漪厉晋泽》已完结(冯云漪厉晋泽)热门小说大结局全文阅读笔趣阁
  • 祁兰湘邵黎晖小说_祁兰湘邵黎晖完整版大结局小说免费阅读
  • 完整免费小说老公心疼青梅将她留宿新房,却将怀孕的我赶出家门(乔玥傅慎行姜禾)_老公心疼青梅将她留宿新房,却将怀孕的我赶出家门(乔玥傅慎行姜禾)完本小说免费阅读(乔玥傅慎行姜禾)
  • 新雪藏旧事:结局+番外+完结免费小说在线阅读_小说完结推荐新雪藏旧事:结局+番外+完结商云萝周砚京热门小说
  • 初逢青山梦长安(顾怀瑾沈书妤)阅读 -
  • 无删减版《绝对权力:从天崩开局走上官途巅峰》在线免费阅读
  • 《绝对权力:从天崩开局走上官途巅峰》小说在线试读,《绝对权力:从天崩开局走上官途巅峰》最新章节目录
  • 裴泽苏星辰何娇(满目星辰不及你小说)精彩章节在线阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1