C# ASP.NET MVC 之 SignalR 學習 即時資料推送顯示 配合 Echarts 推送即時圖表

標籤：例子   ros   document   public   content   研究   target   c#   圖片   

本文主要是我在剛開始學習 SignalR 的技術總結，網上找的學習方法和例子大多隻是翻譯了官方給的一個例子，並沒有給出其他一些經典情況的樣本，所以才有了本文總結，我在實現推送簡單的資料後，就想到了如何去推送複雜的資料，以及推送一個即時的圖表資料，文本為我原創，轉載請註明出處：Richard.Hu，先上一堆亂七八糟的說明先：

SignalR的官方地址是： https://www.asp.net/signalr

網上給出例子是一個聊天的例子，官網地址是：https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr

聊天的例子是啥意思呢，就是任何一個瀏覽器用戶端發送資料給伺服器之後，伺服器收到資料然後群發給所有人。這確實是一個經典的例子，所以這次我的研究就不考慮這種情況了，考慮另一種經典的情況，叫做即時資料推送。這是什麼意思呢，意思是你的系統有一些即時資料需要不停的在用戶端顯示，在沒有SignalR的時候，ASP.NET基本只能通過不停的ajax輪詢重新整理資料，無論是伺服器端還是用戶端，都會帶來極大的效能考驗。

 

 

好了，開始今天的學習之旅，我所依賴的開發環境是Visual Studio 2017，如果不是這個IDE，不保證完全正確的。

 

1. 建立沒有身分識別驗證的ASP.NET MVC項目

這就完成第一步了，建立好了一個項目。

 

2. 安裝SignalR組件，通過nuget方式安裝

安裝的過程沒有什麼好說的，就是一路無腦安裝就可以了，安裝完成之後就出現了介面說明，這個說明還是值得看看的，原版如下：

Please see http://go.microsoft.com/fwlink/?LinkId=272764 for more information on using SignalR.Upgrading from 1.x to 2.0-------------------------Please see http://go.microsoft.com/fwlink/?LinkId=320578 for more information on how to upgrade your SignalR 1.x application to 2.0.Mapping the Hubs connection----------------------------To enable SignalR in your application, create a class called Startup with the following:using Microsoft.Owin;using Owin;using MyWebApplication;namespace MyWebApplication{    public class Startup    {        public void Configuration(IAppBuilder app)        {            app.MapSignalR();        }    }} Getting Started---------------See http://www.asp.net/signalr/overview/getting-started for more information on how to get started.Why does ~/signalr/hubs return 404 or Why do I get a JavaScript error: ‘myhub is undefined‘?--------------------------------------------------------------------------------------------This issue is generally due to a missing or invalid script reference to the auto-generated Hub JavaScript proxy at ‘~/signalr/hubs‘.Please make sure that the Hub route is registered before any other routes in your application. In ASP.NET MVC 4 you can do the following:       <script src="~/signalr/hubs"></script> If you‘re writing an ASP.NET MVC 3 application, make sure that you are using Url.Content for your script references:     <script src="@Url.Content("~/signalr/hubs")"></script> If you‘re writing a regular ASP.NET application use ResolveClientUrl for your script references or register them via the ScriptManager using a app root relative path (starting with a ‘~/‘):     <script src=‘<%: ResolveClientUrl("~/signalr/hubs") %>‘></script> If the above still doesn‘t work, you may have an issue with routing and extensionless URLs. To fix this, ensure you have the latest patches installed for IIS and ASP.NET. 

 仔細閱讀下，裡面說了好多東西，我先大致的說下，等全部示範一遍後，再回來看就印象深刻：

1. 映射Hubs串連，需要建立一個startup類，並粘貼上面的代碼

2. 裡面有個SignalR自動產生的代理HUB，在路徑‘~/signalr/hubs‘裡面，然後再ASP.NET MVC5中需要使用

<script src="~/signalr/hubs"></script>

其他的就沒有什麼東西了，接下來就改造這個項目了。

 

3. 改造 Index.cshtml 檔案

我們目的很明確，在這裡顯示伺服器推送的資料，就簡單處理了，其他的一堆東西都不要了

@{    ViewBag.Title = "Home Page";}<div id="test">這裡即將顯示伺服器推送的資料</div>

 這時候可以嘗試的運行一下

emmmmmmmmm，談了一堆錯誤，沒關係，那就看看這是什麼錯誤，

1. 沒有 OwinStartupAttribute 屬性

2. 沒有 Startup.cs 類

這不就是我們第二步裡提到的東西麼，那就先按照他的意思這麼辦好了

 

4. 建立 Startup.cs 檔案

我們就建立一個類檔案，放的位置就是項目的下面，然後複製代碼

然後，粘貼下面的代碼，反正官方就是這麼要求的

using System;using System.Collections.Generic;using System.Linq;using System.Web;using Microsoft.Owin;using Owin;[assembly: OwinStartup( typeof( WebApplication1.Startup ) )]namespace WebApplication1{    public class Startup    {        public void Configuration( IAppBuilder app )        {            // 有關如何配置應用程式的詳細資料，請訪問 http://go.microsoft.com/fwlink/?LinkID=316888              app.MapSignalR( );        }    }}

 

 

然後我們在運行看看效果：

哈哈，看到可以了，接下來就準備真的資料推送了。

 

4. 建立 MyHub.cs 檔案

我們就建立一個檔案夾，Hubs然後再添加一個檔案，就命名成 MyHub.cs

 

然後把下面的代碼拷貝進去：

using Microsoft.AspNet.SignalR;using Microsoft.AspNet.SignalR.Hubs;using Newtonsoft.Json.Linq;using System;using System.Collections.Generic;using System.Linq;using System.Threading;using System.Web;namespace WebApplication1.Hubs{    [HubName( "myHub" )]    public class MyHub : Hub    {        // Is set via the constructor on each creation        private Broadcaster _broadcaster;        public MyHub( )            : this( Broadcaster.Instance )        {        }        public MyHub( Broadcaster broadcaster )        {            _broadcaster = broadcaster;        }    }    /// <summary>    /// 資料廣播器    /// </summary>    public class Broadcaster    {        private readonly static Lazy<Broadcaster> _instance =            new Lazy<Broadcaster>( ( ) => new Broadcaster( ) );        private readonly IHubContext _hubContext;        private Timer _broadcastLoop;        public Broadcaster( )        {            // 擷取所有串連的控制代碼，方便後面進行訊息廣播            _hubContext = GlobalHost.ConnectionManager.GetHubContext<MyHub>( );            // Start the broadcast loop            _broadcastLoop = new Timer(                BroadcastShape,                null,                1000,                1000 );        }        private Random random = new Random( );        private void BroadcastShape( object state )        {            // 定期執行的方法        }        public static Broadcaster Instance        {            get            {                return _instance.Value;            }        }    }}

 裡面已經包含了一個Hub集線器了，然後設定了一個統一的靜態 Broadcaster 資料廣播對象，之後我們要進行的操作都在 private void BroadcastShape( object state ) 方法裡操作就可以了，現在我們要推送一個隨機數，0-1000的隨機數，然後方法怎麼寫呢，參照下面

        private void BroadcastShape( object state )        {            // 定期執行的方法            _hubContext.Clients.All.sendTest1( random.Next( 1000 ).ToString( ) );        }

OK，那麼我們伺服器端已經寫完了，接下來要在用戶端顯示了，回到 index.cshtml 的頁面上看看

@{    ViewBag.Title = "Home Page";}<div id="test">這裡即將顯示伺服器推送的資料</div>@section scripts {    <script src="~/Scripts/jquery.signalR-2.2.3.min.js"></script>    <script src="~/signalr/hubs"></script>    <script>        $(function () {            var mypush = $.connection.myHub;            mypush.client.sendTest1 = function (message) {                $("#test").text(message);                console.log(message);            };            $.connection.hub.start();        });    </script>}

 這裡的兩個js庫都是必須引用的，特別是第二個，前面的文檔是已經說明了，下面的js代碼就是擷取hub代理，然後綁定訊息。然後就可以運行了。

 

可以看到這個值確實是變了，我們再點擊F12看看裡面的東西，發現確實有hubs.js檔案存在，裡麵包含了myhub的代理。

 

5. 推送JSON資料

上面已經示範了一個推送字串的操作了，如果我們要推送一個複雜的資料怎麼辦，我們以一個徽章顯示作為樣本

伺服器的代碼：

        private void BroadcastShape( object state )        {            JObject json = new JObject( );            json.Add( "A", random.Next( 1000, 10000 ).ToString( ) );            json.Add( "B", random.Next( 20 ).ToString( ) );            // 定期執行的方法            _hubContext.Clients.All.sendTest1( json );        }

Index.cshtml代碼

@{    ViewBag.Title = "Home Page";}<button class="btn btn-primary" type="button" id="test1">    Messages <span class="badge" id="test2">4</span></button>@section scripts {    <script src="~/Scripts/jquery.signalR-2.2.3.min.js"></script>    <script src="~/signalr/hubs"></script>    <script>        $(function () {            var mypush = $.connection.myHub;            mypush.client.sendTest1 = function (json) {                $("#test1").html(json.A + ‘<span class="badge">‘ + json.B+‘</span>‘);                console.log(message);            };            $.connection.hub.start();        });    </script>}

然後再運行，發現：

發現這個還不夠過癮，我想動態顯示圖表怎麼辦，比如說直條圖

 

6. 即時直條圖

直條圖的外掛程式我們選擇開源的 echart 圖表，百度的作品，非常給力，官網地址：http://echarts.baidu.com/   下面隨便放點這個外掛程式的圖表示例

 

 

我們下載這個js檔案，

然後把這個js檔案添加到項目中去，就如下面一樣

 

然後修改伺服器的推送方法

        private void BroadcastShape( object state )        {            int[] values = new int[10];            for (int i = 0; i < values.Length; i++)            {                values[i] = random.Next( 100 );            }            // 定期執行的方法            _hubContext.Clients.All.sendTest1( values );        }

修改用戶端的Index.cshtml代碼

@{    ViewBag.Title = "Home Page";}<div id="test" style="height:600px"></div>@section scripts {    <script src="~/Scripts/jquery.signalR-2.2.3.min.js"></script>    <script src="~/Scripts/echarts.min.js"></script>    <script src="~/signalr/hubs"></script>    <script>        $(function () {            var myChart1 = echarts.init(document.getElementById(‘test‘));            myChart1.setOption({                title: {                    text: ‘即時資料載入樣本‘                },                tooltip: {},                legend: {                    data: [‘銷量‘]                },                xAxis: {                    data: ["襯衫", "羊毛", "雪紡", "褲子", "高跟", "襪子", "袖子", "領子", "襪子", "腦子"]                },                yAxis: {},                series: [{                    name: ‘銷量‘,                    type: ‘bar‘,                    data: []                }]            });            var mypush = $.connection.myHub;            mypush.client.sendTest1 = function (array) {                myChart1.setOption({                    series: [{                        data: array                    }]                });                console.log(array);            };            $.connection.hub.start();        });    </script>}

 然後就可以運行程式看到想要的效果了。

 

可以看懂動態變化的圖表資料了，其他的動態圖表也是類似的，參照這個就可以實現了，思路都是一致的。文本就到這裡為止。如果有疑問可以加QQ群：592132877  或是直接郵件 [email protected]

C# ASP.NET MVC 之 SignalR 學習 即時資料推送顯示 配合 Echarts 推送即時圖表