首先參考官方教程鏈接：https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr
上述的hub類，start類，均是添加找到上述類來進行添加，不是手動添加一個普通類
再次參考教程鏈接：https://www.cnblogs.com/dathlin/p/9026680.html
測試的代碼鏈接：https://download.csdn.net/download/yue1453544229/12070478
---------------------------------------------------------轉載的博客-----------------------------------------------------------------------------------------------
本文主要是我在剛開始學習 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方式安裝
![]()
![]()
安裝的過程沒有什麼好說的，就是一路無腦安裝就可以了，安裝完成之後就出現了界面說明，這個說明還是值得看看的，原版如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
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中需要使用
|
1
|
<script src="~/signalr/hubs"></script>
|
其他的就沒有什麼東西了，接下來就改造這個項目了。
3. 改造 Index.cshtml 文件
我們目的很明確，在這裏顯示服務器推送的數據，就簡單處理了，其他的一堆東西都不要了
|
1
2
3
4
5
6
7
|
@{
ViewBag.Title = "Home Page";
}
<div id="test">這裏即將顯示服務器推送的數據</div>
|
這時候可以嘗試的運行一下
![]()
emmmmmmmmm，談了一堆錯誤，沒關係，那就看看這是什麼錯誤，
1. 沒有 OwinStartupAttribute 屬性
2. 沒有 Startup.cs 類
這不就是我們第二步裏提到的東西麼，那就先按照他的意思這麼辦好了
4. 創建 Startup.cs 文件
我們就創建一個類文件，放的位置就是項目的下面，然後複製代碼
![]()
然後，粘貼下面的代碼，反正官方就是這麼要求的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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
![]()
然後把下面的代碼拷貝進去：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
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的隨機數，然後方法怎麼寫呢，參照下面
|
1
2
3
4
5
|
private void BroadcastShape( object state )
{
// 定期執行的方法
_hubContext.Clients.All.sendTest1( random.Next( 1000 ).ToString( ) );
}
|
OK，那麼我們服務器端已經寫完了，接下來要在客戶端顯示了，回到 index.cshtml 的頁面上看看
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
@{
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代理，然後綁定消息。然後就可以運行了。
注意第一個引用的JS，jquery.signalR-2.2.3.min.js 這裏面有個版本號信息，需要和你安裝的版本號對應，不然就找不到這個js了，如果你安裝了2.3.0版本，那麼這裏就要寫jquery.signalR-2.3.0.min.js
![]()
可以看到這個值確實是變了，我們再點擊F12看看裏面的東西，發現確實有hubs.js文件存在，裏面包含了myhub的代理。
5. 推送JSON數據
上面已經演示了一個推送字符串的操作了，如果我們要推送一個複雜的數據怎麼辦，我們以一個徽章顯示作爲示例
服務器的代碼：
|
1
2
3
4
5
6
7
8
|
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代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
@{
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文件添加到項目中去，就如下面一樣
![]()
然後修改服務器的推送方法
|
1
2
3
4
5
6
7
8
9
10
|
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代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
@{
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>
}
|
然後就可以運行程序看到想要的效果了。
![]()
可以看懂動態變化的圖表數據了，其他的動態圖表也是類似的，參照這個就可以實現了，思路都是一致的。文本就到這裏爲止。
