WPF+ASP.NET SignalR实现动态折线图
在实际业务中，当后台数据发生变化，客户端能够实时的收到通知，而不是由用户主动的进行页面刷新才能查看，这将是一个非常人性化的设计。有没有那么一种场景，后台数据明明已经发生变化了，前台却因为没有及时刷新，而导致页面显示的数据与实际存在差异，从而造成错误的判断。那么如何才能在后台数据变更时及时通知客户端呢？本文以一个简单的动态折线图示例，简述如何通过ASP.NET SignalR实现后台通知功能，仅供学习分享使用，如有不足之处，还请指正。什么是SignalR?
ASP.NET SignalR 是一个面向 ASP.NET 开发人员的库，可简化将实时 web 功能添加到应用程序的过程。 实时 web 功能是让服务器代码将内容推送到连接的客户端立即可用，而不是让服务器等待客户端请求新数据的能力。
https://img2023.cnblogs.com/blog/1068941/202301/1068941-20230102170945480-1659626376.png
SignalR做了什么？
传统HTTP采用的是大家熟知的“拉模式”，即客户端发出的每次请求，服务端都是被动处理。此场景下客户端是老大，很显然只有一方主动，操作与处理起来就没那么完美。
为了能让服务端也能主动，html5的出现让这种变得可能，大家知道html5中有两种主动模式。第一种叫做websockect，WebSockets是Html5提供的新的API，可以在Web网页与服务器端间建立Socket连接，它是基于tcp模式的双工通讯。还有一种叫做SSE，也就是客户端来订阅服务器的一种事件模型。
在html5出来之前，如果要做到服务器主动，我们只能采用变相的longpool和iframe流勉强实现。
SignalR对上面四种方案进行了高度的封装，也就是说signalR会在这四种技术中根据浏览器和服务器设置采取最优的一种模式。
https://img2023.cnblogs.com/blog/1068941/202301/1068941-20230102171155171-502536074.png
封装与集成
对于.NET开发者的福音，.NET平台为我们提供了一种简洁高效智能的实时信息交互技术->SignalR，它集成了上述数种技术，并能根据配置自动或手动选择其最佳应用。
https://img2023.cnblogs.com/blog/1068941/202301/1068941-20230102171226533-309365716.png
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
https://img2023.cnblogs.com/blog/1068941/202301/1068941-20230102171316050-1084294083.png
示例截图
本示例主要实现一个动态折线图功能，主要分为服务端和客户端两部分，示例如下所示：
https://img2023.cnblogs.com/blog/1068941/202301/1068941-20230102172757295-1576333485.gif
服务端项目创建
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 #endregion
38 }
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
8 ")]
9 public class TestWebApiController : ControllerBase
10 {
11
12
13 private readonly ILogger<TestWebApiController> _logger;
14
15 private IHubContext<ChatHub> _context;
16
17 public TestWebApiController(ILogger<TestWebApiController> logger, IHubContext<ChatHub> context)
18 {
19 _logger = logger;
20 _context = context;
21 }
22
23
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<ChatHub> _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<ChatHub> _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 /// <summary>
43 /// 注册，即初始化单例实例
44 /// </summary>
45 /// <param name="context"></param>
46 /// <param name="reviewTaskService"></param>
47 /// <param name="sysParamService"></param>
48 public static void Register(IHubContext<ChatHub> 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 TestValue
65 {
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/swashbuckle
10 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<IHubContext<ChatHub>>();
34 //var logger = context.RequestServices.GetRequiredService<ILogger>();
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<ChatHub>("/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.Client
10 {
11 internal class SignalRClient
12 {
13 private readonly HubConnection hubConnection;
14
15 public HubConnection HubConnection
16 {
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 try
35 {
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 : SignalRClient
11 {
12 public Action<object> RefreshInfos;
13
14 public Action<string> Reconnected;
15
16 public TestSignalRClient() : base()
17 {
18 }
19
20 public override void Listen()
21 {
22 HubConnection.On<object>("RefreshInfos", (obj) =>
23 {
24 //
25 if (obj != null)
26 {
27 Console.WriteLine("收到数据");
28 //发送消息
29 if (RefreshInfos != null)
30 {
31 RefreshInfos(obj);
32 }
33 }
34 });
35 HubConnection.Reconnected += HubConnection_Reconnected;
36 }
37
38 private Task HubConnection_Reconnected(string arg)
39 {
40 return Task.Run(() =>
41 {
42 if (Reconnected != null)
43 {
44 Reconnected(arg);
45 }
46 });
47 }
48
49 public virtual void StartNotify(string condition)
50 {
51 HubConnection.SendAsync("StartNotify", condition);
52 Console.WriteLine($"开始通过知{condition}");
53 }
54 }
55 }
SignalR需要注意事项
你不会实例化 Hub 类或从服务器上自己的代码调用其方法;由 SignalR Hubs 管道为你完成的所有操作。 SignalR 每次需要处理中心操作（例如客户端连接、断开连接或向服务器发出方法调用时）时，SignalR 都会创建 Hub 类的新实例。
由于 Hub 类的实例是暂时性的，因此无法使用它们来维护从一个方法调用到下一个方法的状态。 每当服务器从客户端收到方法调用时，中心类的新实例都会处理消息。 若要通过多个连接和方法调用来维护状态，请使用一些其他方法（例如数据库）或 Hub 类上的静态变量，或者不派生自 Hub的其他类。 如果在内存中保留数据，请使用 Hub 类上的静态变量等方法，则应用域回收时数据将丢失。
如果要从在 Hub 类外部运行的代码将消息发送到客户端，则无法通过实例化 Hub 类实例来执行此操作，但可以通过获取对 Hub 类的 SignalR 上下文对象的引用来执行此操作。
注意：ChatHub每次调用都是一个新的实例，所以不可以有私有属性或变量，不可以保存对像的值，所以如果需要记录一些持久保存的值，则可以采用静态变量，或者中心以外的对象。
关于源码
本示例中相关源码，已上传至gitee（码云）,链接如下：
https://gitee.com/ahsiang/demo-signal-r
https://img2023.cnblogs.com/blog/1068941/202301/1068941-20230102215233544-511849910.png
备注
以上就是WPF+ASP.NET SignalR实现动态折线图的全部内容，关于SignalR的应用，这只是一个简单的入门示例，希望可以抛砖引玉，一起学习，共同进步。学习编程，从关注【老码识途】开始！！！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]