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

使用C# ASP.NET创建一个可以由服务端推送信息至客户端的WEB应用（一）

news 来源：原创 2025/4/30 8:47:58

背景

用户在WEB页面上点击按钮，服务端需要执行一系列操作，该操作系列步骤较多且耗时长，为了更好的给用户浏览体验，需要在每进行一个步骤由服务端推送消息给客户端（浏览器），避免一个长时间的操作在用户看来是没有进度的过程。

环境

C# ASP.NET VS2022 WIN10 64位
主要使用 Microsoft.AspNet.SignalR 组件实现

步骤

1.创建ASP.NET Web应用程序

在这里插入图片描述

2. 通过 NuGet 包管理器安装 Microsoft.AspNet.SignalR

在这里插入图片描述

安装完成后会增加下述JS脚本在项目中：

此时直接运行之前Default.aspx会报错，如下图：
在这里插入图片描述
这个错误是因为使用SignalR时，需要有一个OWIN启动类来配置SignalR的中间件。OWIN（Open Web Interface for .NET）是一个标准，用于定义.NET Web应用程序和Web服务器之间的接口。

3. 后台代码

3.1 使用 OWIN 中间件来配置 SignalR

增加启动类 StartUp.cs，命名空间适配自己的，需要引用Microsoft.Owin

using Microsoft.Owin;
using Owin;
using System;
using System.Web;[assembly: OwinStartup(typeof(SignalRTest.Startup))]namespace SignalRTest
{public class Startup{public void Configuration(IAppBuilder app){// 配置SignalRapp.MapSignalR();}}
}

此时运行WEB应用，页面不再报错

3.2 增加ProcessHub类

using Microsoft.AspNet.SignalR;
using System;
using System.Threading.Tasks;
using System.Threading;
using System.Web;namespace SignalRTest
{public class ProcessHub : Hub{// 这个方法将被服务端直接调用，用于向客户端发送进度消息public static void SendProgress(string message){var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProcessHub>();hubContext.Clients.All.updateProgress(message);}}
}

4. 前端代码

在ASP.NET页面的 head 部分增加 JS代码

<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.4.3.min.js"></script>
<script src="/signalr/hubs"></script><script type="text/javascript">$(function () {// 引用 SignalR hubvar processHub = $.connection.processHub;// 定义客户端接收进度更新的方法processHub.client.updateProgress = function (message) {$('#progressDiv').append('<p>' + message + '</p>');};// 启动连接$.connection.hub.start().done(function () {console.log('SignalR 连接已建立');}).fail(function (error) {console.log('SignalR 连接失败: ' + error);});});</script>

body 表单部分增加相应的控件
Button 用于响应用户操作
progressDiv 用于展示进度文本

    <form id="form1" runat="server"><div><h2>SignalR 进度示例</h2><asp:Button ID="btnProcess" runat="server" Text="开始处理" OnClick="btnProcess_Click" /><hr /><div id="progressDiv" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px; min-height: 100px; height: 470px;"></div></div></form>

注意：
<script src=“/signalr/hubs”>
必须要有，启动页面后控制台可见输出：
在这里插入图片描述

4.1 前端页面的后台代码

using Microsoft.AspNet.SignalR.Infrastructure;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace SignalRTest
{public partial class Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void btnProcess_Click(object sender, EventArgs e){// 创建一个任务来异步处理Excel生成Task.Run(() => ProcessData());}private void ProcessData(){Thread.Sleep(100);ProcessHub.SendProgress("开始处理数据...");Thread.Sleep(1000);// 模拟处理2024年数据ProcessHub.SendProgress("正在处理2024年的数据...");Thread.Sleep(5000);  // 模拟处理需要5秒// 模拟处理2025年数据ProcessHub.SendProgress("正在处理2025年的数据...");Thread.Sleep(5000);  // 模拟处理需要5秒ProcessHub.SendProgress("数据处理完成！");}}
}