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 +' '; //将内容追加到界面中
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: chunked
25\r\n
This is the data in the first chunk\r\n
1C\r\n
and this is the second one\r\n
0\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数组；后者直接解析数据，更加便捷。详细的可以参考第二个参考材料。