實際操作實驗室：使用 SignalR 的即時 Web 應用程式

發行項
07/13/2023

警告

本檔不適用於最新版的 SignalR。看看ASP.NET Core SignalR。

下載 2015 年 10 月發行的 Web Training Kit

即時 Web 應用程式可讓您即時將伺服器端內容推送至連線的用戶端。對於 ASP.NET 開發人員， ASP.NET SignalR 是一個程式庫，可將即時 Web 功能新增至其應用程式。它會利用數個傳輸，在用戶端和伺服器的最佳可用傳輸的情況下，自動選取最佳的可用傳輸。它利用 WebSocket，這是一種 HTML5 API，可啟用瀏覽器與伺服器之間的雙向通訊。

SignalR 也提供簡單的高階 API，可讓您在用戶端瀏覽器中從伺服器端 .NET 程式碼) ASP.NET 呼叫用戶端 RPC (呼叫 JavaScript 函式，以及新增連線管理的實用勾點，例如連線/中斷線上活動、群組連線和授權。

SignalR 是某些傳輸的抽象概念，需要這些傳輸才能在用戶端與伺服器之間執行即時工作。 SignalR連線會以 HTTP 的形式啟動，然後在可用時升級為WebSocket連線。 WebSocket是SignalR的理想傳輸，因為它能最有效率地使用伺服器記憶體、具有最低的延遲，而且具有最基礎的功能 (，例如用戶端與伺服器) 之間的完整雙工通訊，但它也有最嚴格的需求：WebSocket要求伺服器使用Windows Server 2012或Windows 8，以及.NET Framework 4.5。如果不符合這些需求， SignalR 會嘗試使用其他傳輸，使其連線 (，例如 Ajax 長時間輪詢) 。

SignalR API 包含兩種在用戶端和伺服器之間通訊的模型：持續性連線和中樞。 Connection代表用來傳送單一收件者、群組或廣播訊息的簡單端點。中樞是建置在連線 API 之上的高階管線，可讓您的用戶端和伺服器直接呼叫方法。

所有範例代碼和程式碼片段都包含在 2015 年 10 月發行的 Web Training Kit 中，可在 https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b 取得。請注意，該頁面上的安裝程式連結已不再運作;請改用 [資產] 區段底下的其中一個連結。

概觀

目標

在此實際操作實驗室中，您將瞭解如何：

使用 SignalR 將通知從伺服器傳送到用戶端。
使用SQL Server來Scale Out SignalR 應用程式。

必要條件

需要下列專案才能完成此實際操作實驗室：

Visual Studio Express 2013 網頁版或更新版本

安裝程式

若要在此實際操作實驗室中執行練習，您必須先設定環境。

開啟 Windows 檔案總管視窗，並流覽至實驗室的 [來源] 資料夾。
以滑鼠右鍵按一下 Setup.cmd ，然後選取 [ 以系統管理員身分執行 ] 以啟動安裝程式，以設定您的環境，並安裝此實驗室的 Visual Studio 程式碼片段。
如果顯示 [使用者帳戶控制] 對話方塊，請確認要繼續的動作。

注意

在執行安裝程式之前，請確定您已檢查此實驗室的所有相依性。

使用程式碼片段

在整個實驗室檔中，系統會指示您插入程式碼區塊。為了方便起見，大部分的程式碼都會以Visual Studio Code程式碼片段的形式提供，您可以從Visual Studio 2013記憶體取，以避免手動新增。

注意

每個練習都會伴隨位於練習的 Begin 資料夾中的起始解決方案，可讓您獨立于其他練習個別追蹤每個練習。請注意，在練習期間新增的程式碼片段會從這些起始解決方案中遺失，而且在您完成練習之前可能無法運作。在練習的原始程式碼內，您也會找到包含 Visual Studio 解決方案的 End 資料夾，其中包含完成對應練習中步驟所產生的程式碼。如果您需要額外的協助，請透過此實際操作實驗室，使用這些解決方案作為指引。

Exercises

此實際操作實驗室包含下列練習：

使用 SignalR 處理Real-Time資料
使用 SQL Server相應放大

完成此實驗室的估計時間： 60 分鐘

注意

當您第一次啟動 Visual Studio 時，必須選取其中一個預先定義的設定集合。每個預先定義的集合都設計成符合特定的開發樣式，並決定視窗配置、編輯器行為、IntelliSense 程式碼片段和對話方塊選項。本實驗室中的程式描述使用 一般開發設定 集合時，在 Visual Studio 中完成指定工作所需的動作。如果您為開發環境選擇不同的設定集合，則應該考慮的步驟可能會有所差異。

練習 1：使用 SignalR 處理Real-Time資料

雖然聊天通常用來做為範例，但您可以使用即時 Web 功能執行更多動作。每當使用者重新整理網頁以查看新資料或頁面實作 Ajax 長時間輪詢以擷取新資料時，您可以使用 SignalR。

SignalR 支援 伺服器推播 或廣播功能;它會自動處理連線管理。在用戶端-伺服器通訊的傳統 HTTP 連線中，會針對每個要求重新建立連線，但 SignalR 會在用戶端與伺服器之間提供持續性連線。在 SignalR 中，伺服器程式碼會使用遠端程序呼叫來呼叫瀏覽器中的用戶端程式代碼， (RPC) ，而不是我們目前知道的要求-回應模型。

在此練習中，您會將 Geek 測驗 應用程式設定為使用 SignalR 來顯示具有更新計量的統計資料儀表板，而不需要重新整理整個頁面。

工作 1 – 探索 Geek 測驗統計資料頁面

在這項工作中，您將流覽應用程式，並確認統計資料頁面的顯示方式，以及如何改善資訊更新的方式。

開啟Visual Studio Express 2013 for Web，然後開啟位於 Source\Ex1-WorkingWithRealTimeData\Begin資料夾中的GeekQuiz.sln解決方案。
按 F5 執行方案。 [ 登入 ] 頁面應該會出現在瀏覽器中。

執行解決方案
按一下頁面右上角的 [註冊 ]，在應用程式中建立新的使用者。

註冊連結
在 [註冊] 頁面中，輸入使用者名稱和密碼，然後按一下 [註冊]。

註冊使用者
應用程式會註冊新的帳戶，並驗證使用者並重新導向回顯示第一個測驗問題的首頁。
在新視窗中開啟 [統計資料 ] 頁面，並排放置 [首頁 ] 和 [ 統計資料] 頁面。

並

並存視窗
在 [首頁 ] 中，按一下其中一個選項來回答問題。

回答問題
按一下其中一個按鈕之後，答案應該會出現。

正確回答的問題
請注意，[統計資料] 頁面中提供的資訊已過期。重新整理頁面，以查看更新的結果。

統計資料頁面
返回至 Visual Studio 並停止偵錯。

工作 2 – 將 SignalR 新增至 Geek 測驗以顯示線上圖表

在這項工作中，您會將 SignalR 新增至解決方案，並在新的答案傳送至伺服器時自動將更新傳送給用戶端。

從 Visual Studio 的 [ 工具] 功能表中，選取 [NuGet 套件管理員]，然後按一下 [ 套件管理員主控台]。
在 [ 套件管理員主控台] 視窗中，執行下列命令：
```
Install-Package Microsoft.AspNet.SignalR
```
SignalR 套件安裝
注意

從全新的 MVC 5 應用程式安裝 SignalR NuGet 套件 2.0.2 版時，您必須在安裝 SignalR 之前，手動將 OWIN 套件更新為 2.0.1 版 (或更高版本) 。若要這樣做，您可以在 套件管理員主控台中執行下列腳本：
```
get-package | where-object { $_.Id -like "Microsoft.Owin*"} | Update-Package
```
在未來的 SignalR 版本中，OWIN 相依性將會自動更新。
在方案總管中，展開 [腳本] 資料夾，並注意 SignalR js檔案已新增至解決方案。

SignalR JavaScript 參考
在方案總管中，以滑鼠右鍵按一下GeekQuiz專案，選取 [新增 | 資料夾]，並將它命名為Hubs。
以滑鼠右鍵按一下 [ 中樞] 資料夾，然後選取 [ 新增] |新增專案。

新增專案
在 [ 新增專案 ] 對話方塊中，選取 Visual C# |Web | 左窗格中的 SignalR 節點，從中央窗格選取 [SignalR Hub 類別] (v2) ，將檔案命名為 StatisticsHub.cs ，然後按一下 [ 新增]。

[新增專案] 對話方塊
以下列程式碼取代 StatisticsHub 類別中的程式碼。

(程式碼片段 - RealTimeSignalR - Ex1 - StatisticsHubClass)
```
namespace GeekQuiz.Hubs
{
    using Microsoft.AspNet.SignalR;

    public class StatisticsHub : Hub
    {
    }
}
```
開啟 Startup.cs ，並在 Configuration 方法的結尾新增下列這一行。

(程式碼片段 - RealTimeSignalR - Ex1 - MapSignalR)
```
public void Configuration(IAppBuilder app)
{
    this.ConfigureAuth(app);
    app.MapSignalR();
}
```
開啟Services資料夾內的StatisticsService.cs頁面，然後新增下列 using 指示詞。

(程式碼片段 - RealTimeSignalR - Ex1 - UsingDirectives)
```
using Microsoft.AspNet.SignalR;
using GeekQuiz.Hubs;
```
若要通知連線的用戶端更新，您必須先擷取目前連線的 CoNtext 物件。 Hub物件包含將訊息傳送至單一用戶端或廣播至所有已連線用戶端的方法。將下列方法新增至 StatisticsService 類別，以廣播統計資料資料。

(程式碼片段 - RealTimeSignalR - Ex1 - NotifyUpdatesMethod)
```
public async Task NotifyUpdates()
{
    var hubContext = GlobalHost.ConnectionManager.GetHubContext<StatisticsHub>();
    if (hubContext != null)
    {
         var stats = await this.GenerateStatistics();
         hubContext.Clients.All.updateStatistics(stats);
    }
}
```
注意

在上述程式碼中，您會使用任意方法名稱在用戶端上呼叫函式 (，也就是 updateStatistics) 。您指定的方法名稱會解譯為動態物件，這表示沒有 IntelliSense 或編譯時期驗證。運算式會在執行時間進行評估。當方法呼叫執行時，SignalR 會將方法名稱和參數值傳送至用戶端。如果用戶端有符合名稱的方法，則會呼叫該方法，並將參數值傳遞給它。如果在用戶端上找不到相符的方法，則不會引發任何錯誤。如需詳細資訊，請參閱 ASP.NET SignalR Hubs API 指南。
開啟Controllers資料夾內的TriviaController.cs頁面，然後新增下列 using 指示詞。
```
using GeekQuiz.Services;
```

將下列醒目提示的程式碼新增至 Post 巨集指令方法。

(程式碼片段 - RealTimeSignalR - Ex1 - NotifyUpdatesCall)

public async Task<IHttpActionResult> Post(TriviaAnswer answer)
{
    if (!ModelState.IsValid)
    {
         return this.BadRequest(this.ModelState);
    }

    answer.UserId = User.Identity.Name;

    var isCorrect = await this.StoreAsync(answer);

    var statisticsService = new StatisticsService(this.db);
    await statisticsService.NotifyUpdates();

    return this.Ok<bool>(isCorrect);
}

在 Views 內開啟 Statistics.cshtml 頁面 |主資料夾。找出 [腳本 ] 區段，並在區段開頭新增下列腳本參考。

(程式碼片段 - RealTimeSignalR - Ex1 - SignalRScriptReferences)
```
@section Scripts {
    @Scripts.Render("~/Scripts/jquery.signalR-2.0.2.min.js");
    @Scripts.Render("~/signalr/hubs");
    ...
}
```
注意

當您將 SignalR 和其他腳本程式庫新增至 Visual Studio 專案時，套件管理員可能會安裝比本主題中顯示的版本還新的 SignalR 腳本檔案版本。請確定程式碼中的腳本參考符合專案中所安裝的腳本程式庫版本。

新增下列醒目提示的程式碼，以將用戶端連線到 SignalR 中樞，並在從中樞收到新訊息時更新統計資料資料。

(程式碼片段 - RealTimeSignalR - Ex1 - SignalRClientCode)

@section Scripts {
    ...
    <script>
        ...

        var connection = $.hubConnection();
        var hub = connection.createHubProxy("StatisticsHub");
        hub.on("updateStatistics", function (statistics) {
                statisticsData = statistics;
                $("#correctAnswersCounter").text(statistics.CorrectAnswers);
                $("#incorrectAnswersCounter").text(statistics.IncorrectAnswers);

                showCharts(statisticsData);
          });

        connection.start();
    </script>
}

在此程式碼中，您會建立中樞 Proxy，並註冊事件處理常式以接聽伺服器所傳送的訊息。在此情況下，您會接聽透過 updateStatistics 方法傳送的訊息。

工作 3 – 執行解決方案

在這項工作中，您將執行解決方案，以確認在回答新問題之後，統計資料檢視會自動使用 SignalR 進行更新。

按 F5 執行方案。

注意

如果尚未登入應用程式，請使用您在工作 1 中建立的使用者登入。
在新視窗中開啟 [ 統計資料 ] 頁面，並排放置 [ 首頁 ] 和 [ 統計資料 ] 頁面，就像您在工作 1 中所做的一樣。
在 [首頁 ] 中，按一下其中一個選項來回答問題。

回答另一個問題
按一下其中一個按鈕之後，答案應該會出現。請注意，在回答具有更新資訊的問題之後，頁面上的統計資料資訊會自動更新，而不需要重新整理整個頁面。

回應之後重新整理的統計資料頁面

練習 2：使用SQL Server相應放大

調整 Web 應用程式時，您通常可以選擇 相應增加 和 相應放大 選項。 相應增加 表示使用較大的伺服器，而更多資源 (CPU、RAM 等) ，而 相應放大 則表示新增更多伺服器來處理負載。後者的問題在於用戶端可以路由傳送到不同的伺服器。連線至一部伺服器的用戶端將不會接收從另一部伺服器傳送的訊息。

您可以使用稱為 背板的元件，在伺服器之間轉送訊息，來解決這些問題。啟用後板後，每個應用程式實例都會將訊息傳送至背板，而後板會將訊息轉送至其他應用程式實例。

SignalR 目前有三種類型的背板：

Windows Azure 服務匯流排。服務匯流排是一種傳訊基礎結構，可讓元件傳送鬆散結合的訊息。
SQL Server。 SQL Server背板會將訊息寫入 SQL 資料表。背板會使用 Service Broker 進行有效率的傳訊。不過，如果 Service Broker 未啟用，它也會運作。
Redis。 Redis 是記憶體內部索引鍵/值存放區。 Redis 支援發佈/訂閱 (「pub/sub」) 模式來傳送訊息。

每個訊息都會透過訊息匯流排傳送。訊息匯流排會實作 IMessageBus 介面，以提供發佈/訂閱抽象概念。背板的運作方式是將預設 IMessageBus 取代為專為該背板設計的匯流排。

每一個伺服器實例都會透過匯流排連線到背板。當訊息傳送時，它會傳送至背板，而後板會將它傳送至每部伺服器。當伺服器從後臺板收到訊息時，它會將訊息儲存在其本機快取中。然後，伺服器會從其本機快取將訊息傳遞至用戶端。

如需 SignalR 背板運作方式的詳細資訊，請閱讀這篇文章。

注意

在某些情況下，背板可能會成為瓶頸。以下是一些典型的 SignalR 案例：

伺服器廣播 (例如股票勾號) ：背板適用于此案例，因為伺服器會控制訊息的傳送速率。
用戶端對用戶端 (例如聊天) ：在此案例中，如果訊息數目隨著用戶端數目調整，後端板可能是瓶頸;也就是說，如果訊息的速率隨著更多用戶端加入而按比例成長。
高頻率即時 (例如即時遊戲) ：此案例不建議使用背板。

在此練習中，您將使用SQL Server將訊息分散到Geek 測驗應用程式。您會在單一測試電腦上執行這些工作，以瞭解如何設定設定，但為了獲得完整效果，您必須將 SignalR 應用程式部署到兩部以上的伺服器。您也必須在其中一部伺服器上或個別的專用伺服器上安裝SQL Server。

使用SQL Server圖表Scale Out

工作 1 - 瞭解案例

在這項工作中，您將執行 2 個 Geek 測驗 實例，以模擬本機電腦上的多個 IIS 實例。在此案例中，回答一個應用程式上的問題時，不會在第二個實例的統計資料頁面上收到更新通知。此模擬類似于將應用程式部署在多個實例上，並使用負載平衡器與其通訊的環境。

開啟Source/Ex2-ScalingOutWithSQLServer/Begin資料夾中的Begin.sln解決方案。載入之後，您會注意到伺服器總管中有兩個專案具有相同的結構，但名稱不同。這會模擬在本機電腦上執行相同應用程式的兩個實例。

開始模擬 2 個 Geek 測驗實例的解決方案
以滑鼠右鍵按一下方案節點，然後選取 [ 屬性]，以開啟方案的屬性頁面。在 [啟動專案]底下，選取 [多個啟動專案 ]，並將這兩個專案的 [動作 ] 值變更為 [開始]。

啟動多個專案
按 F5 執行方案。應用程式會在不同的埠中啟動兩個 Geek 測驗 實例，以模擬相同應用程式的多個實例。將其中一個瀏覽器釘選在左側，另一個位於畫面右側。使用您的認證登入或註冊新使用者。登入之後，請保留左側的 [Trivia] 頁面，然後移至右側瀏覽器中的 [ 統計資料 ] 頁面。

並排進行 Geek 測驗

不同埠中的 Geek 測驗
開始在左側瀏覽器中回答問題，您會發現右瀏覽器中的 [ 統計資料 ] 頁面未更新。這是因為 SignalR 會使用本機快取將訊息分散到其用戶端，而此案例正在模擬多個實例，因此不會在其之間共用快取。您可以測試相同的步驟，但使用單一應用程式來確認 SignalR 是否正常運作。在下列工作中，您將設定備份板，以跨實例複寫訊息。
返回至 Visual Studio 並停止偵錯。

工作 2 – 建立SQL Server背板

在這項工作中，您將建立一個資料庫，作為 Geek 測驗 應用程式的幕後程式。您將使用SQL Server 物件總管流覽伺服器並初始化資料庫。此外，您將啟用 Service Broker。

在Visual Studio中，開啟功能表 [檢視]，然後選取[SQL Server 物件總管]。
以滑鼠右鍵按一下SQL Server節點，然後選取 [新增SQL Server...]選項，以連線到您的 LocalDB 實例。

將SQL Server實例新增至 SQL Server 物件總管
將 伺服器名稱 設定為 (localdb) \v11.0 ，並將 Windows 驗證 保留為驗證模式。按一下 [連接] 以繼續。

連線到 LocalDB
現在您已連線到 LocalDB 實例，您必須建立代表 SignalR SQL Server背板的資料庫。若要這樣做，請以滑鼠右鍵按一下 [ 資料庫 ] 節點，然後選取 [ 新增資料庫]。

新增資料庫
將資料庫名稱設定為 SignalR ，然後按一下 [ 確定 ] 以建立它。

建立 SignalR 資料庫

注意

您可以選擇資料庫的任何名稱。
若要更有效率地從上架接收更新，建議您為資料庫啟用 Service Broker。 Service Broker 在 SQL Server 中提供傳訊和佇列的原生支援。背板也可在沒有 Service Broker 的情況下運作。以滑鼠右鍵按一下資料庫，然後選取 [新增查詢]，以開啟 新的查詢。

開啟新的查詢
若要檢查 Service Broker 是否已啟用，請在sys.databases目錄檢視中查詢is_broker_enabled資料行。在最近開啟的查詢視窗中執行下列腳本。
```
SELECT [name], [service_broker_guid], [is_broker_enabled] FROM [master].[sys].[databases]
```
查詢 Service Broker 狀態
如果資料庫中 is_broker_enabled 資料行的值是「0」，請使用下列命令來啟用它。以您在建立資料庫時設定的名稱取代< YOUR-DATABASE > (，例如：SignalR) 。
```
ALTER DATABASE <YOUR-DATABASE> SET ENABLE_BROKER
```
啟用 Service Broker

注意

如果此查詢似乎死結，請確定沒有連線到 DB 的應用程式。

工作 3 – 設定 SignalR 應用程式

在這項工作中，您將設定Geek Quiz以連線到SQL Server背板。您將會先新增 SignalR.SqlServer NuGet 套件，並將連接字串設定為備份表資料庫。

從工具>NuGet 套件管理員開啟套件管理員主控台。請確定已在[預設專案] 下拉式清單中選取GeekQuiz專案。輸入下列命令以安裝 Microsoft.AspNet.SignalR.SqlServer NuGet 套件。
```
Install-Package Microsoft.AspNet.SignalR.SqlServer
```
重複上一個步驟，但這次針對 Project GeekQuiz2。

若要設定SQL Server背板，請開啟GeekQuiz專案的Startup.cs檔案，並將下列程式碼新增至Configure方法。將YOUR-DATABASE > 取代 <為您在建立SQL Server背板時所使用的資料庫名稱。針對 GeekQuiz2 專案重複此步驟。

(程式碼片段 - RealTimeSignalR - Ex2 - StartupConfiguration)

public class Startup 
{   
    public void Configuration(IAppBuilder app) 
    {           
        var sqlConnectionString = @"Server=(localdb)\v11.0;Database=<YOUR-DATABASE>;Integrated Security=True;";
        GlobalHost.DependencyResolver.UseSqlServer(sqlConnectionString); 
        this.ConfigureAuth(app);
        app.MapSignalR();
    }
}

現在這兩個專案都設定為使用SQL Server背板，請按F5同時執行。
同樣地， Visual Studio 會在不同的埠中啟動兩個 Geek 測驗 實例。將左側的其中一個瀏覽器釘選到畫面右側，並使用您的認證登入。保留左側的 [Trivia] 頁面，然後移至右側瀏覽器中的 [ 統計資料 ] 頁面。
開始在左側瀏覽器中回答問題。這次， [統計資料 ] 頁面會隨著上架而更新。在應用程式之間切換 (統計資料 現在位於左側，而 Trivia 位於右側) ，並重複測試來驗證它是否適用于這兩個實例。背板可作為每個連線伺服器的訊息共用快取，而每部伺服器都會將訊息儲存在自己的本機快取中，以散發至連線的用戶端。
返回至 Visual Studio 並停止偵錯。
SQL Server背板元件會自動在指定的資料庫上產生必要的資料表。在[SQL Server 物件總管]面板中，開啟您為上架 (建立的資料庫，例如：SignalR) 並展開其資料表。您應該會看到下列資料表：

背板產生的資料表
以滑鼠右鍵按一下 SignalR.Messages_0 資料表，然後選取 [ 檢視資料]。

檢視 SignalR 背板訊息資料表
回答問題時，您可以看到傳送至中樞的不同訊息。背板會將這些訊息散發至任何連接的實例。

上架訊息資料表

總結

在此實際操作實驗室中，您已瞭解如何使用中樞將SignalR新增至您的應用程式，並將通知從伺服器傳送至連線的用戶端。此外，您已瞭解如何在多個 IIS 實例中部署應用程式時，使用背板元件相應放大應用程式。

共用方式為