C#通过API接口返回流式响应内容---分块编码方式

1、背景

上一篇文章《C#通过API接口返回流式响应内容—SSE方式》阐述了通过SSE（Server Send Event）方式，由服务器端推送数据到浏览器。本篇是通过分块编码的方式实现

2、效果

在这里插入图片描述

3、具体代码

3.1 API端实现

[HttpGet]
public async Task ChunkedResponse()
{Response.ContentType = "text/plain";Response.Headers["Transfer-Encoding"] = "chunked"; //设置编码传输方式Response.Headers["Access-Control-Allow-Origin"] = "*"; //可以实现跨域访问//模拟DeepSeek的返回内容var phrases = new string[] { "你好！", "我是", "北京清华长庚医院", "信息管理部的", "郑林" };for (int i = 0; i < phrases.Length; i++){//1、将内容转为UTF-8编码byte[] sendContentArray = Encoding.UTF8.GetBytes(phrases[i]);//2、内容的长度var sendContentLength = sendContentArray.Length.ToString("X"); //转为16进制的标识//3、将长度内容写入到Response中var chunkedContentLength = Encoding.UTF8.GetBytes($"{sendContentLength}\r\n");await Response.Body.WriteAsync(chunkedContentLength, 0, chunkedContentLength.Length);//4、将内容与CRLF(\r\n)一起写入Response中var chunkedContentArray = Encoding.UTF8.GetBytes($"{phrases[i]}\r\n");await Response.Body.WriteAsync(chunkedContentArray, 0, chunkedContentArray.Length);await Response.Body.FlushAsync();  // 强制发送数据块await Task.Delay(1000);  // 每块之间的延时}//5、将数据终止标识写入到响应byte[] endLenghtBuffer = Encoding.UTF8.GetBytes("0\r\n");await Response.Body.WriteAsync(endLenghtBuffer, 0, endLenghtBuffer.Length);byte[] endDataBuffer = Encoding.UTF8.GetBytes("\r\n");await Response.Body.WriteAsync(endDataBuffer, 0, endDataBuffer.Length);await Response.Body.FlushAsync();//强制发送数据块
}

3.2 浏览器端的代码

<!DOCTYPE html>
<html>
<head>
<meta 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文档标题</title>
</head><body><div id="content"></div><script>fetch('http://localhost:5105/api/Stream/ChunkedResponse').then(response => {if (!response.ok) {console.log('异常发生！');}return response.body;}).then(stream => {console.log('进入方法');const reader = stream.getReader();const decoder =new TextDecoder();const contentDiv =document.getElementById('content');function readChunk() {reader.read().then(({ value, done }) => {if (done) {console.log('读取结束！');return;}var contentserver=decoder.decode(value, {stream:true}) //解析数据contentDiv.innerHTML+= contentserver +'&nbsp;'; //将内容追加到界面中readChunk(); //递归读取数据//setTimeout(readChunk, 100); // 也可以使用延时1秒后继续读取下一个数据块。但没有区别，大家可以试试});}readChunk(); // 启动读取流程}).catch(error => {console.error('Error:', error);});</script>
</body></html>

4、原理

4.1 代码解释

服务器端的返回（就是响应（Response））中分块编码的样例如下：

HTTP/1.1 200 OK
Content-Type: text/plain
Transfer-Encoding: chunked25\r\n
This is the data in the first chunk\r\n1C\r\n
and this is the second one\r\n0\r\n
\r\n

这里面包含3部分的信息
1、响应头信息中包含：Content-Type: text/plain以及Transfer-Encoding: chunked，因此在API的代码中使用了：

Response.ContentType = "text/plain";
Response.Headers["Transfer-Encoding"] = "chunked"; //设置编码传输方式

2、分块编码的数据，是放在body中，并且满足如下规则

[长度]\r\n
[数据]\r\n

（1）有两行，第一行表示长度、第二行表示数据
（2）长度为十六进制的数字，代表第二行数据的length【注意不包括\r\n】
（3）每行的最后都必须有CRLF(\r\n)
（4）整个数据的最后，要以0为结尾，告知服务器，数据已经结束。即上面样例中的：

0\r\n
\r\n

3、英文字符与中文字符的长度不一样，因此需要进行utf-8编码后，统一计算长度

4.2 前端代码说明

Fetch API是现代 Web 开发中的一个重要组成部分，它提供了一种简单且一致的方式来访问网络资源。我们要读取的内容就是Response的body，在浏览器中Response.Body是ReadableStream对象，因此可以按照流对象处理方式既可。为了实现流式输出，可以使用TransformStream 类来处理数据流，也可以使用TextDecoder直接解析。两者的却别是：前者返回一个Uint8Array数组；后者直接解析数据，更加便捷。详细的可以参考第二个参考材料。