【分段传输】c#使用IAsyncEnumerable实现流式分段传输
引言
在使用SSE的时候，前端可以实现流式传输，但是有个问题就是这是一个独占的连接，相当于如果你不手动关闭连接，就会一直请求，一直连接调用接口，而且发送的数据格式也是按照定义好的协议来，而使用c#自带的IAsyncEnumerable也可以实现流式传输，不过返回的数据是在之前返回的基础上进行累加，需要自己做处理，我的例子是使用的是ajax来实现，群友有提供了fetch的实现代码，接下来我们看看c#IAsyncEnumerable实现传输的ajax方案和fetch的代码吧。
AJAX
下面是源码和gif效果展示，可以看到我们返回的是一个IAsyncEnumerable<int>类型的结果，在第二段代码，我们都知道ajax是根据xhrhttprequest封装的，所以自然也可以用一些它的一些事件，所以我们在此处用了onprogress来监听我们请求的进度，在这里我们就可以获取到每一次写了哪些东西，从而实现一个流传输，因为后端写也是一个字节一个字节去写的，前端接收也是如此。
[HttpGet("Postb")]
public async IAsyncEnumerable<int> PostB()
{
await foreach (var item in GetData())
{
yield return item;
}
}
private async IAsyncEnumerable<int> GetData()
{
foreach (int item in Enumerable.Range(0,100))
{
await Task.Delay(100);
yield return item;
}
}
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script> function callAjax() {
$.ajax({
url: 'http://localhost:5203/WeatherForecast/Postb',
method: 'GET',
contentType: 'application/json',
xhrFields: {
onprogress: function (e) {
var msg = e.currentTarget.response;
$("#list").append(`<h5>${msg}</h5>`);
console.log("接收的数据是=>" + msg);
},
onchange: function (a) {
debugger;
}
},
success: function () {
console.log("分块读取完成");
},
error: function (xhr, status, error) {
console.log("请求失败");
console.log("错误信息: " + error);
}
});
}
</script>
</head>
<body>
<button onclick="callAjax()">调用AJAX</button>
</body>
</html>
SSE
SSE全称Server Sent Event，从名字我们可以看出，这是一个服务端单向发送到客户端的，与WebSocket不同，但是两者都是长连接，上面的ajax的响应标头是applycation/json，SSE的必须是text/event-stream,并且SSE的发送的参数也都是有固定的格式，每一个发送的消息都是由\n\n分割，每一个message由若干个可选的字段组成，例如下面，field：value是一个message里面的内容，field可选范围是下面那四个，第二代码段是后端的代码，展示了一个完整的message，包括了data，event，retry和id，其中上面，我们设置了响应的Content-type是text/event-stream，设置是不缓存no-cache，下面设置是保持连接，keepalive，因为是长连接嘛，id和data可以随便给，retry是端口连接后的一个重新连接时间，event是一个事件的名称，我们给客户端返回这个格式的内容，客户端就会根据这个内容就返回数据，调用我们的event，从而实现一个流式输出。
[field]: value\n //这是一个Message //下面是可选的字段
data
event
id
retry
[HttpGet("Posta")]
public IActionResult Posta()
{
if (Response.Headers.ContainsKey("Content-Type"))
{
Response.Headers.Remove("Content-Type");
Response.Headers.Add("Content-Type", "text/event-stream");
}
else
{
Response.Headers.Add("Content-Type", "text/event-stream");
}
Response.Headers.Add("Cache-Control", "no-cache");
Response.Headers.Add("Connection", "keep-alive");
string data =
$"id: {Random.Shared.Next()} \n" +
$"retry: {Random.Shared.Next(0, 100) * 30}\n" +
$"event: message\n" +
$"data: {Random.Shared.Next()}\n\n";return Content(data);
}
<!DOCTYPE html>
<html>
<head>
<title>SSE Example</title>
<script>
var eventSource = new EventSource("http://localhost:5203/WeatherForecast/Posta");
eventSource.addEventListener("message", function(event) {
var a=document.getElementById("aaa");
a.innerHTML+="<a>"+event.data+"</a><br>"
console.log("Received message: " + event.data);
});
eventSource.addEventListener("error", function(event) {
console.log("Error occurred");
});
</script>
</head>
<body>
<div id='aaa'></div>
</body>
</html>
总结
以上便是今天的全部内容，当然，图片的流式传输，返回html然后显示，也可以直接去给响应流写数据，content-type是stream的形式，会一点一点的加载，感兴趣的朋友可以自己手动尝试一下下咯。
【分段传输】c#使用IAsyncEnumerable实现流式分段传输的更多相关文章
- ASP.NET Core SignalR中的流式传输
什么是流式传输? 流式传输是这一种以稳定持续流的形式传输数据的技术. 流式传输的使用场景 有些场景中,服务器返回的数据量较大,等待时间较长,客户端不得不等待服务器返回所有数据后,再进行相应的操作.这时 ...
- tcp流式传输和udp数据报传输
所有的书上都说, tcp是流式传输, 这是什么意思? 假设A给B通过TCP发了200字节, 然后又发了300字节, 此时B调用recv(设置预期接受1000个字节), 那么请问B实际接受到多少字节? ...
- 为什么从REST转向gRPC 需要流式传输搜索结果，也就是在有第一批结果时就开始传输
https://mp.weixin.qq.com/s/aEO3Y8SkObNgfQU3z8sH2w 我们为什么从REST转向gRPC 原创 Levin Fritz InfoQ 2019-06-23 作 ...
- 从Storm和Spark 学习流式实时分布式计算的设计
0. 背景 最近我在做流式实时分布式计算系统的架构设计,而正好又要参加CSDN博文大赛的决赛.本来想就写Spark源码分析的文章吧.但是又想毕竟是决赛,要拿出一些自己的干货出来,仅仅是源码分析貌似分量 ...
- Django的视图流式响应机制
Django的视图流式响应机制 Django的响应类型:一次性响应和流式响应. 一次性响应,顾名思义,将响应内容一次性反馈给用户.HttpResponse类及子类和JsonResponse类属于一次性 ...
- 【Azure媒体服务 Azure Media Service】Azure Media Service中Stream Endpoint 说明 (流式处理终结点)
Azure 媒体服务是一个基于云的媒体工作流平台,用于生成需要编码.打包.内容保护和直播活动广播的解决方案. 在视频的直播,点播方案中,媒体服务的架构主要由三部分构成: 推流端,把本地视频或直播内容推 ...
- 翻译-In-Stream Big Data Processing 流式大数据处理
相当长一段时间以来,大数据社区已经普遍认识到了批量数据处理的不足.很多应用都对实时查询和流式处理产生了迫切需求.最近几年,在这个理念的推动下,催生出了一系列解决方案,Twitter Storm,Yah ...
- JavaScript AJAX stream 流式显示
当使用AJAX进行信息交互的时候,如果服务器返回的信息比较大,那么相对于传送完成之后的统一显示,流式显示就比较友好了. 流式实现 原理就是设置定时器,定时的查看AJAX对象的状态并更新内容,如果传 ...
- JDFS:一款分布式文件管理系统，第三篇(流式云存储)
一 前言 看了一下,距离上一篇博客的发表已经过去了4个月,时间过得好快啊.本篇博客是JDFS系列的第三篇博客,JDFS的目的是为了实现一个分布式的文件管理系统,前两篇实现了基本的上传.下载功能,但是那 ...
- JDFS:一款分布式文件管理系统，第四篇(流式云存储续篇)
一 前言 本篇博客是JDFS系列博客的第四篇,从最初简单的上传.下载,到后来加入分布式功能,背后经历了大量的调试,尤其当实验的虚拟计算结点数目增加后,一些潜在的隐藏很深的bug就陆续爆发.在此之前笔者 ...
随机推荐
- NextJS项目的部署以及多环境的实现
背景 开发了个Next项目,将部署过程记录一下.另外由于项目准备了两个服务器分别作为开发自测的开发环境和交付给客户的生产环境使用:因此也介绍一下NextJS项目中多环境的配置. 项目结构 计划是让Ng ...
- 记一次线上bug：crontab 被意外清空
记一次线上bug:crontab 被意外清空 目录 记一次线上bug:crontab 被意外清空 问题概述 问题排查 问题复现 其他测试 总结 又是一次难忘的经历. 问题概述 同事反馈,某台服务器的c ...
- python笔记：第二章基本数据类型
基本数据类型 Python中的数据类型可以分为五大类:字符串.数字.容器.布尔.None 1.字符串 可以使用单引号或双引号创建字符串,可以用加号将两个字符串合并 name = '小明' age = ...
- Vue + Element ui 实现动态表单，包括新增行/删除行/动态表单验证/提交功能
总结/朱季谦 最近通过Vue + Element ui实现了动态表单功能,该功能还包括了动态表单新增行.删除行.动态表单验证.动态表单提交功能,趁热打铁,将开发心得记录下来,方便以后再遇到类似功能时, ...
- 深度学习（五）——DatadLoader的使用
一.DataLoader简介 官网地址: torch.utils.data - PyTorch 2.0 documentation 1. DataLoder类 class torch.utils.da ...
- 2022-1-10 WPF基础知识点温习
一.window Icon :允许自定义窗口图标 ResizeMode:调整控制大小,默认为CanResize. CanMinimize允许用户最小化窗口. NoResize没有格式. ShowIn ...
- zabbix6.4 邮件告警配置
1.注意事项 QQ邮箱不支持zabbix6以上邮件配置,报拒绝登录 建议使用163.com网易邮箱地址 2.添加媒介 创建媒介类型-> 3.添加用户 一般情况下,无需创建用户,编辑admin即可 ...
- 从浅入深了解.NET Core MVC 2.x全面教程【第二章】
二.Logging 1.诊断中间件 命名空间:Microsoft.AspNetCore.Diagnostics 报告信息并处理异常 2.诊断中间件 UseDeveloperExceptionPage: ...
- [ABC128E] Roadwork
2023-01-14 题目 题目传送门 翻译 翻译 难度&重要性(1~10):4 题目来源 AtCoder 题目算法 区间覆盖,线段树,双堆 解题思路 可以将问题转化为区间覆盖问题和单点查询问 ...
- 谁家面试往死里问 Swagger 啊？
大家好,我是小富- 前言 说个挺奇葩的事,有个老铁给我发私信吐槽了一下它的面试经历,他去了个国企单位面试,然后面试官跟他就Swagger的问题聊了半个多小时.额- 面试嘛这些都不稀奇,总能遇到是千奇百 ...