当前位置: 首页 > news >正文

基于.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的应用中实现进度条功能&#xff0c;我们可以通过HttpContext.Response来发送实时的进度更新到前端。以下是一个简单的示例&#xff0c;展示了如何在ASP.NET Core应用中实现这一功能。 但是&#xff0c;我在.net framework4.7.2框架下&#xff0c;实际不了HttpC…...

力扣 LeetCode 19. 删除链表的倒数第N个结点(Day2:链表)

解题思路&#xff1a; 快慢指针 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实现声纹识别功能&#xff0c;调用科大讯飞接口&#xff1a; 声纹识别 API 文档 | 讯飞开放平台文档中心 其接口要求音频文件格式为mp3 二、问题产生 在安卓端根据官方文档说明&#xff0c;系统并不支持直接录制mp3格式音频&#xff0c;支持格式如…...

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 框架中广泛运用了多种设计模式&#xff0c;今天让我们来学习一下 1. 单例模式&#xff08;Singleton Pattern&#xff09; 用途&#xff1a;在Spring框架中&#xff0c;Bean默认是单例的&#xff0c;也就是说在容器中每种类型的Bean只有一个实例。这个设计可以节省资源…...

提升百度排名的有效策略与技巧解析

内容概要 提升百度排名对于网站的成功至关重要。首先&#xff0c;了解百度排名的基本原则&#xff0c;掌握搜索引擎是如何评估网页质量的&#xff0c;是优化过程中不可或缺的一部分。搜索引擎越来越倾向于将用户需求放在首位&#xff0c;因此提供高质量的内容和良好的用户体验…...

【Linux】Linux下查看cpu信息指令(top/mpstat/iostat/pidstat)说明

top命令 top(1) - Linux manual page (man7.org) top查看总的CPU利用率 us: 用户空间消耗的CPU资源占比&#xff0c;进程在用户态执行函数调用&#xff0c;编解码消耗的都是us sy: 内核空间消耗的CPU资源占比&#xff0c;进程调用系统调用达到内核后会增加sy的消耗 ni&…...

HDLBIts习题(3):使用冒号表示位宽时,冒号两端必须是常量

&#xff08;1&#xff09;易错习题1&#xff1a;Circuits - Combinational Logic - Multiplexers - 256-to-1 4bit multiplexer 使用冒号表示位宽时&#xff0c;冒号两端必须是常量&#xff0c;因此如果使用变量&#xff0c;可以使用位拼接的方法。 &#xff08;2&#xff09;…...

C++20协程详解

文章目录 什么是协程为什么需要协程什么时候使用协程协程的类别C20的协程协程的使用关键字co_wait框架一阶段完成数据交换co_yieldco_return 什么是协程 我们在学习编程的过程中&#xff0c;逐渐从单线程&#xff0c;到多线程&#xff0c;再到异步编程和并发处理 这些异步与并…...

Chromium 中chrome.system.display扩展接口定义c++

一、chrome.system.display 使用 system.display API 查询展示元数据。 权限 system.display 类型 ActiveState Chrome 117 及更高版本 用于指示系统是否检测到和使用显示屏的枚举。如果系统未检测到显示屏&#xff08;可能断开连接&#xff0c;或因睡眠模式等原因而被视…...

容器docker的ulimit

Ulimit 在linux里ulimit命令可以对shell生成的进程的资源进行限制。 常用的ulimit限制 打开文件句柄数core文件大小设置进程能够消耗的虚拟内存设置用户能够打开的进程数目 不太常用的ulimit限制 设置数据段的最大值.单位:kbytes 设置创建文件的最大值.单位:blocks 设置在…...

一、HTML

一、基础概念 1、浏览器相关知识 这五个浏览器市场份额都非常大&#xff0c;且都有自己的内核。 什么是内核&#xff1a; 内核是浏览器的核心&#xff0c;用于处理浏览器所得到的各种资源。 例如&#xff0c;服务器发送图片、视频、音频的资源&#xff0c;浏览…...

使用Geekbench6软件对真实和虚拟的苹果桌面系统(macOS)进行打分比较

前言 感觉VMWare安装的MacOS使用起来非常的慢&#xff0c;所以特意用打分软件GeekBench进行了评测。 一、Geekbench的安装 可以从官网直接进行下载&#xff0c; 链接是&#xff1a; 二、Geekbench的直接使用 2.1、真机的信息 2.2、虚拟机的信息 三、打分的比较 3.1、真机…...

lua入门教程:随机数

在Lua中&#xff0c;生成随机数是通过math库中的math.random函数来实现的。这个函数可以生成一个[0, 1)区间内的随机浮点数。如果你需要生成其他范围内的随机数&#xff0c;或者需要整数类型的随机数&#xff0c;可以通过一些简单的数学运算来调整math.random的输出。 以下是如…...

华为大咖说 | 浅谈智能运维技术

本文分享自华为云社区&#xff1a;华为大咖说 | 浅谈智能运维技术-云社区-华为云 本文作者&#xff1a;李文轩 &#xff08; 华为智能运维专家 &#xff09; 全文约2695字&#xff0c;阅读约需8分钟 在大数据、人工智能等新兴技术的加持下&#xff0c;智能运维&#xff08;AI…...

creo toolkit二次开发学习之获取任意选择模型作为元件,并进行获取约束等

获取任意选择模型作为元件进行操作前&#xff0c;先了解组件路径和程序集的构成&#xff1a;creo toolkit二次开发学习之程序集&#xff08;ProAsmcomp&#xff09;和装配体组件路径对象&#xff08;ProAsmcomppath&#xff09;-CSDN博客 代码如下 ProError test1() {ProError…...

sanitize-html 防止 XSS(跨站脚本攻击)

sanitize-html 是一个用于清理和验证 HTML 的 JavaScript 库&#xff0c;主要用于防止 XSS&#xff08;跨站脚本攻击&#xff09;。它允许你定义一套规则来决定哪些 HTML 标签和属性是可以被信任的&#xff0c;从而确保用户输入的内容不会包含潜在的恶意代码。 主要功能 HTML…...

【JavaEE】文件io

目录 文件类型 File概述 属性 构造方法 常用方法 Reader Writer InputStream OutputStream 字节流转字符流 通过Scanner读取InputStream 通过PrintWriter转换outputstream 示例 文件类型 从编程的角度看&#xff0c;文件类型主要就是两大类 文本&#xff08;文…...

FlinkPipelineComposer 详解

FlinkPipelineComposer 详解 原文 背景 在flink-cdc 3.0中引入了pipeline机制&#xff0c;提供了除Datastream api/flink sql以外的一种方式定义flink 任务 通过提供一个yaml文件&#xff0c;描述source sink transform等主要信息 由FlinkPipelineComposer解析&#xff0c…...

蓝桥杯-洛谷刷题-day2(C++)

目录 1.小写字母与大写字母的转换 2.使用string&#xff08;额外开一章持续补充&#xff09; i.访问字符串最后一位 3.保留N位小数输出 i.C侧 ii.C语言侧 iii.总结 4.高精度相加 i.各种数据类型转字符型 ii.三元运算符 iii.循环条件中的carry 1.小写字母与大写字母的…...

Android Native逆向实战:Frida与IDA协同分析ART内存模型

1. 这不是“游戏外挂开发指南”&#xff0c;而是一次对移动应用安全边界的诚实测绘你打开手机里那个图标是蓝色小鸟、背景是木头和石头的《愤怒的小鸟》——它早已不是2010年那个靠物理引擎惊艳全场的休闲游戏&#xff0c;而是被无数人遗忘在角落、却仍静静躺在旧安卓设备里的“…...

阴阳师自动化脚本终极指南:一键解放双手的智能游戏助手

阴阳师自动化脚本终极指南&#xff1a;一键解放双手的智能游戏助手 【免费下载链接】OnmyojiAutoScript Onmyoji Auto Script | 阴阳师脚本 项目地址: https://gitcode.com/gh_mirrors/on/OnmyojiAutoScript 还在为阴阳师中重复繁琐的日常任务而烦恼吗&#xff1f;每天需…...

Keil ULINK强制全片擦除与CRC校验实践

1. 问题现象与背景解析当使用Keil开发环境配合ULINK调试器对英飞凌C166系列微控制器进行程序烧录时&#xff0c;部分工程师会遇到一个看似奇怪的现象&#xff1a;明明在代码中设置了全片CRC校验逻辑&#xff0c;但实际运行时却出现校验失败。经过排查发现&#xff0c;ULINK默认…...

7自由度机械臂逆运动学求解:13种算法对比与混合策略实战

1. 项目概述&#xff1a;当机械臂遇到“无限可能”的烦恼在机器人领域&#xff0c;让机械臂的“手”&#xff08;末端执行器&#xff09;精准地到达一个指定的位置和姿态&#xff0c;是一个看似简单实则复杂的基础问题&#xff0c;这就是逆运动学。对于常见的6自由度机械臂&…...

建筑项目进度延误率下降37%的秘密:一个轻量化AI Agent工作流,已在12个EPC项目中闭环验证

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;建筑项目进度延误率下降37%的秘密&#xff1a;一个轻量化AI Agent工作流&#xff0c;已在12个EPC项目中闭环验证 在某头部工程总承包&#xff08;EPC&#xff09;企业落地的轻量化AI Agent工作流&#xff0c;…...

光伏系统‘阴影杀手’怎么破?对比实测:传统扰动观察法 vs. PSO智能算法在Simulink中的表现

光伏系统阴影遮挡难题的算法对决&#xff1a;P&O与PSO-MPPT全维度实测清晨的光伏电站本该是阳光洒满面板的景象&#xff0c;但现实往往残酷——一根电线杆、一棵树甚至飘过的云朵&#xff0c;都能在组件上投下阴影。这些阴影不仅降低了发电效率&#xff0c;更会引发热斑效应…...

布莱克威尔三大定理:从统计理论到AI工程的核心支柱

1. 项目概述&#xff1a;当统计学遇上人工智能如果你在机器学习领域摸爬滚打了一段时间&#xff0c;可能会发现一个有趣的现象&#xff1a;很多听起来很“新潮”的算法&#xff0c;其核心思想往往能在几十年前的统计学论文里找到源头。这并非巧合&#xff0c;而是学科发展的必然…...

C51代码空间固定地址常量定义方法与实战

1. 如何在C51代码空间中定义固定地址的常量值 在嵌入式开发中&#xff0c;有时我们需要将某些常量值存储在代码空间的特定地址。这种需求常见于以下几种场景&#xff1a; 硬件配置参数的存储 固件版本信息的存放 设备唯一标识的存储 引导加载程序的跳转地址 以8051架构为例…...

UE5.3与VS2022编译配置深度优化指南

1. 为什么UE5项目在VS2022里编译慢、报错多、改个头文件就全量重编&#xff1f;我第一次把团队刚升级的UE5.3项目拖进Visual Studio 2022时&#xff0c;整整等了17分42秒才完成首次编译——不是链接&#xff0c;是编译。中间还弹出6个“LNK2019未解析外部符号”、3个“C2039‘G…...

别再只盯着MSE了!用Python实战对比5大回归评估指标(附避坑指南)

别再只盯着MSE了&#xff01;用Python实战对比5大回归评估指标&#xff08;附避坑指南&#xff09;当你的回归模型在测试集上表现不佳时&#xff0c;第一个浮现在脑海的问题往往是&#xff1a;"该用哪个指标来评估才最合理&#xff1f;"这个问题远比想象中复杂——我…...