世界热头条丨WPF+ASP.NET SignalR实现动态折线图

在实际业务中，当后台数据发生变化，客户端能够实时的收到通知，而不是由用户主动的进行页面刷新才能查看，这将是一个非常人性化的设计。有没有那么一种场景，后台数据明明已经发生变化了，前台却因为没有及时刷新，而导致页面显示的数据与实际存在差异，从而造成错误的判断。那么如何才能在后台数据变更时及时通知客户端呢？本文以一个简单的动态折线图示例，简述如何通过ASP.NET SignalR实现后台通知功能，仅供学习分享使用，如有不足之处，还请指正。

【资料图】

什么是SignalR?

ASP.NET SignalR 是一个面向 ASP.NET 开发人员的库，可简化将实时 web 功能添加到应用程序的过程。 实时 web 功能是让服务器代码将内容推送到连接的客户端立即可用，而不是让服务器等待客户端请求新数据的能力。

SignalR做了什么？

传统HTTP采用的是大家熟知的“拉模式”，即客户端发出的每次请求，服务端都是被动处理。此场景下客户端是老大，很显然只有一方主动，操作与处理起来就没那么完美。

为了能让服务端也能主动，html5的出现让这种变得可能，大家知道html5中有两种主动模式。第一种叫做websockect，WebSockets是Html5提供的新的API，可以在Web网页与服务器端间建立Socket连接，它是基于tcp模式的双工通讯。还有一种叫做SSE，也就是客户端来订阅服务器的一种事件模型。

在html5出来之前，如果要做到服务器主动，我们只能采用变相的longpool和iframe流勉强实现。

SignalR对上面四种方案进行了高度的封装，也就是说signalR会在这四种技术中根据浏览器和服务器设置采取最优的一种模式。

封装与集成

对于.NET开发者的福音，.NET平台为我们提供了一种简洁高效智能的实时信息交互技术->SignalR，它集成了上述数种技术，并能根据配置自动或手动选择其最佳应用。

SignalR用途

SignalR 提供了一个简单的 API，用于创建服务器到客户端远程过程调用 (RPC) ，该调用客户端浏览器 (和其他客户端平台中的 JavaScript 函数) 服务器端 .NET 代码。 SignalR 还包括用于连接管理的 API (，例如连接和断开连接事件) ，以及分组连接。

虽然聊天通常被用作示例，但你可以做更多的事情。每当用户刷新网页以查看新数据时，或者该网页实施 Ajax 长轮询以检索新数据时，它都是使用 SignalR 的候选者。SignalR 还支持需要从服务器进行高频更新的全新类型的应用，例如实时游戏。

官方网址和源码

官方网址：https://dotnet.microsoft.com/zh-cn/apps/aspnet/signalr

微软API文档：https://learn.microsoft.com/zh-cn/aspnet/signalr/overview/getting-started/introduction-to-signalr

GitHub网址：https://github.com/SignalR

示例截图

本示例主要实现一个动态折线图功能，主要分为服务端和客户端两部分，示例如下所示：

服务端项目创建

1. 创建一个Web服务端程序（以ASP.NET WebApi为例），默认情况下SignalR已经作为项目框架的一部分而存在，所以不需要安装，直接使用即可。通过项目--依赖性--框架--Microsoft.AspNetCore.App可以查看

2. 创建ChatHub，继承Hub基类，作为后台连接管理的中心

1 using Microsoft.AspNetCore.SignalR; 2  3 namespace DemoSignalR.Server.Chat 4 { 5     public class ChatHub : Hub 6     { 7         #region 连接和断开连接 8  9         public override async Task OnConnectedAsync()10         {11             var connId = Context.ConnectionId;12             Console.WriteLine($"{connId} 已连接");13             await base.OnConnectedAsync();14         }15 16         public void StartNotify(string type)17         {18             if (type == "1")19             {20 21             }22             else if (type == "2")23             {24 25             };26 27         }28 29         public override async Task OnDisconnectedAsync(Exception ex)30         {31             //如果断开连接32             var connId = Context.ConnectionId;33             Console.WriteLine($"{connId} 已断开");34             await base.OnDisconnectedAsync(ex);35         }36 37         #endregion38     }39 }

SignalR服务端业务集成

在实际业务中，存在各种需要后台通知的功能，根据不同的业务，可以采用不同的通知触发方式：

1. 在调用接口时触发后台通知

1 using DemoSignalR.Server.Chat; 2 using Microsoft.AspNetCore.Mvc; 3 using Microsoft.AspNetCore.SignalR; 4  5 namespace DemoSignalR.Server.Controllers 6 { 7     [ApiController] 8     [Route("[controller]")] 9     public class TestWebApiController : ControllerBase10     {11 12 13         private readonly ILogger _logger;14 15         private IHubContext _context;16 17         public TestWebApiController(ILogger logger, IHubContext context)18         {19             _logger = logger;20             _context = context;21         }22 23         [HttpGet]24         public void GetTestA(string Name)25         {26             string info = $"当前接收到的信息为：{Name},{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff")}";27             _context.Clients.All.SendAsync("", info);28         }29 30 31     }32 }

2. 定时器循环通知

1 using Microsoft.AspNetCore.SignalR; 2 using System.Timers; 3  4 namespace DemoSignalR.Server.Chat 5 { 6     public class TestChatInfo 7     { 8         private IHubContext _context; 9 10         private System.Timers.Timer _timer;11 12         private readonly static object locker = new object();//锁对象13 14         public static TestChatInfo instance;//当前实例15 16         private readonly ILogger _logger;17 18         private int _index = 0;19 20         private TestChatInfo(IHubContext _context, ILogger _logger)21         {22             this._context = _context;23             this._logger = _logger;24             //定义定时器25             _timer = new System.Timers.Timer(100);26             _timer.AutoReset = true;27             _timer.Enabled = true;28             _timer.Elapsed += Timer_Elapsed;29             _timer.Start();30         }31 32         private void Timer_Elapsed(object? sender, ElapsedEventArgs e)33         {34             //业务逻辑判断35             var obj = new TestValue();36             obj.Index = this._index;37             obj.Value = DateTime.Now.Millisecond % 100;38             _context.Clients.All.SendAsync("RefreshInfos", obj);39             this._index++;40         }41 42         /// 
43         /// 注册，即初始化单例实例44         /// 
45         /// 46         /// 47         /// 48         public static void Register(IHubContext context, ILogger logger)49         {50             lock (locker)51             {52                 if (instance == null)53                 {54                     lock (locker)55                     {56                         instance = new TestChatInfo(context, logger);57                     }58                 }59             }60         }61 62     }63 64     public class TestValue65     {66         private int index;67         public int Index { get { return index; } set { index = value; } }68 69         private float value;70         public float Value { get { return value; } set { this.value = value; } }71     }72 }

SignalR服务端配置

SignalR服务端配置主要分成三步：

1. 添加SignalR服务

2. 映射SignalR路由

3. 注册单例后台通知服务（如果其他方式，可省略）

1 using DemoSignalR.Server.Chat; 2 using Microsoft.AspNetCore.SignalR; 3  4 var builder = WebApplication.CreateBuilder(args); 5  6 // Add services to the container. 7  8 builder.Services.AddControllers(); 9 // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle10 builder.Services.AddEndpointsApiExplorer();11 builder.Services.AddSwaggerGen();12 //1.添加SignalR服务13 builder.Services.AddSignalR();14 builder.Services.AddLogging(logging => logging.AddConsole());15 16 var app = builder.Build();17 18 // Configure the HTTP request pipeline.19 if (app.Environment.IsDevelopment())20 {21     app.UseSwagger();22     app.UseSwaggerUI();23 }24 app.UseRouting();25 app.UseHttpsRedirection();26 27 app.UseAuthorization();28 29 30 //在Use中注册单例实例31 app.Use(async (context, next) =>32 {33     var hubContext = context.RequestServices.GetRequiredService>();34     //var logger = context.RequestServices.GetRequiredService();35     TestChatInfo.Register(hubContext, null);//调用静态方法注册36     if (next != null)37     {38         await next.Invoke();39     }40 });41 42 app.MapControllers();43 44 //2.映射路由45 app.UseEndpoints(endpoints => {46     endpoints.MapHub("/chat");47 });48 49 app.Run();

客户端项目创建

1. 创建WPF项目

2. 通过NuGet包管理器安装SignalR客户端

3. 创建SignalR状态管理，主要管理SignalR的连接，关闭，重连等操作。

1 using Microsoft.AspNetCore.SignalR.Client; 2 using System; 3 using System.Collections.Generic; 4 using System.Configuration; 5 using System.Linq; 6 using System.Text; 7 using System.Threading.Tasks; 8  9 namespace DemoSignalR.Client10 {11     internal class SignalRClient12     {13         private readonly HubConnection hubConnection;14 15         public HubConnection HubConnection16         {17             get { return hubConnection; }18         }19 20         public SignalRClient()21         {22             var server = ConfigurationManager.AppSettings["Server"].ToString();23             hubConnection = new HubConnectionBuilder().WithUrl($"{server}/chat").WithAutomaticReconnect().Build();24             hubConnection.KeepAliveInterval = TimeSpan.FromSeconds(5);25         }26 27         public virtual void Listen()28         {29 30         }31 32         public async void Start()33         {34             try35             {36                 await hubConnection.StartAsync();37 38             }39             catch (Exception e)40             {41 42             }43         }44     }45 }

客户端业务逻辑处理

1. 根据不同的业务逻辑分别监听不同的通知事件。

2. 示例详见源码

1 using Microsoft.AspNetCore.SignalR.Client; 2 using System; 3 using System.Collections.Generic; 4 using System.Linq; 5 using System.Text; 6 using System.Threading.Tasks; 7  8 namespace DemoSignalR.Client 9 {10     internal class TestSignalRClient : SignalRClient11     {12         public Action