WPF+ASP.NET SignalR實現(xiàn)動態(tài)折線圖的繪制
在實際業(yè)務(wù)中,當(dāng)后臺數(shù)據(jù)發(fā)生變化,客戶端能夠?qū)崟r的收到通知,而不是由用戶主動的進(jìn)行頁面刷新才能查看,這將是一個非常人性化的設(shè)計。有沒有那么一種場景,后臺數(shù)據(jù)明明已經(jīng)發(fā)生變化了,前臺卻因為沒有及時刷新,而導(dǎo)致頁面顯示的數(shù)據(jù)與實際存在差異,從而造成錯誤的判斷。那么如何才能在后臺數(shù)據(jù)變更時及時通知客戶端呢?本文以一個簡單的動態(tài)折線圖示例,簡述如何通過ASP.NET SignalR實現(xiàn)后臺通知功能,僅供學(xué)習(xí)分享使用,如有不足之處,還請指正。
什么是SignalR
ASP.NET SignalR 是一個面向 ASP.NET 開發(fā)人員的庫,可簡化將實時 web 功能添加到應(yīng)用程序的過程。 實時 web 功能是讓服務(wù)器代碼將內(nèi)容推送到連接的客戶端立即可用,而不是讓服務(wù)器等待客戶端請求新數(shù)據(jù)的能力。

SignalR做了什么
傳統(tǒng)HTTP采用的是大家熟知的“拉模式”,即客戶端發(fā)出的每次請求,服務(wù)端都是被動處理。此場景下客戶端是老大,很顯然只有一方主動,操作與處理起來就沒那么完美。
為了能讓服務(wù)端也能主動,html5的出現(xiàn)讓這種變得可能,大家知道html5中有兩種主動模式。第一種叫做websockect,WebSockets是Html5提供的新的API,可以在Web網(wǎng)頁與服務(wù)器端間建立Socket連接,它是基于tcp模式的雙工通訊。還有一種叫做SSE,也就是客戶端來訂閱服務(wù)器的一種事件模型。
在html5出來之前,如果要做到服務(wù)器主動,我們只能采用變相的longpool和iframe流勉強實現(xiàn)。
SignalR對上面四種方案進(jìn)行了高度的封裝,也就是說signalR會在這四種技術(shù)中根據(jù)瀏覽器和服務(wù)器設(shè)置采取最優(yōu)的一種模式。

封裝與集成
對于.NET開發(fā)者的福音,.NET平臺為我們提供了一種簡潔高效智能的實時信息交互技術(shù)->SignalR,它集成了上述數(shù)種技術(shù),并能根據(jù)配置自動或手動選擇其最佳應(yīng)用。

SignalR用途
SignalR 提供了一個簡單的 API,用于創(chuàng)建服務(wù)器到客戶端遠(yuǎn)程過程調(diào)用 (RPC) ,該調(diào)用客戶端瀏覽器 (和其他客戶端平臺中的 JavaScript 函數(shù)) 服務(wù)器端 .NET 代碼。 SignalR 還包括用于連接管理的 API (,例如連接和斷開連接事件) ,以及分組連接。
雖然聊天通常被用作示例,但你可以做更多的事情。每當(dāng)用戶刷新網(wǎng)頁以查看新數(shù)據(jù)時,或者該網(wǎng)頁實施 Ajax 長輪詢以檢索新數(shù)據(jù)時,它都是使用 SignalR 的候選者。SignalR 還支持需要從服務(wù)器進(jìn)行高頻更新的全新類型的應(yīng)用,例如實時游戲。
官方網(wǎng)址和源碼
官方網(wǎng)址: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網(wǎng)址:https://github.com/SignalR

示例截圖
本示例主要實現(xiàn)一個動態(tài)折線圖功能,主要分為服務(wù)端和客戶端兩部分,示例如下所示:

服務(wù)端項目創(chuàng)建
1. 創(chuàng)建一個Web服務(wù)端程序(以ASP.NET WebApi為例),默認(rèn)情況下SignalR已經(jīng)作為項目框架的一部分而存在,所以不需要安裝,直接使用即可。通過項目--依賴性--框架--Microsoft.AspNetCore.App可以查看
2. 創(chuàng)建ChatHub,繼承Hub基類,作為后臺連接管理的中心
using Microsoft.AspNetCore.SignalR;
namespace DemoSignalR.Server.Chat
{
public class ChatHub : Hub
{
#region 連接和斷開連接
public override async Task OnConnectedAsync()
{
var connId = Context.ConnectionId;
Console.WriteLine($"{connId} 已連接");
await base.OnConnectedAsync();
}
public void StartNotify(string type)
{
if (type == "1")
{
}
else if (type == "2")
{
};
}
public override async Task OnDisconnectedAsync(Exception ex)
{
//如果斷開連接
var connId = Context.ConnectionId;
Console.WriteLine($"{connId} 已斷開");
await base.OnDisconnectedAsync(ex);
}
#endregion
}
}SignalR服務(wù)端業(yè)務(wù)集成
在實際業(yè)務(wù)中,存在各種需要后臺通知的功能,根據(jù)不同的業(yè)務(wù),可以采用不同的通知觸發(fā)方式:
1. 在調(diào)用接口時觸發(fā)后臺通知
using DemoSignalR.Server.Chat;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
namespace DemoSignalR.Server.Controllers
{
[ApiController]
[Route("[controller]")]
public class TestWebApiController : ControllerBase
{
private readonly ILogger<TestWebApiController> _logger;
private IHubContext<ChatHub> _context;
public TestWebApiController(ILogger<TestWebApiController> logger, IHubContext<ChatHub> context)
{
_logger = logger;
_context = context;
}
[HttpGet]
public void GetTestA(string Name)
{
string info = $"當(dāng)前接收到的信息為:{Name},{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff")}";
_context.Clients.All.SendAsync("", info);
}
}
}2. 定時器循環(huán)通知
using Microsoft.AspNetCore.SignalR;
using System.Timers;
namespace DemoSignalR.Server.Chat
{
public class TestChatInfo
{
private IHubContext<ChatHub> _context;
private System.Timers.Timer _timer;
private readonly static object locker = new object();//鎖對象
public static TestChatInfo instance;//當(dāng)前實例
private readonly ILogger _logger;
private int _index = 0;
private TestChatInfo(IHubContext<ChatHub> _context, ILogger _logger)
{
this._context = _context;
this._logger = _logger;
//定義定時器
_timer = new System.Timers.Timer(100);
_timer.AutoReset = true;
_timer.Enabled = true;
_timer.Elapsed += Timer_Elapsed;
_timer.Start();
}
private void Timer_Elapsed(object? sender, ElapsedEventArgs e)
{
//業(yè)務(wù)邏輯判斷
var obj = new TestValue();
obj.Index = this._index;
obj.Value = DateTime.Now.Millisecond % 100;
_context.Clients.All.SendAsync("RefreshInfos", obj);
this._index++;
}
/// <summary>
/// 注冊,即初始化單例實例
/// </summary>
/// <param name="context"></param>
/// <param name="reviewTaskService"></param>
/// <param name="sysParamService"></param>
public static void Register(IHubContext<ChatHub> context, ILogger logger)
{
lock (locker)
{
if (instance == null)
{
lock (locker)
{
instance = new TestChatInfo(context, logger);
}
}
}
}
}
public class TestValue
{
private int index;
public int Index { get { return index; } set { index = value; } }
private float value;
public float Value { get { return value; } set { this.value = value; } }
}
}SignalR服務(wù)端配置
SignalR服務(wù)端配置主要分成三步:
1. 添加SignalR服務(wù)
2. 映射SignalR路由
3. 注冊單例后臺通知服務(wù)(如果其他方式,可省略)
using DemoSignalR.Server.Chat;
using Microsoft.AspNetCore.SignalR;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
//1.添加SignalR服務(wù)
builder.Services.AddSignalR();
builder.Services.AddLogging(logging => logging.AddConsole());
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseRouting();
app.UseHttpsRedirection();
app.UseAuthorization();
//在Use中注冊單例實例
app.Use(async (context, next) =>
{
var hubContext = context.RequestServices.GetRequiredService<IHubContext<ChatHub>>();
//var logger = context.RequestServices.GetRequiredService<ILogger>();
TestChatInfo.Register(hubContext, null);//調(diào)用靜態(tài)方法注冊
if (next != null)
{
await next.Invoke();
}
});
app.MapControllers();
//2.映射路由
app.UseEndpoints(endpoints => {
endpoints.MapHub<ChatHub>("/chat");
});
app.Run();客戶端項目創(chuàng)建
1. 創(chuàng)建WPF項目
2. 通過NuGet包管理器安裝SignalR客戶端
3. 創(chuàng)建SignalR狀態(tài)管理,主要管理SignalR的連接,關(guān)閉,重連等操作。
using Microsoft.AspNetCore.SignalR.Client;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace DemoSignalR.Client
{
internal class SignalRClient
{
private readonly HubConnection hubConnection;
public HubConnection HubConnection
{
get { return hubConnection; }
}
public SignalRClient()
{
var server = ConfigurationManager.AppSettings["Server"].ToString();
hubConnection = new HubConnectionBuilder().WithUrl($"{server}/chat").WithAutomaticReconnect().Build();
hubConnection.KeepAliveInterval = TimeSpan.FromSeconds(5);
}
public virtual void Listen()
{
}
public async void Start()
{
try
{
await hubConnection.StartAsync();
}
catch (Exception e)
{
}
}
}
}客戶端業(yè)務(wù)邏輯處理
1. 根據(jù)不同的業(yè)務(wù)邏輯分別監(jiān)聽不同的通知事件。
2. 示例詳見源碼
using Microsoft.AspNetCore.SignalR.Client;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace DemoSignalR.Client
{
internal class TestSignalRClient : SignalRClient
{
public Action<object> RefreshInfos;
public Action<string> Reconnected;
public TestSignalRClient() : base()
{
}
public override void Listen()
{
HubConnection.On<object>("RefreshInfos", (obj) =>
{
//
if (obj != null)
{
Console.WriteLine("收到數(shù)據(jù)");
//發(fā)送消息
if (RefreshInfos != null)
{
RefreshInfos(obj);
}
}
});
HubConnection.Reconnected += HubConnection_Reconnected;
}
private Task HubConnection_Reconnected(string arg)
{
return Task.Run(() =>
{
if (Reconnected != null)
{
Reconnected(arg);
}
});
}
public virtual void StartNotify(string condition)
{
HubConnection.SendAsync("StartNotify", condition);
Console.WriteLine($"開始通過知{condition}");
}
}
}SignalR需要注意事項
你不會實例化 Hub 類或從服務(wù)器上自己的代碼調(diào)用其方法;由 SignalR Hubs 管道為你完成的所有操作。 SignalR 每次需要處理中心操作(例如客戶端連接、斷開連接或向服務(wù)器發(fā)出方法調(diào)用時)時,SignalR 都會創(chuàng)建 Hub 類的新實例。
由于 Hub 類的實例是暫時性的,因此無法使用它們來維護(hù)從一個方法調(diào)用到下一個方法的狀態(tài)。 每當(dāng)服務(wù)器從客戶端收到方法調(diào)用時,中心類的新實例都會處理消息。 若要通過多個連接和方法調(diào)用來維護(hù)狀態(tài),請使用一些其他方法(例如數(shù)據(jù)庫)或 Hub 類上的靜態(tài)變量,或者不派生自 Hub的其他類。 如果在內(nèi)存中保留數(shù)據(jù),請使用 Hub 類上的靜態(tài)變量等方法,則應(yīng)用域回收時數(shù)據(jù)將丟失。
如果要從在 Hub 類外部運行的代碼將消息發(fā)送到客戶端,則無法通過實例化 Hub 類實例來執(zhí)行此操作,但可以通過獲取對 Hub 類的 SignalR 上下文對象的引用來執(zhí)行此操作。
注意:ChatHub每次調(diào)用都是一個新的實例,所以不可以有私有屬性或變量,不可以保存對像的值,所以如果需要記錄一些持久保存的值,則可以采用靜態(tài)變量,或者中心以外的對象。
關(guān)于源碼
本示例中相關(guān)源碼,已上傳至gitee(碼云),鏈接如下:https://gitee.com/ahsiang/demo-signal-r

以上就是WPF+ASP.NET SignalR實現(xiàn)動態(tài)折線圖的繪制的詳細(xì)內(nèi)容,更多關(guān)于WPF繪制動態(tài)折線圖的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
WPF拖動DataGrid滾動條時內(nèi)容混亂的解決方法
這篇文章主要介紹了WPF拖動DataGrid滾動條時內(nèi)容混亂的解決方法2016-10-10
C#自動創(chuàng)建數(shù)據(jù)庫實現(xiàn)代碼
C#下創(chuàng)建數(shù)據(jù)庫的代碼2008-03-03
C#實現(xiàn)文件與二進(jìn)制互轉(zhuǎn)并存入數(shù)據(jù)庫
這篇文章主要介紹了C#實現(xiàn)文件與二進(jìn)制互轉(zhuǎn)并存入數(shù)據(jù)庫,本文直接給出代碼實例,代碼中包含詳細(xì)注釋,需要的朋友可以參考下2015-06-06

