使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

什么是 SignalR ASP.NET Core

ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能。 实时 web 功能使服务器端代码可以立即将内容推送到客户端。

SignalR ASP.NET Core可以做什么

• 需要从服务器进行高频率更新的应用。 示例包括游戏、社交网络、投票、拍卖、地图和 GPS 应用。
• 仪表板和监视应用。 示例包括公司仪表板、即时销售更新或旅行警报。
• 协作应用。 协作应用的示例包括白板应用和团队会议软件。
• 需要通知的应用。 社交网络、电子邮件、聊天、游戏、旅行警报和很多其他应用都需使用通知。

SignalR  ASP.NET Core特色

• 自动处理连接管理。
• 可将消息同时发送到所有连接的客户端。
• 可向特定客户端或客户端组发送消息。
• 可缩放以处理不断增加的流量。
• SignalR采用rpc来进行客户端与服务器端之间的通信。
• SignalR会自动选择服务器和客户端的最佳传输方法(WebSockets、Server-Sent事件、长轮询)SignalR可以根据当前浏览器所支持的协议来选择最优的连接方式,从而可以让我们把更多的精力放在业务上而不是底层传输技术上。

哪些浏览器支持SignalR  ASP.NET Core

Apple Safari(包含IOS端)、Google Chrome(包括 Android端)、Microsoft Edge、Mozilla Firefox等主流浏览器都支持SignalR  ASP.NET Core。

本次我们将实现一个通过SignalR来简单实现一个后台实时推送数据给Echarts来展示图表的功能

首先我们新建一个ASP.NET Core 3.1的web应用

使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

随后我们引用SignalR  ASP.NET Core、Jquery和Echarts的客户端库

使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

 

使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

 

使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

在项目中我们新建以下目录

Class、HubInterface、Hubs

接着我们在Pages目录下新建如下目录

echarts

在Shared目录中新建一个Razor布局页(_LayoutEcharts.cshtml)

在echarts目录中新建一个Razor页面(Index.cshtml)

在Class目录中新建一个类(ClientMessageModel.cs)

在HubInterface目录中新建一个接口(IChatClient.cs)

在Hub目录中新建一个类(ChatHub.cs)

使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

我们先实现后台逻辑代码,随后在编写前端交互代码。

在IChatClient.cs中,我们主要是定义统一的服务端调用客户端方法的统一方法名(防止每次都要手动输入调用方法是出现失误而导致调用失败的低级错误)

namespace signalr.HubInterface { public interface IChatClient { /// <summary> /// 客户端接收数据触发函数名 /// </summary> /// <param>消息实体类</param> /// <returns></returns> Task ReceiveMessage(ClientMessageModel clientMessageModel); /// <summary> /// Echart接收数据触发函数名 /// </summary> /// <param>JSON格式的可以被Echarts识别的data数据</param> /// <returns></returns> Task EchartsMessage(Array data); /// <summary> /// 客户端获取自己登录后的UID /// </summary> /// <param>消息实体类</param> /// <returns></returns> Task GetMyId(ClientMessageModel clientMessageModel); } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfygf.html