溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
注，本文使用開發環境：Visual Studio 2012.2，平臺：ASP.NET MVC 4，數據庫：本文未說明
接觸SignalR已經很長一段時間了，不過也沒用它寫過什么像樣的Demo。今天就與大家分享一個比較簡單Demo，本文的重點在于如何使用SignalR。只是以一個實際的例子來說明一下。
Story:故事是的起因是這樣地，淘寶賣家是個很可憐的職業，四處尋親，但是，往往都會因為買家初來炸道，或者出于惡意，或者本身已經養成了中差評習慣而給賣家以中差評。
本身中差評對淘寶店的影響其實也不算小，所以如果能幫賣家避免，最好可以避免。
那么如何避免呢？
首先，賣家是可以自行查看的，但是對于訂單量多的賣家來說，是有些辛苦吧，最好可以有個功能。一但有那些給過不良評價的買家來下單時，就立刻提示出來，叮咚~向著這個目標踏進吧。
這是我們的終極效果圖,綠色的是馬塞克，不要求無碼圖。
紅色背景代表有過差評
×××背景代表，有過中評或是新號
提示的消息會在買家下單后自動出現在列表的頭部（當然是自動的，不需要刷新，要不本節講SignalR就沒意義了是不）
嗯，下面我們來看看如何實現這個主動通知吧
先建立一個ASP.NET MVC項目，這里默認是ASP.NET MVC4 Razor引擎
我們先來建立一個Model，用于數據庫存儲也好，序列化后傳遞數據到界面也好，都離不開它。
1: [Table("buyers")]
2: public class DbBuyer
3: {
4: /// <summary>
5: /// 自增Id
6: /// </summary>
7: [Column("id"), Key]
8: public int Id { get; set; }
9: /// <summary>
10: /// 買家昵稱
11: /// </summary>
12: [Column("nick")]
13: public string Nick { get; set; }
14: /// <summary>
15: /// uid
16: /// </summary>
17: [Column("buyer_uid")]
18: public string BuyerUid { get; set; }
19: /// <summary>
20: /// 買家信譽
21: /// </summary>
22: [Column("buyer_rate")]
23: public int RateCount { get; set; }
24: /// <summary>
25: /// 給出過的中評
26: /// </summary>
27: [Column("send_mid")]
28: public int SendMid { get; set; }
29: /// <summary>
30: /// 給出過的差評
31: /// </summary>
32: [Column("send_bad")]
33: public int SendBad { get; set; }
34: /// <summary>
35: /// 半年內評價
36: /// </summary>
37: [Column("half_year_count")]
38: public int HalfYearCount { get; set; }
39: /// <summary>
40: /// 上個月評價
41: /// </summary>
42: [Column("last_month_count")]
43: public int LastMonthCount { get; set; }
44: [Column("add_time")]
45: public DateTime AddTime { get; set; }
46: }
下面進入SignalR正題
引用一個NuGet的包：Microsoft ASP.NET SignalR
然后我們就能看到引入了一些DLL和JS。
我們先建立一個Hub，就叫BuyerHub，如果你沒有模板。。。那就自己建個CS類吧（此模板應該內置于2012.2版本中下載見www.visualstudio.com）
1: [HubName("buyer")]
2: public class BuyerHub:Hub
3: {
4: private const int TakeCount = 20;
5:
6: public List<DbBuyer> GetNeastBuyerInfo()
7: {
8: using (var db = new Entities())//Ef code first
9: {
10: //讀取最新的買家信息...這個數據從哪來...嗯..無所謂了，自己編吧，或者自己寫程序去獲取吧
11: var list= db.DbBuyers.OrderByDescending(c => c.AddTime).Take(TakeCount)
12: .OrderBy(c=>c.Id).ToList();
13: return list;
14: }
15: }
16: }
下面我們建立一個頁面Index（ASP.NET MVC，Controller我取名叫做AlertController，Razor View）
使用默認Layout（會引用jQuery）
這里我們編輯Index.cshtml內容如下
1: @model dynamic
2:
3: <div id="shower">
4: </div>
5:
6: @section scripts{
7: <script src="../bundles/jquerycolor"></script>
8: <script src="../Scripts/jquery.signalR-1.0.1.js"></script>
9: <script src="../signalr/hubs"></script>
10: <script type="text/javascript" src="@Url.Content("~/Scripts/SignalR/BuyerHub.js")"></script>
11: }
其中~/Scripts/SignalR/BuyerHub.js是我們自己建的js，我們下面來看看這個js我們怎么編寫才能讓這個SignalR運行起來
1:
2: $(function () {
3: var hub = $.connection.buyer;
4: function init() {
5: return hub.server.getNeastBuyerInfo().done(function (buyers) {
6: //從BuyerHub獲取buyer數組，就是這里的參數
7: //遍歷顯示，如果現在列表中不包含，則插入到第一條
8: var div = $("#shower");
9: $.each(buyers, function (index, item) {
10: if ($("div[data-nick='" + item.Nick + "']", div).length) return;//列表中已經存在則漂過
11: var x = $("<div>").attr("data-nick", item.Nick).html(
12: "<span style='display:inline-block;width:200px'>" + item.Nick + "</span> <span class='label label-success'>信譽：" +
13: item.RateCount +
14: " </span><span class='label label-warning'>中評：" + item.SendMid +
15: " </span><span class='label label-error'>差評：" + item.SendBad +
16: " </span><span class='label label-important'>上月：" + item.LastMonthCount +
17: " </span><span class='label label-info'>半年：" + item.HalfYearCount+"</span>");
18: if (item.SendMid > 0 || item.RateCount==0) x.css("background", "yellow");//設置中差評效果
19: if (item.SendBad > 0) x.css("background", "red");
20: div.prepend(x);
21: });
22: });
23: }
24: $.extend(hub.client, {
25: updateInfo: function () {//為client創建一個方法updateInfo一會會用到
26: return init();
27: }
28: });
29: $.connection.hub.start().pipe(init);//開啟客戶端SignalR，并首次運行init
30: });
好的，這樣就完了成顯示信息的過程，但是如果有新數據插入數據庫，我們怎么才能得知呢，最簡單的就是在插入數據庫的時候主動通知一下，我們假設這個通知是通過Web的，于是我們可以去寫一個Action去接受通知。
我們在AlertController中建立一個Sync的Action，當用戶訪問時，就會通知所有客戶端觸發 updateInfo方法
1: public ActionResult Sync(string nick)
2: {
3: GlobalHost.ConnectionManager.GetHubContext<BuyerHub>().Clients.All.updateInfo();
4: return Content("");
5: }
en,于是。。。就完成了
我們回頭來總結一下一個SignalR的幾個重要組成
1.Hub，用于提供數據
2.一個頁面，用于展示數據
3.一個JavaScript用于建立Client，并運行WebSocket或輪詢
4.如果有需要還需要一個服務器端的觸發功能
SignalR官方網址： http://www.asp.net/signalr
開源項目：https://github.com/SignalR/SignalR
未來版本 ：http://aspnetwebstack.codeplex.com
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
