【分段传输】c#使用IAsyncEnumerable实现流式分段传输

仰天發表於 2023-10-20 14:09:00

【分段传输】c#使用IAsyncEnumerable实现流式分段传输

<h1>引言</h1>
　　　　在使用SSE的时候，前端可以实现流式传输，但是有个问题就是这是一个独占的连接，相当于如果你不手动关闭连接，就会一直请求，一直连接调用接口，而且发送的数据格式也是按照定义好的协议来，而使用c#自带的IAsyncEnumerable也可以实现流式传输，不过返回的数据是在之前返回的基础上进行累加，需要自己做处理，我的例子是使用的是ajax来实现，群友有提供了fetch的实现代码，接下来我们看看c#IAsyncEnumerable实现传输的ajax方案和fetch的代码吧。
<h1>AJAX</h1>
 　　　　下面是源码和gif效果展示，可以看到我们返回的是一个IAsyncEnumerable<int>类型的结果，在第二段代码，我们都知道ajax是根据xhrhttprequest封装的，所以自然也可以用一些它的一些事件，所以我们在此处用了onprogress来监听我们请求的进度，在这里我们就可以获取到每一次写了哪些东西，从而实现一个流传输，因为后端写也是一个字节一个字节去写的，前端接收也是如此。
<div class="cnblogs_code">
<pre>
public async IAsyncEnumerable<int> PostB()
{
await foreach (var item inGetData())
{
 yield return item;
}
}
private async IAsyncEnumerable<int> GetData()
{
 foreach (int item in Enumerable.Range(0,100))
 {
 await Task.Delay(100);
 yield return item;
 }
}</pre>
</div>
 
<div class="cnblogs_code">
<pre><!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></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/2086997/202310/2086997-20231020134202296-1219147740.gif" alt="" loading="lazy">
<h1> SSE</h1>
　　　　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，从而实现一个流式输出。
<div class="cnblogs_code">
<pre>: value\n//这是一个Message

//下面是可选的字段
data
event
id
retry</pre>
</div>
<div class="cnblogs_code">
<pre>
publicIActionResult 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);
}</pre>
</div>
<div class="cnblogs_code">
<pre><!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> "
 console.log("Received message: " + event.data);
 });
 eventSource.addEventListener("error", function(event) {
 console.log("Error occurred");
 });
</script>
</head>
<body>
<div id='aaa'></div>
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/2086997/202310/2086997-20231020140733243-449239702.gif" alt="" loading="lazy">
<h1> 总结</h1>
　　　　以上便是今天的全部内容，当然，图片的流式传输，返回html然后显示，也可以直接去给响应流写数据，content-type是stream的形式，会一点一点的加载，感兴趣的朋友可以自己手动尝试一下下咯。 
来源：https://www.cnblogs.com/1996-Chinese-Chen/p/17776939.html

頁: [1]

琼殿技术论坛's Archiver

【分段传输】c#使用IAsyncEnumerable实现流式分段传输