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

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作为服务端实现流式响应。

返回文本内容

服务端

csharp 复制代码
[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
csharp 复制代码
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 streamReader = new StreamReader(stream);
    var buffer = new Memory<char>(new char[5]);
    int writeLength = 0;
    while ((writeLength = await streamReader.ReadBlockAsync(buffer)) > 0)
    {
        if (writeLength < buffer.Length)
        {
            buffer = buffer[..writeLength];
        }
        Console.Write(buffer.ToString());
    }
    Console.WriteLine();
    Console.WriteLine("END");
}

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

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

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

js XMLHttpRequest

csharp 复制代码
<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只会在响应全部完成后触发。

返回图片

服务端

csharp 复制代码
[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);
    }
}
相关推荐
Chrikk3 分钟前
Go-性能调优实战案例
开发语言·后端·golang
幼儿园老大*6 分钟前
Go的环境搭建以及GoLand安装教程
开发语言·经验分享·后端·golang·go
canyuemanyue6 分钟前
go语言连续监控事件并回调处理
开发语言·后端·golang
杜杜的man9 分钟前
【go从零单排】go语言中的指针
开发语言·后端·golang
cs_dn_Jie9 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic43 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript