【記錄】MVC4中使用SignalR

前言

　　周末在偶爾翻閱微軟官網的時候看到Getting Started with SignalR and MVC 4此篇文章，知道了signalr這個東西，貌似這個出來很長時間了，奈何自己一直沒有發現，不妨寫篇文章敲一下代碼記錄這個東西。

　　ASP .NET SignalR 是一個ASP .NET 下的類庫，可以在ASP .NET 的Web項目中實現實時通信。什么是實時通信的Web呢？就是讓客戶端（Web頁面）和服務器端可以互相通知消息及調用方法，當然這是實時操作的。WebSockets是HTML5提供的新的API，可以在Web網頁與服務器端間建立Socket連接，當WebSockets可用時（即瀏覽器支持Html5）SignalR使用WebSockets，當不支持時SignalR將使用其它技術來保證達到相同效果。SignalR當然也提供了非常簡單易用的高階API，使服務器端可以單個或批量調用客戶端上的JavaScript函數，並且非常 方便地進行連接管理，例如客戶端連接到服務器端，或斷開連接，客戶端分組，以及客戶端授權，使用SignalR都非常 容易實現。SignalR 將與客戶端進行實時通信帶給了ASP .NET 。當然這樣既好用，而且也有足夠的擴展性。以前用戶需要刷新頁面或使用Ajax輪詢才能實現的實時顯示數據，現在只要使用SignalR，就可以簡單實現了。最重要的是您無需重新建立項目，使用現有ASP .NET項目即可無縫使用SignalR。

1、向MVC4項目添加對signalr類庫的引用

　　新建一個mvc4項目,並通過Nugget包管理器獲取Microsoft.AspNet.SignalR，如下圖：

 

選擇第一個點擊添加以后彈出所有依賴的類庫安裝說明，選擇接受：

安裝完成以后可以看到所有依賴的類庫，及項目中需要的js，和使用說明：

2、添加Hub像客戶端發送內容

在項目中新建一個文件夾Hub,新增一個SignalR Hub類ChatHub.cs繼承Hub此類將作為向客戶端發送消息的服務端處理類。添加如下代碼：

public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // 客戶端調用addNewMessageToPage方法傳送信息
            Clients.All.addNewMessageToPage(name, message);
        }
    }

在Global.asax中添加對hub的路由映射：

在HomeController中添加action-chat並返回視圖，在視圖中添加如下代碼：

public ActionResult Chat()
        {
            return View();
        }

視圖：

@{
    ViewBag.Title = "Chat";
}

<h2>Chat</h2>
<div class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion">
    </ul>
</div>

@section scripts {
    <!--腳本引用. -->
    <!--添加SignalR 引用. -->
    <script src="~/Scripts/jquery.signalR-1.1.3.js"></script>
    <!--引用自動生成 SignalR hub 的腳本. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR --> 
    <script>
        $(function () {
            //在客戶端定義 hub class 所對應的 proxy 類；
            var chat = $.connection.chatHub;
            // 調用后台方法返回數據
            chat.client.addNewMessageToPage = function (name, message) {
                // 在頁面上添加信息
                $('#discussion').append('<li><strong>' + htmlEncode(name) 
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };
            // 頁面起始填寫登陸名登陸名
            $('#displayname').val(prompt('Enter your name:', ''));
            $('#message').focus();
            //開始連接
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // 請求發送信息方法 request send method
                    chat.server.send($('#displayname').val(), $('#message').val());
                    
                    $('#message').val('').focus();
                });
            });
        });
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

 

運行程序請求/home/chat首先彈出填寫用戶名的對話框：

輸入名稱以后，填寫消息發送，所有的消息都可以及時從后台返回到也也頁面上，可以多開幾個窗口測試如圖：

在腳本中客戶端調用ChatHub.Send方法發送新消息，后台通過Clients.All.addNewMessageToPage方法向所有客戶端回發消息，在ChatHub類中，可以定義公共的方法供客戶端jquery調用，通過Microsoft.AspNet.SignalR.Hub.Clients來連接所有客戶端。

 

周末偶然看到的一個東西也沒有深入研究，本人也是初識很多地方不太了解，查了一些資料以備不時只需：

https://github.com/SignalR/SignalR

http://www.codeproject.com/Articles/536514/SignalRplusOnlineplusCounterplusSample

http://www.codeproject.com/Articles/524066/SignalR-Simple-Chat-Application-in-Csharp