有時候須要瀏覽器和服務端保持實時的通信(好比在線聊天),SignalR的出現讓這一切變得很是簡單。它可以讓服務端向客戶端實時的推送消息。若是用戶的瀏覽器支持Html5,SignalR會使用WebSocket來實習這個功能;若是不支持,則使用其它技術實現相同的效果。對於使用者來講卻不用考慮這些差別。javascript
資源:html
SignalR官網:http://signalr.net/java
文檔:http://www.asp.net/signalrjquery
下面的文字主要翻譯自SignalR的文檔,一些地方加入了我本身的理解,沒有機械式的翻譯。瀏覽器
這篇教程將會使用MVC5建立一個基於SignalR2.0的聊天室應用程序,僅供學習。開發環境是vs2013app
1,在vs中建立一個Asp.net MVC5的項目,取名爲SignalRChat,並點擊OK。asp.net
2,在新建項目對話框中,選擇MVC,而且點擊「建立項目」。學習
3,打開NuGet控制檯,並運行下面的命令。安裝SignalR2.0ui
install-package Microsoft.AspNet.SignalRurl
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();
});
});