MVC5中使用SignalR2.0實現實時聊天室

有時候需要瀏覽器和服務端保持實時的通訊（比如在線聊天），SignalR的出現讓這一切變得非常簡單。它能夠讓服務端向客戶端實時的推送消息。如果用戶的瀏覽器支持Html5，SignalR會使用WebSocket來實習這個功能；如果不支持，則使用其它技術實現相同的效果。對於使用者來說卻不用考慮這些差異。

資源：

 

SignalR官網：http://signalr.net/

文檔：http://www.asp.net/signalr

 

下面的文字主要翻譯自SignalR的文檔，一些地方加入了我自己的理解，沒有機械式的翻譯。

這篇教程將會使用MVC5創建一個基於SignalR2.0的聊天室應用程序，僅供學習。開發環境是vs2013

 

創建項目

1，在vs中創建一個Asp.net MVC5的項目，取名為SignalRChat，並點擊OK。

 

 

2,在新建項目對話框中，選擇MVC，並且點擊“創建項目”。

 

3，打開NuGet控制台，並運行下面的命令。安裝SignalR2.0

install-package Microsoft.AspNet.SignalR

4,安裝完成后，在解決方案窗口中，展開Scripts文件夾，會發現Signal2.0的腳本文件已經引入了。

 

5，在項目中點擊右鍵，新建一個名為“Hubs”的文件夾。

6，右鍵Hubs文件夾，點擊新建項，選擇Visual C# | Web |SignalR節點，如圖所示，並並命名為ChatHub.cs。（如果沒有此模板，則直接新建一個類也行）

這個類將會作為SignalR服務端，用來向所有的客戶端發送消息。

 

7，用下面的代碼替換ChatHub中的代碼：

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the addNewMessageToPage method to update clients.
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

8，打開Startup.cs文件，添加代碼如下所示

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the addNewMessageToPage method to update clients.
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

9，在HomeController中添加一個Action,取名為Chat。這個Action將會用來返回加下來要創建的視圖。

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

10，右鍵點擊剛才創建的Action,選擇新建視圖。

 

11，在新建視圖對話框中，取名為Chat。

 

12，在新建的視圖中添加如下的代碼：

注意：在使用NuGet安裝SignalR的時候，有可能引入的是新版本的腳本文件。要保證這些文件已經在視圖中被引用。

 

@{
    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 {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.0.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.-->
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + htmlEncode(name)
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

13，保存整個解決方案。

 

運行代碼

 

1，F5運行代碼。

2，輸入url ,[根網址]/Home/chat. 聊天頁面會提示輸入用戶名。

 

3，隨便輸入一個用戶名。

4，多打開幾個剛才相同的網頁，每個網頁輸入一個唯一的用戶名。

5，在每個頁面中，輸入一些信息，並點擊發送按鈕。輸入的信息將會在所有的頁面中顯示。

6，聊天頁面如下圖所示：

 

 

理解代碼

 

 

Hub類：

在上面的代碼中，ChatHub類繼承自Microsoft.AspNet.SignalR.Hub。創建一個SignalR應用的時候，繼承Hub是一種非常實用的方式。你在自己的hub類中添加public方法，可以使用javascript調用。

在聊天代碼中，客戶端調用ChatHub.Send方法發送一個新的消息。然后hub類通過調用Clients.All.addNewMessageToPage向所有的客戶端發送消息。

SignalR 和jQuery：

Chat.cshtml視圖展示了如何使用SignalR的jQuery庫來和服務端保持通信。代碼中非常重要的一步是代理的創建。它聲明了一個共服務端調用的方法，並且創建了一個鏈接以便向服務端發送消息。

var chat = $.connection.chatHub;

注意：由於javascript的規范是使用駝峰命名法。C#寫的ChatHub類在javascript中使用時需要寫成chatHub.如果在就Query中和C#保持一致也寫成ChatHub。你需要在ChatHub.cs 文件中加入命名空間“ Microsoft.AspNet.SignalR.Hubs”，然后給ChatHub添加一個注解： [HubName("ChatHub")]。

 

下面的代碼展示了如何在js中創建一個回調方法。服務端將會使用這個方法來向客戶端發送消息。

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page.
    $('#discussion').append('<li><strong>' + htmlEncode(name)
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

 

下面的代碼展示了如何打開一個連接。首先開啟連接並傳遞一個匿名方法，然后在匿名方法中處理“發送”按鈕的點擊事件。

$.connection.hub.start().done(function () {
    $('#sendmessage').click(function () {
        // Call the Send method on the hub.
        chat.server.send($('#displayname').val(), $('#message').val());
        // Clear text box and reset focus for next comment.
        $('#message').val('').focus();
    });
});