当前位置: 首页 > 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.小写字母与大写字母的…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

大模型——基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程

基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网:https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘,大小大概2.9G,做这行最忌讳的就是安装软件全装C盘,所以我调整了下安装路径。 新建安装目录:E:\MyS…...

Android屏幕刷新率与FPS(Frames Per Second) 120hz

Android屏幕刷新率与FPS(Frames Per Second) 120hz 屏幕刷新率是屏幕每秒钟刷新显示内容的次数&#xff0c;单位是赫兹&#xff08;Hz&#xff09;。 60Hz 屏幕&#xff1a;每秒刷新 60 次&#xff0c;每次刷新间隔约 16.67ms 90Hz 屏幕&#xff1a;每秒刷新 90 次&#xff0c;…...

比特币:固若金汤的数字堡垒与它的四道防线

第一道防线&#xff1a;机密信函——无法破解的哈希加密 将每一笔比特币交易比作一封在堡垒内部传递的机密信函。 解释“哈希”&#xff08;Hashing&#xff09;就是一种军事级的加密术&#xff08;SHA-256&#xff09;&#xff0c;能将信函内容&#xff08;交易细节&#xf…...

21-Oracle 23 ai-Automatic SQL Plan Management(SPM)

小伙伴们&#xff0c;有没有迁移数据库完毕后或是突然某一天在同一个实例上同样的SQL&#xff0c; 性能不一样了、业务反馈卡顿、业务超时等各种匪夷所思的现状。 于是SPM定位开始&#xff0c;OCM考试中SPM必考。 其他的AWR、ASH、SQLHC、SQLT、SQL profile等换作下一个话题…...