基于.NET 9实现实时进度条功能：前后端完整示例教程
要在基于.NET 9的应用中实现进度条功能，我们可以通过HttpContext.Response来发送实时的进度更新到前端。以下是一个简单的示例，展示了如何在ASP.NET Core应用中实现这一功能。
但是，我在.net framework4.7.2框架下，实际不了HttpContext.Response.WriteAsync，发贴求解决办法
后端代码（C#）
首先，我们需要创建一个ASP.NET Core控制器动作，该动作将模拟一个长时间运行的任务，并在任务执行过程中发送进度更新。
using Microsoft.AspNetCore.Mvc;
using System;
using System.Threading;
using System.Threading.Tasks;
[ApiController]
[Route("[controller]")]
public class ProgressController : ControllerBase
{[HttpGet("start")]public async Task StartLongRunningTask(){// 设置响应头，指示这是一个长时间运行的请求HttpContext.Response.Headers.Add("Connection", "keep-alive");HttpContext.Response.Headers.Add("Content-Type", "text/event-stream");HttpContext.Response.Headers.Add("Cache-Control", "no-cache");// 模拟长时间运行的任务for (int i = 0; i <= 100; i++){// 发送进度更新await SendProgress(i);// 模拟工作负载await Task.Delay(100);}// 任务完成，关闭连接await HttpContext.Response.Body.FlushAsync();HttpContext.Response.Body.Close();}private async Task SendProgress(int percentage){var data = $"data: {percentage}\n\n";var bytes = System.Text.Encoding.UTF8.GetBytes(data);await HttpContext.Response.Body.WriteAsync(bytes, 0, bytes.Length);await HttpContext.Response.Body.FlushAsync();}
}
二、前端代码（HTML + JavaScript）
接下来，我们需要创建一个简单的HTML页面，用于显示进度条，并使用JavaScript来接收后端发送的进度更新。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Progress Bar Example</title><style>#progressBar {width: 0%;height: 30px;background-color: green;text-align: center;line-height: 30px;color: white;}</style>
</head>
<body><div id="progressBar">0%</div><button onclick="startProgress()">Start Task</button><script>function startProgress() {const eventSource = new EventSource('/Progress/start');eventSource.onmessage = function(event) {const progressBar = document.getElementById('progressBar');progressBar.style.width = event.data + '%';progressBar.textContent = event.data + '%';};eventSource.onerror = function() {eventSource.close();console.error('EventSource failed.');};}</script>
</body>
</html>相关文章：
基于.NET 9实现实时进度条功能：前后端完整示例教程
要在基于.NET 9的应用中实现进度条功能，我们可以通过HttpContext.Response来发送实时的进度更新到前端。以下是一个简单的示例，展示了如何在ASP.NET Core应用中实现这一功能。 但是，我在.net framework4.7.2框架下，实际不了HttpC…...
力扣 LeetCode 19. 删除链表的倒数第N个结点（Day2：链表）
解题思路： 快慢指针 class Solution {public ListNode removeNthFromEnd(ListNode head, int n) {ListNode dummy new ListNode(-1);dummy.next head;ListNode fast dummy;ListNode slow dummy;for (int i 0; i < n; i) {fast fast.next;}while (fast.ne…...
音频格式转换
一、场景 项目需求需要App实现声纹识别功能，调用科大讯飞接口： 声纹识别 API 文档 | 讯飞开放平台文档中心 其接口要求音频文件格式为mp3 二、问题产生 在安卓端根据官方文档说明，系统并不支持直接录制mp3格式音频，支持格式如…...
npm list @types/node 命令用于列出当前项目中 @types/node 包及其依赖关系
文章目录 作用示例常用选项示例命令注意事项 1、实战举例**解决方法**1. **锁定唯一的 types/node 版本**2. **清理依赖并重新安装**3. **设置 tsconfig.json 的 types**4. **验证 Promise 类型支持** **总结** npm list types/node 命令用于列出当前项目中 types/node 包及其…...
【Spring】Spring框架中有有哪些常见的设计模式
Spring 框架中广泛运用了多种设计模式，今天让我们来学习一下 1. 单例模式（Singleton Pattern） 用途：在Spring框架中，Bean默认是单例的，也就是说在容器中每种类型的Bean只有一个实例。这个设计可以节省资源…...
提升百度排名的有效策略与技巧解析
内容概要 提升百度排名对于网站的成功至关重要。首先，了解百度排名的基本原则，掌握搜索引擎是如何评估网页质量的，是优化过程中不可或缺的一部分。搜索引擎越来越倾向于将用户需求放在首位，因此提供高质量的内容和良好的用户体验…...
【Linux】Linux下查看cpu信息指令（top/mpstat/iostat/pidstat）说明
top命令 top(1) - Linux manual page (man7.org) top查看总的CPU利用率 us: 用户空间消耗的CPU资源占比，进程在用户态执行函数调用，编解码消耗的都是us sy: 内核空间消耗的CPU资源占比，进程调用系统调用达到内核后会增加sy的消耗 ni&…...
HDLBIts习题（3）：使用冒号表示位宽时，冒号两端必须是常量
（1）易错习题1：Circuits - Combinational Logic - Multiplexers - 256-to-1 4bit multiplexer 使用冒号表示位宽时，冒号两端必须是常量，因此如果使用变量，可以使用位拼接的方法。 （2）…...
C++20协程详解
文章目录 什么是协程为什么需要协程什么时候使用协程协程的类别C20的协程协程的使用关键字co_wait框架一阶段完成数据交换co_yieldco_return 什么是协程 我们在学习编程的过程中，逐渐从单线程，到多线程，再到异步编程和并发处理 这些异步与并…...
Chromium 中chrome.system.display扩展接口定义c++
一、chrome.system.display 使用 system.display API 查询展示元数据。 权限 system.display 类型 ActiveState Chrome 117 及更高版本 用于指示系统是否检测到和使用显示屏的枚举。如果系统未检测到显示屏（可能断开连接，或因睡眠模式等原因而被视…...
容器docker的ulimit
Ulimit 在linux里ulimit命令可以对shell生成的进程的资源进行限制。 常用的ulimit限制 打开文件句柄数core文件大小设置进程能够消耗的虚拟内存设置用户能够打开的进程数目 不太常用的ulimit限制 设置数据段的最大值.单位:kbytes 设置创建文件的最大值.单位:blocks 设置在…...
一、HTML
一、基础概念 1、浏览器相关知识 这五个浏览器市场份额都非常大，且都有自己的内核。 什么是内核： 内核是浏览器的核心，用于处理浏览器所得到的各种资源。 例如，服务器发送图片、视频、音频的资源，浏览…...
使用Geekbench6软件对真实和虚拟的苹果桌面系统（macOS）进行打分比较
前言 感觉VMWare安装的MacOS使用起来非常的慢，所以特意用打分软件GeekBench进行了评测。 一、Geekbench的安装 可以从官网直接进行下载， 链接是： 二、Geekbench的直接使用 2.1、真机的信息 2.2、虚拟机的信息 三、打分的比较 3.1、真机…...
lua入门教程:随机数
在Lua中，生成随机数是通过math库中的math.random函数来实现的。这个函数可以生成一个[0, 1)区间内的随机浮点数。如果你需要生成其他范围内的随机数，或者需要整数类型的随机数，可以通过一些简单的数学运算来调整math.random的输出。 以下是如…...
华为大咖说 | 浅谈智能运维技术
本文分享自华为云社区：华为大咖说 | 浅谈智能运维技术-云社区-华为云 本文作者：李文轩 （ 华为智能运维专家 ） 全文约2695字，阅读约需8分钟 在大数据、人工智能等新兴技术的加持下，智能运维（AI…...
creo toolkit二次开发学习之获取任意选择模型作为元件，并进行获取约束等
获取任意选择模型作为元件进行操作前，先了解组件路径和程序集的构成：creo toolkit二次开发学习之程序集（ProAsmcomp）和装配体组件路径对象（ProAsmcomppath）-CSDN博客 代码如下 ProError test1() {ProError…...
sanitize-html 防止 XSS（跨站脚本攻击）
sanitize-html 是一个用于清理和验证 HTML 的 JavaScript 库，主要用于防止 XSS（跨站脚本攻击）。它允许你定义一套规则来决定哪些 HTML 标签和属性是可以被信任的，从而确保用户输入的内容不会包含潜在的恶意代码。 主要功能 HTML…...
【JavaEE】文件io
目录 文件类型 File概述 属性 构造方法 常用方法 Reader Writer InputStream OutputStream 字节流转字符流 通过Scanner读取InputStream 通过PrintWriter转换outputstream 示例 文件类型 从编程的角度看，文件类型主要就是两大类 文本（文…...
FlinkPipelineComposer 详解
FlinkPipelineComposer 详解 原文 背景 在flink-cdc 3.0中引入了pipeline机制，提供了除Datastream api/flink sql以外的一种方式定义flink 任务 通过提供一个yaml文件，描述source sink transform等主要信息 由FlinkPipelineComposer解析，…...
蓝桥杯-洛谷刷题-day2（C++）
目录 1.小写字母与大写字母的转换 2.使用string（额外开一章持续补充） i.访问字符串最后一位 3.保留N位小数输出 i.C侧 ii.C语言侧 iii.总结 4.高精度相加 i.各种数据类型转字符型 ii.三元运算符 iii.循环条件中的carry 1.小写字母与大写字母的…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
Linux云原生安全：零信任架构与机密计算
Linux云原生安全：零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言：云原生安全的范式革命 随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...