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

news2025/3/15 5:44:19

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: 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数组;后者直接解析数据,更加便捷。详细的可以参考第二个参考材料。

5、参考资料

1、分块编码(Transfer-Encoding: chunked)
2、fetch实现流式输出的实现原理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2315263.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

游戏引擎学习第158天

回顾和今天的计划 我们在这里会实时编码一个完整的游戏&#xff0c;没有使用引擎或库&#xff0c;一切都由我们自己做所有的编程工作&#xff0c;游戏中的每一部分&#xff0c;无论需要做什么&#xff0c;我们都亲自实现&#xff0c;并展示如何完成这些任务。今天&#xff0c;…

[新能源]新能源汽车快充与慢充说明

接口示意图 慢充接口为交流充电口&#xff08;七孔&#xff09;&#xff0c;快充接口为直流充电口&#xff08;九孔&#xff09;。 引脚说明 上图给的是充电口的引脚图&#xff0c;充电枪的为镜像的。 慢充接口引脚说明 快充接口引脚说明 充电流程 慢充示意图 慢充&…

在IDEA中连接达梦数据库:详细配置指南

达梦数据库&#xff08;DM Database&#xff09;作为国产关系型数据库的代表&#xff0c;广泛应用于企业级系统开发。本文将详细介绍如何在IntelliJ IDEA中配置并连接达梦数据库&#xff0c;助力开发者高效完成数据库开发工作。 准备工作 1. 下载达梦JDBC驱动 访问达梦官方资…

基于yolov8+streamlit实现目标检测系统带漂亮登录界面

【项目介绍】 基于YOLOv8和Streamlit实现的目标检测系统&#xff0c;结合了YOLOv8先进的目标检测能力与Streamlit快速构建交互式Web应用的优势&#xff0c;为用户提供了一个功能强大且操作简便的目标检测平台。该系统不仅具备高精度的目标检测功能&#xff0c;还拥有一个漂亮且…

软件性能测试与功能测试联系和区别

随着软件开发技术的迅猛发展&#xff0c;软件性能测试和功能测试成为了确保软件质量的两个重要环节。那么只有一字之差的性能测试和功能测试分别是什么?又有哪些联系和区别呢? 一、软件性能测试是什么?   软件性能测试是为了评估软件系统在特定条件下的表现&#xff0c;包…

Axure设计之堆叠柱状图教程(中继器)

堆叠柱状图是一种常用的数据可视化工具&#xff0c;它通过在同一柱状图内堆叠不同类别的数据&#xff0c;以展示每个类别在总体中的贡献或占比。堆叠柱状图不仅可以帮助我们观察数据的总量&#xff0c;还能清晰地揭示各部分之间的关系和变化趋势。以下是一个使用Axure制作动态效…

本地部署Hive集群

规划 服务机器Hive本体部署在Node1元数据服务所需的关系型数据库(MYSQL)部署在Node1 安装MYSQL数据库 # 更新密钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022# 安装Mysql yum库 rpm -Uvh http://repo.mysql.com//mysql57-community-release-el7-7.noarch.…

零成本本地化搭建开源AI神器LocalAI支持CPU推理运行部署方案

文章目录 前言1. Docker部署2. 简单使用演示3. 安装cpolar内网穿透4. 配置公网地址5. 配置固定公网地址 前言 嘿&#xff0c;小伙伴们&#xff01;今天给大家带来一个超酷的黑科技——LocalAI。没错&#xff0c;你没听错&#xff0c;就是那个能在你的个人电脑上运行大型语言模…

git使用命令总结

文章目录 Git 复制创建提交步骤Git 全局设置:创建 git 仓库:已有仓库? 遇到问题解决办法&#xff1a;问题一先git pull一下&#xff0c;具体流程为以下几步&#xff1a; 详细步骤 Git 复制 git clone -b RobotModelSetting/develop https://gitlab.123/PROJECT/123.git创建提…

内容中台的核心架构是什么?

模块化架构设计解析 内容中台的模块化架构通过分层解耦实现灵活扩展&#xff0c;其核心由基础资源层、能力服务层与业务应用层构成。基础层以统一数据治理体系为支撑&#xff0c;通过标准化接口实现结构化与非结构化数据的统一存储&#xff0c;例如Baklib采用分布式存储架构保…

bootloader相关部分

简单说明 程序烧录的方式主要有ICP,ISP,IAP 其中ICP就是常用的jlink等工具 ISP就是利用MCU自带的一些特殊引脚烧录&#xff0c;比如uart IAP就是利用用户写的bootloader代码烧录 bootloader主要分为三层&#xff0c;厂家出厂的bootrom ,用户自己写的bootloader&#xff0c;…

AI+视频监控电力巡检:EasyCVR视频中台方案如何赋能电力行业智能化转型

随着电力行业的快速发展&#xff0c;电力设施的安全性、稳定性和运维效率变得至关重要。传统视频监控系统在实时性、智能化及多系统协同等方面面临严峻挑战。EasyCVR视频中台解决方案作为一种先进的技术手段&#xff0c;在电力行业中得到了广泛应用&#xff0c;为电力设施的监控…

C++从入门到入土(七)——多态

目录 前言 多态的概念 多态的定义 虚函数的介绍 虚函数的重写/覆盖 析构函数的重写 override和final关键字 纯虚函数和抽象类 重写/重载/隐藏总结 多态的原理 小结 前言 C一共有三个特性&#xff0c;封装、继承和多态&#xff0c;在前面的文章中&#xff0c;我们分别…

新闻网页信息抽取

1. 网页信息抽取 问题定义&#xff1a;对新闻网页&#xff08;输入为HTML&#xff09;提取结构化信息&#xff0c;包括标题、发布时间、作者、正文、图片等。 动机&#xff1a;由于网页&#xff08;大多数为HTML格式&#xff09;通常带有很多标签、样式、脚本等信息&#xff0…

Docker 部署Spring boot + Vue(若依为例)

首先我们要在docker中安装好环境镜像 jdk. mysql. redis. nginx 镜像安装我们在上一篇文章中已说明&#xff0c;请大家自行查看。 下面我介绍部署步骤 部署后台jar 在你的工作目录下新建application 用来存放后台jar包 1.将打好的jar包上传 2.编写Dockerfile文件&#…

PDF文件里到底有什么?

PDF 文档结构由多个组件组成&#xff0c;这些组件决定了文本、图像和其他元素的存储和显示方式。PDF 是一种二进制文件格式&#xff0c;这意味着您无法在文本编辑器中直接编辑 PDF 文件。添加或删除一个字符都可能导致整个文件损坏&#xff01; PDF 文件结构 理解 PDF 文档结…

FANUC机器人几种常用的通讯网络及接口

FANUC机器人几种常用的通讯网络及接口 Devicenet 网络通讯接口&#xff0c;接口为5针线 (规定用的机架为 81-84&#xff09; PROFIBUS 网络通讯接口&#xff0c;针脚为2针&#xff08;规定用的机架为 67&#xff09; Intemet 网络通讯接口&#xff08;常用的网线接口&#xf…

实用插件分享:@plugin-web-update-notification/vite 的使用指南

实用插件分享&#xff1a;plugin-web-update-notification/vite 的使用指南 在前端开发的过程中&#xff0c;及时告知用户网页有更新是提升用户体验的一个重要方面。plugin-web-update-notification/vite 就是一款能够轻松实现网页更新通知功能的插件&#xff0c;下面就来详细…

IEC61850标准下MMS 缓存报告控制块 ResvTms详细解析

IEC61850标准是电力系统自动化领域唯一的全球通用标准。IEC61850通过标准的实现&#xff0c;使得智能变电站的工程实施变得规范、统一和透明&#xff0c;这大大提高了变电站自动化系统的技术水平和安全稳定运行水平。 在 IEC61850 标准体系中&#xff0c;ResvTms&#xff08;r…

人工智能与人的智能,思维模型分享【2】沉没成本

**沉没成本&#xff08;Sunk Cost&#xff09;** 是指已经发生且无法收回的成本&#xff08;时间、金钱、精力等&#xff09;。沉没成本思维模型的核心原则是&#xff1a;理性决策应基于未来可能的收益与成本&#xff0c;而非被已经无法改变的历史投入所影响。陷入沉没成本陷阱…