本文章是由機器翻譯。

新式應用程式

使用 SignalR 建置現代化應用程式

Rachel Appel

下載代碼示例

Rachel Appel有寬頻互聯網和無線設備的普及,為即時應用的巨大需求。最受歡迎的網站,如 Facebook 和 Twitter、 多人遊戲和協作的商務應用程式有最佳的使用者體驗,當他們是活的、 即時的應用程式。許多其他類型的應用程式是即時的經歷,包括股票和金融應用程式、 拍賣、 銷售儀表板、 電子商務和教育應用程式的好人選。即使 Web 網站和應用程式的即時資料在哪裡不是必需能受益于與那麼 SignalR 的即時、 全雙工通信。

那麼 SignalR 是什麼和為什麼要使用它嗎?

那麼 SignalR 是一套的方便簡單、 即時、 雙向伺服器和用戶端之間的通信的伺服器和用戶端庫。不僅可以與伺服器,用戶端發起聯繫,正如在 Web 開發中,情形伺服器也可以聯繫用戶端。那些也不能只是簡單的 HTTP 回應。這些都是實際的方法調用從伺服器到用戶端,像推送技術。客戶甚至可以聯繫其他用戶端通過那麼 SignalR 伺服器端元件。這一切是可能的因為那麼 SignalR 創建一個伺服器和用戶端之間的持續連接。

每個人都想要創造現代軟體 — — 和它沒有得到任何更多的現代比全雙工通信。有幾個原因,使用那麼 SignalR。其易用性寫作的 Web 網站和應用程式是一個很好的理由。另一種是如果你需要即時通信軟體中。在這些情況下,那麼 SignalR 是要走的路。你可以使用任意數量的技術,如 Websocket 或 AJAX 輪詢自己。然而,你將不得不重寫所有的基礎,那麼 SignalR 團隊已經做。這樣的基礎工作是相當廣闊,包括幾項關鍵功能:

  • 運輸談判:那麼 SignalR 檢測最佳的交通運輸工具,要盡可能的即時通信。它使用 Websocket 預設情況下,因為這是最快和最現代的方式寫即時 Web 應用程式。自動運輸管理是背後的理念中那麼 SignalR 的即時通信。它談判運輸為每個用戶端,因為它連接。
  • 那麼 SignalR 伺服器主機:你可以輕自託管任何位置包括非微軟平臺之間進行選擇或掛接那麼 SignalR 到 IIS 管道。
  • 用戶端庫:包括 JavaScript、 Microsoft.NET 框架和 Windows 存儲庫。
  • JavaScript 代理:這提供了一種調用方法在遠端位置在 JavaScript 中,在發展,如果所有代碼都相同的進程中都運行在同一台機器上同時方式。
  • 安全性:那麼 SignalR 鉤到現有的ASP.NET安全模型,並支援許多流行的協力廠商安全供應商微軟的 Live、 OpenAuth、 谷歌、 臉譜和推特。

Web 開發人員傳統上編寫代碼的 HTTP 要求/回應模型。沒有什麼本質上是壞了,但它缺乏那麼 SignalR 的主要好處 — — 伺服器和用戶端之間的持續連接。在 HTTP 中,您發出一個請求,得到的回應,然後你就大功告成。在即時的場景中,管道仍保持打開伺服器和用戶端之間。這允許您創建更豐富、 更好的灌輸,覺得活著和連接。

低級傳輸,那麼 SignalR,那裡是兩層的抽象 — — 集線器和持久性連接。這篇文章將涵蓋為簡潔起見只是集線器。集線器) 均為更高級的 API,是那麼 SignalR 的"令人難以置信的簡單"部分。持續連接到代碼,採取更多的時間和精力,那麼 SignalR 用作一個樞紐為基礎。除非你有好的理由,否則,通常會為您的活動,大多數使用集線器。

入門那麼 SignalR 在 Windows 應用程式中

像許多其他.NET 庫,那麼 SignalR 之際,NuGet 套裝程式。您可以使用 NuGet封裝管理員或封裝管理員主控台安裝它。兩者都是Visual Studio2012 及 2013Visual Studio的特徵。 有幾個不同的那麼 SignalR 套裝軟體可從 Microsoft,包括:

  • 微軟ASP.NET那麼 SignalR:用 JavaScript 用戶端安裝核心和 Web 元件的基礎套裝軟體
  • 微軟ASP.NET那麼 SignalR 核心元件:主辦和核心庫
  • 微軟ASP.NET那麼 SignalR System.Web:那麼 SignalRASP.NET.net
  • 微軟ASP.NET那麼 SignalR JavaScript 用戶端:JavaScript HTML 應用程式的用戶端庫
  • 微軟ASP.NET那麼 SignalR.NET 用戶端:其他 Windows 平臺應用程式的用戶端庫

當你在你的任何ASP.NET專案 (Web 表單或 MVC) 安裝了微軟ASP.NET那麼 SignalR 套裝軟體時,那麼 SignalR 在每個.NET 用戶端除了列出的套裝軟體安裝依賴項。.NET 用戶端為 Windows 8 和 Windows Phone XAML 的應用程式,Windows Presentation Foundation(WPF),Windows 表單和主控台應用程式。NuGet封裝管理員從 Microsoft 和協力廠商有更多的那麼 SignalR 套裝軟體。這些只是關於一切包括,自託管,縮放的封面,依賴注入和 MongoDB 的支援。

安裝完成後,沒有要調整的 web.config 設置。但是,您必須添加啟動代碼,以指示到ASP.NET會插入到其管道的那麼 SignalR 的一個小片段:

[assembly: OwinStartup(typeof(VoteR.Startup))]
public partial class Startup
{
  public void Configuration(IAppBuilder app)
  {
    app.MapSignalR();
  }
}

可以將此啟動類添加到 App_Start 資料夾中的.cs 檔。一些ASP.NET專案範本已經包括啟動類為ASP.NETForms 身份驗證。如果是這樣,只是配置將方法添加到該類相反。一旦你這樣做,你可以移動到編寫即時代碼。

此啟動類是.NET (浩然) 啟動開放的 Web 介面。這就意味著它奉行新的浩然規格。浩然是一個很像標準支配世界萬維網聯盟 (W3C) 的標準。微軟在一個叫做武士刀專案實施了浩然。這是後面那麼密切配合與非法入境者,或作為自主辦以便利進行雙向溝通的 SignalR 引擎。作為使用集線器的那麼 SignalR 開發者,你不會需要更多的瞭解浩然或武士刀。那麼 SignalR 所有的抽象化這樣你可以專注于解決你那麼 SignalR 的業務問題。

那麼 SignalR 集線器伺服器端

集線器是那麼 SignalR 的通信核心。他們接收傳入的請求,並將消息推送到用戶端,從集線器本身或代表另一個用戶端。你可以考慮那麼 SignalR 要像中心和分支的一個車輪樞紐。

集線器是只是一個看門人的消息。他們在行動的中心,中心則只是從 Microsoft.AspNet.SignalR.Hub 類繼承的類。集線器類,反過來,實施­Microsoft.AspNet.SignalR.Hubs 命名空間的創新介面五花八門。創新介面定義三個事件:OnConnected、 OnDisconnected 和 OnReconnected。它還定義了三個屬性:用戶端、 上下文和組。這些是常見任務或每個即時連接到該集線器與相關的資訊。

在集線器上,這意味著代碼看起來像一個 Web 服務調用,用戶端調用的公共方法。然而,那麼 SignalR 集線器可以啟動與註冊用戶端都與他們接觸。你不正常程式與這種行為在心目中,您通常會使用傳統的請求回應模型。

這可能是由於用戶端屬性工作表示集合的所有連接的用戶端。通過用戶端屬性,您可以訪問的單個用戶端或多個用戶端,無論他們的平臺。例如,iOS 用戶端可以發送消息到通過集線器的 Windows 用戶端,作為樞紐與 Windows 用戶端上代表 iOS 用戶端進行通信。

若要查看行動的中心,我會檢查調用顯示一系列的專案並允許使用者為他們最喜歡投票的選民的應用程式範例。在應用程式的核心,那裡是一個 VoteHub 類。這是符合使用者已經為每個專案所投票數的樞紐。然後,它通知客戶,最新數位。圖 1 VoteHub 類的實例。

圖 1 VoteHub 類吻合票

public class VoteHub : Hub
{
  private static List<Item> VoteItems = new List<Item>();
  private static VoteRContext db = new VoteRContext();
  public void Vote(int id)
  {  
    var votes = AddVote(id);
    Clients.All.updateVoteResults(id, votes);
  }
  private static Item AddVote(int id) {
    var voteItem = VoteItems.Find(v => v.Id == id);       
    if (voteItem != null)
    {
      voteItem.Votes++;
      return voteItem;
    }
    else
    {
      var item = db.Items.Find(id);
      item.Votes++;
      VoteItems.Add(item);
      return item;  
    }       
  }
  public override Task OnConnected()
  {       
    Clients.Caller.joinVoting(VoteItems.ToList());
    return base.OnConnected();
  }
}

這兩種方法來探討在圖 1 的投票和添加­投票方法。投票方法是用戶端的調用 (下一節中討論)。應用程式然後調用私有的 AddVote 方法,並實際投票計數。這樣的檢查,看看專案是否已經在 VoteItems 清單中所做的工作。如果他們是,它將對它們進行更新。如果不是,第一次使用者投票對他們來說,AddVote,會將該專案添加。靜態清單 < 投票 > 是簡單的方法來存儲簡單的全球資訊,此類沒有資料庫。

投票方法在圖 1 後其對 AddVote 的調用包含有趣的程式碼:

Clients.All.updateVoteResults(id, votes);

在那麼 SignalR,您將在用戶端上使用用戶端屬性訪問和調用代碼。從客戶機屬性中,可以針對您想要訪問的用戶端。有時,它是所有的用戶端,例如當發生了新的投票。有時它是唯一的用戶端如當使用者第一次連接。通過使用命名約定可以那麼 SignalR 匹配伺服器調用所用的代碼在用戶端上運行。這是ASP.NET可以使用動態屬性來調用的代碼在用戶端上的歷史上的第一次。

正如你可能想像的因為 VoteHub 需要跟蹤的選票,這道理是像 OnConnected 事件。OnConnected 事件允許您捕獲新的傳入連接。一個可能的方案是陷阱通過上下文物件的 ConnectionId 屬性的連接 id。

在選民的應用程式,在圖 1 它騎自行車穿過 VoteHub 清單 < 專案 > 中的三個專案 物件,並通知用戶端多少張選票,每個專案已通過 Clients.caller 屬性。這種方式,新連接的用戶端立即有票贊成加入黨的每一項的總數。

有很多種伺服器和用戶端之間進行通信。集線器類的用戶端屬性公開的很多的各種方式,我們可以訪問用戶端代碼中所述圖 2

圖 2 從伺服器到用戶端的通信的各種方法

// Call method on all clients
Clients.All.clientSideMethod(args, args, ...);
// Call method on specific client       
Clients.Client(Context.ConnectionId). clientSideMethod(args, args, ...);
// Call a method on a list of specific connections
Clients.Clients(ConnectionId1, ConnectionId1, ...).clientSideMethod(args, args, ...);
// Call method on calling connection
Clients.Caller.clientSideMethod(args, args, ...);
// Call method on all clients but the caller
Clients.Others. clientSideMethod(args, args, ...);
// Call method on all in the group except a few select connections
Clients.AllExcept(connectionId1, connectionId2).clientSideMethod(args, args, ...);
// Call method on groups of connections
Clients.Group(groupName).clientSideMethod(args, args, ...);
// Call method on connected clients in a specified group
Clients.Groups(GroupIds).clientSideMethod(args, args, ...);
// Call method on other connected clients in a specified group
Clients.OthersInGroup(groupName).clientSideMethod(args, args, ...);

圖 2,clientSideMethod 在用戶端上定義伺服器調用。在接下來的部分中,您將學習如何在用戶端上定義這些方法。正如你所看到的用戶端屬性的動態性質允許您為種類繁多的伺服器編寫代碼-到-­用戶端通信方案。

那麼 SignalR 用戶端:JavaScript 和.NET 用戶端

您可以在任何平臺上用那麼 SignalR 構建即時應用。出廠時,您可以使用 HTML 用戶端應用程式,包括 WinJS 的應用程式與 Web 的所有東西那麼 SignalR JavaScript 用戶端。普通的 HTML 和 JavaScript 是得到廣泛支援的語言。對於.NET 的人來說,Microsoft 已發佈了.NET 用戶端視窗和桌面應用程式。像核心元件,您安裝的 JavaScript 或.NET 用戶端從 NuGet,取決於您的專案的類型。由於 JavaScript 是一隻 JavaScript,你可以下載從腳本 github.com/SignalR/SignalR,和添加 < 腳本 > 標記到您的頁面,而不是引用的.DLL 檔案,如下所示:

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.signalR-2.0.3.js"></script>
<script src="~/signalr/hubs"></script>

腳本引用的順序非常重要。你必須首先載入 jQuery,因為那麼 SignalR 取決於它了。下一步在行是那麼 SignalR 用戶端。最後一個是那麼 SignalR 代理。那麼 SignalR 動態生成代理在運行時,在 /signalr/hubs 將它掉下來。此代理伺服器是什麼讓你編寫代碼的用戶端和伺服器,但它表現得好像它都處於相同的位置。

選民應用程式的用戶端腳本定義方法以接收來自伺服器的調用,以及普通的方法和事件絲 ups。在圖 3,第一行代碼的陷阱名為 voteHub 的變數。這是一條直線到 VoteHub 類的一個實例。那麼 SignalR 創建了為每個用戶端連接的樞紐。用戶端啟動連接調用 $.conne­ction.hub.start 返回的承諾。這意味著內的代碼不會運行,直到它完成。在這種情況下,它是對內部投票按鈕的 click 事件的伺服器上的表決方法的調用。正如你所看到的它將為其投票使用者的專案 id 傳遞到伺服器。然後該伺服器將執行中所概述的工作圖 1

圖 3 用戶端 JavaScript 代碼

$(function () {
  var voteHub = $.connection.voteHub;
  $.connection.hub.start().done(function () {
    $("button").click(function () {
      voteHub.server.vote(this.id);
        });
  });
  voteHub.client.updateVoteResults = function (id, vote) {
    // Update UI to show each item and how many votes it has
    }
  voteHub.client.joinVoting = function (votes) {
    // Cycle through votes to display current information
    // about each item to newcomer
  }   
});

在這一點上,你可能會覺得有錯別字在圖 3。這是因為命名的 VoteHub 類和投票方法是伺服器和用戶端之間不一致。這不是一個錯字,但寧願那麼 SignalR 公約 》。在用戶端 JavaScript,對 hub.server.methodName 的調用預設進去了駝峰匹配。很容易通過將 HubName 屬性附加到集線器類的你想要的確切大小寫更改此行為。HubName 屬性如下所示:HubName("VoteHub")。

兩個最有趣的代碼塊在圖 3 是 voteHub.client.updateVoteResults 和 voteHub.client.joinVoting 塊。它們的簽名顯示,這兩種方法都是在伺服器上的 VoteHub 的用戶端屬性的成員。反思圖 1,用戶端的 voteHub.client.updateVoteResults 方法中,從圖 3 贊同 Clients.All.update­VoteResults id 票) 從調用圖 1圖 4 顯示了伺服器和用戶端代碼之間的關係。

樞紐與用戶端方法調用之間的關係
圖 4 樞紐與用戶端方法調用之間的關係

現在,它是時間來檢查.NET 用戶端。圖 5 展示了一些代碼,使得從一個 Windows 存儲 XAML 的應用程式使用的 C# 的連接。這可能就像一個 Windows Phone 的應用程式,很容易因為代碼是相同。開始,它創建一個到那麼 SignalR 管道連接。然後它去創建代理。

在你看到什麼圖 5 你通常不會看到在 JavaScript 用戶端是那麼 SignalR 管道 HubConnection 建構函式傳入的 HTTP 路徑。與不同的 JavaScript 用戶端,這是稍微自動。你必須具現化的 HubConnection 和調用 CreateHubProxy 來創建代理。

圖 5 Windows 應用商店 C# 用戶端代碼對選民進行投票

async private Task startConnection()
{
  var hubConnection = new HubConnection("http://localhost:25024/signalr");
  IHubProxy hubProxy = hubConnection.CreateHubProxy("VoteHub");
  var context = SynchronizationContext.Current;
  hubProxy.On<string, string>("updateVoteResults", (id, votes) =>
    context.Post(delegate {
  // Update UI
); }, null));                        
  await hubConnection.Start();
  await hubProxy.Invoke("vote", "rachel", 
    Convert.ToDecimal(itemId.Text));
}

注意,在圖 5 還有獲得同步上下文的賦值。你包裹,伺服器將調用與此上下文物件的用戶端代碼。然後你打電話給其 Post 方法並傳遞一個委託。在 C# 中的委託是內聯匿名函數在 JavaScript 中相同。

後啟動的集線器連接,就可以調用其代理的 Invoke 方法,對專案進行表決。使用 await 關鍵字將導致它以非同步方式執行這些操作。您可以查找在選民演示應用程式的完整原始程式碼:github.com/rachelappel/VoteR

那麼 SignalR 部署:伺服器和用戶端

因為那麼 SignalR 是ASP.NET,你也必須將部署環境與.NET 框架 4.5 或更高版本,除非你自主辦。在ASP.NET專案中,那麼 SignalR 是只是一套的庫。它伴隨其他圖書館時部署時間。

如果你認為的那麼 SignalR 其餘的很簡單,等待,直到您嘗試部署到微軟 Azure。使用 Azure 使部署過程尤其是無壓力。這也會部署那麼 SignalR 伺服器元件和至少一個 HTML 用戶端到 Web 服務器。當然,你必須將任何 Windows 應用商店或 Windows Phone 應用程式到應用程式商店和桌面應用程式發佈到桌面通過適當的管道。

那些與任何ASP.NET專案可以發佈從功能表中選擇Visual Studio生成開始部署到 Azure。如果您使用的Visual Studio2013年,你就可以按照提示。你只需要輸入您的憑據,請選擇資料庫和 Web 網站的名稱。

在Visual Studio2012,它是一組類似的提示。在部署期間,您可以選擇創建一個新的 Azure Web 網站,或選擇一個現有。如果這是一個現有的網站,登錄到 Azure 入口網站,導航到配置選項卡,並找到並打開 Websocket。你必須用新的 Web 網站,以及,但Visual Studio將創建並在網站上發佈第一次,這將導致一個錯誤。再次,只是登錄並打開 Websocket。這是最重要的事情。它是一個好的主意來停止和啟動配置更改後的任何 Web 網站。

總結

那麼 SignalR 真的是簡單、 即時程式設計。雖然它是一種ASP.NET產品,它是跨平臺的在這您可以編寫 Windows 應用商店,iOS 和 Android 應用程式與ASP.NET伺服器元件。您還可以自主持上微軟的作業系統。這使得那麼 SignalR,靈活,以及簡單和高效。關於那麼 SignalR 的另一個偉大的事情是你甚至不需要具有即時功能作為一項要求。用它前進,加入很多人已經通過即時程式設計范式。


Rachel Appel 是 20 多年的經驗,在 IT 行業顧問、 作者、 導師和前微軟員工。她說話在一流的行業會議,如Visual Studio活 !,DevConnections,混合和更多。她的專長在於內開發對齊業務和技術集中在微軟開發堆疊上,打開 Web 的解決方案。阿佩爾的更多資訊,請訪問她的網址 rachelappel.com

感謝以下的微軟技術專家對本文的審閱:FrankLa 墓葬