SignalR 2.0入門
概述
本教程介紹了那麼 SignalR 發展展現瞭如何構建一個簡單的基於瀏覽器的聊天應用程序。你會那麼 SignalR 庫添加到一個空的 ASP.NET web 應用程序、 建立一個集線器類將消息發送到客戶端，和建立一個容許用戶發送和接收聊天消息的 HTML 頁面。演示如何在 MVC 5 建立一個聊天應用程序使用的 MVC 視圖的相似教程，請參閱入門那麼 SignalR 2 和 MVC 5.javascript
注︰本教程演示如何建立那麼 SignalR 應用程序版本 2 中。那麼 SignalR 之間的更改的詳細信息 1.x 和 2，請參閱升級那麼 SignalR 1.x 項目和視覺工做室 2013年發行說明.css
那麼 SignalR 是開源.NET 庫，用於構建 web 應用程序須要實時用戶交互或實時數據更新。例子包括社交應用程序、 多用戶遊戲、 業務協做和新聞，天氣或財務更新的應用程序。這些一般被稱爲實時應用程序。html
那麼 SignalR 簡化了構建實時應用程序的過程。它包括 ASP.NET 服務器庫和 JavaScript 客戶端庫，以使它更易於管理客戶端-服務器鏈接並將內容更新推送到客戶端。你能夠那麼 SignalR 庫添加到現有的 ASP.NET 應用程序以得到實時功能。java
本教程演示下面的那麼 SignalR 開發任務︰jquery
- 將那麼 SignalR 庫添加到 ASP.NET web 應用程序。
- 建立一個集線器類，以將內容推送到客戶端。
- 建立浩然啓動類，以將應用程序配置。
- 使用 web 頁中的那麼 SignalR jQuery 庫發送郵件並顯示更新從集線器。
下面的屏幕快照顯示在瀏覽器中運行的聊天應用程序。每一個新用戶能夠發表評論，並查看用戶加入聊天后添加註釋。git
各節︰github
設置項目
本節演示如何使用 Visual Studio 2013 和那麼版本 2 SignalR 來建立空的 ASP.NET web 應用程序，添加那麼 SignalR，並建立聊天應用程序。web
先決條件︰windows
- 視覺工做室 2013 年。若是你沒有 Visual Studio，請參見ASP.NET 下載要免費視覺工做室 2013年快遞發展的工具。
下列步驟將使用 Visual Studio 2013 建立 ASP.NET 空 Web 應用程序並添加那麼 SignalR 庫︰瀏覽器
-
在 Visual Studio 中建立一個 ASP.NET Web 應用程序。
-
在新的 ASP.NET 項目窗口中，保留空選定，而後單擊建立項目.
-
在解決方案資源管理器中，右鍵單擊項目，選擇添加|那麼 SignalR 集線器類 (v2)。將類命名爲ChatHub.cs並將其添加到項目。此步驟將建立ChatHub類，並向項目中添加一組腳本文件和支持那麼 SignalR 的程序集引用。
注︰你也能夠向項目添加那麼 SignalR 經過打開工具 |庫包管理器 |程序包管理器控制檯和運行命令︰
install-package Microsoft.AspNet.SignalR若是你使用控制檯來添加那麼 SignalR，那麼 SignalR 集線器類做爲一個單獨的步驟以後建立您添加那麼 SignalR。
注︰若是您使用的 Visual Studio 2012，那麼 SignalR 集線器類 (v2)模板將不可用。您能夠添加一個名爲
ChatHub相反的普通類。 -
在解決方案資源管理器中，展開腳本節點。JQuery 和那麼 SignalR 腳本庫是在項目中可見。
-
新的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 broadcastMessage method to update clients. Clients.All.broadcastMessage(name, message); } } } -
在解決方案資源管理器中，右鍵單擊項目，而後單擊添加|歐文真啓動類。
Startup新類的名稱並單擊肯定。注︰若是您使用的 Visual Studio 2012，浩然啓動類模板將不可用。您能夠添加一個名爲
Startup相反的普通類。 -
更改成如下內容的新的啓動類。
using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRChat.Startup))] namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { // Any connection or hub wire up and configuration should go here app.MapSignalR(); } } } -
在解決方案資源管理器中，右鍵單擊項目，而後單擊添加|HTML 頁。新頁
index.html名稱. -
在解決方案資源管理器中，右鍵單擊 HTML 頁面，您只需建立並單擊設置爲起始頁.
-
在 HTML 頁面中的默認代碼替換爲下面的代碼。
注︰ 版本那麼 SignalR 腳本能夠經過軟件包管理器進行安裝。驗證下面的腳本引用對應的版本 （他們會不一樣，若是你添加了那麼 SignalR 使用 NuGet，而不是添加一個集線器。） 項目中的腳本文件
<!DOCTYPE html> <html> <head> <title>SignalR Simple Chat</title> <style type="text/css"> .container { background-color: #99CCFF; border: thick solid #808080; padding: 20px; margin: 20px; } </style> </head> <body> <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> <!--Script references. --> <!--Reference the jQuery library. --> <script src="Scripts/jquery-1.6.4.min.js" ></script> <!--Reference the SignalR library. --> <script src="Scripts/jquery.signalR-2.1.0.min.js"></script> <!--Reference the autogenerated SignalR hub script. --> <script src="signalr/hubs"></script> <!--Add script to update the page and send messages.--> <script type="text/javascript"> $(function () { // Declare a proxy to reference the hub. var chat = $.connection.chatHub; // Create a function that the hub can call to broadcast messages. chat.client.broadcastMessage = function (name, message) { // Html encode display name and message. var encodedName = $('<div />').text(name).html(); var encodedMsg = $('<div />').text(message).html(); // Add the message to the page. $('#discussion').append('<li><strong>' + encodedName + '</strong>: ' + encodedMsg + '</li>'); }; // Get the user name and store it to prepend to messages. $('#displayname').