教學課程：SignalR 自我裝載

發行項
06/16/2023

警告

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

本教學課程說明如何建立自我裝載 SignalR 2 伺服器，以及如何使用 JavaScript 用戶端連線到它。

教學課程中使用的軟體版本

Visual Studio 2013

.NET 4.5

SignalR 第 2 版

搭配本教學課程使用 Visual Studio 2012

若要搭配本教學課程使用 Visual Studio 2012，請執行下列動作：

將您的套件管理員更新為最新版本。

安裝 Web Platform Installer。

在 Web Platform Installer 中，搜尋並安裝ASP.NET 和 Web 工具 2013.1 for Visual Studio 2012。這會安裝 SignalR 類別的 Visual Studio 範本，例如 Hub。

某些範本 (，例如 OWIN 啟動類別) 將無法使用;針對這些檔案，請改用類別檔案。

問題和批註

請留下您喜歡本教學課程的意見反應，以及我們可以在頁面底部的批註中改善的內容。如果您有與教學課程不直接相關的問題，您可以將問題張貼到 ASP.NET SignalR 論壇或 StackOverflow.com。

概觀

SignalR 伺服器通常裝載于 IIS 中的 ASP.NET 應用程式中，但也可以自我裝載 (，例如使用自我裝載程式庫的主控台應用程式或 Windows 服務) 。此程式庫就像所有 SignalR 2 一樣，建置在 OWIN (Open Web Interface for .NET) 上。 OWIN 定義 .NET Web 服務器與 Web 應用程式之間的抽象概念。 OWIN 會將 Web 應用程式與伺服器分離，這讓 OWIN 非常適合在 IIS 外部自行裝載 Web 應用程式。

在 IIS 中未裝載的原因包括：

IIS 無法使用或想要的環境，例如沒有 IIS 的現有伺服器陣列。
必須避免 IIS 的效能額外負荷。
SignalR 功能會新增至在 Windows 服務、Azure 背景工作角色或其他程式中執行的現有應用程式。

如果基於效能考慮將解決方案開發為自我裝載，建議您也測試裝載于 IIS 中的應用程式，以判斷效能優勢。

本教學課程包含下列各節：

建立伺服器
使用 JavaScript 用戶端存取伺服器

建立伺服器

在本教學課程中，您將建立裝載在主控台應用程式中的伺服器，但伺服器可以裝載于任何類型的進程，例如 Windows 服務或 Azure 背景工作角色。如需在 Windows 服務中裝載 SignalR 伺服器的範例程式碼，請參閱在 Windows 服務中自我裝載 SignalR。

以系統管理員許可權開啟Visual Studio 2013。選取 [檔案]、[ 新增專案]。在 [範本] 窗格的[Visual C#] 節點下選取[Windows]，然後選取[主控台應用程式] 範本。將新專案命名為「SignalRSelfHost」，然後按一下 [ 確定]。
選取[工具>][NuGet 套件管理員套件>管理員主控台]，以開啟 NuGet 套件管理員主控台。
在套件管理員主控台中，輸入下列命令：
```
Install-Package Microsoft.AspNet.SignalR.SelfHost
```
此命令會將 SignalR 2 Self-Host 程式庫新增至專案。
在套件管理員主控台中，輸入下列命令：
```
Install-Package Microsoft.Owin.Cors
```
此命令會將 Microsoft.Owin.Cors 程式庫新增至專案。此程式庫將用於跨網域支援，這是裝載 SignalR 的應用程式和不同網域中的網頁用戶端所需的程式庫。由於您將在不同的埠上裝載 SignalR 伺服器和 Web 用戶端，這表示必須啟用跨網域，才能在這些元件之間進行通訊。

以下列程式碼取代 Program.cs 的內容。

using System;
using Microsoft.AspNet.SignalR;
using Microsoft.Owin.Hosting;
using Owin;
using Microsoft.Owin.Cors;

namespace SignalRSelfHost
{
    class Program
    {
        static void Main(string[] args)
        {
            // This will *ONLY* bind to localhost, if you want to bind to all addresses
            // use http://*:8080 to bind to all addresses. 
            // See http://msdn.microsoft.com/library/system.net.httplistener.aspx 
            // for more information.
            string url = "http://localhost:8080";
            using (WebApp.Start(url))
            {
                Console.WriteLine("Server running on {0}", url);
                Console.ReadLine();
            }
        }
    }
    class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.UseCors(CorsOptions.AllowAll);
            app.MapSignalR();
        }
    }
    public class MyHub : Hub
    {
        public void Send(string name, string message)
        {
            Clients.All.addMessage(name, message);
        }
    }
}

上述程式碼包含三個類別：

程式，包括定義執行主要路徑的 Main 方法。在此方法中， Startup 類型的 Web 應用程式會在指定的 URL () http://localhost:8080 啟動。如果端點上需要安全性，則可以實作 SSL。如需詳細資訊，請參閱如何：使用 SSL 憑證設定埠。
啟動，包含 SignalR 伺服器的組態的類別 (本教學課程唯一使用的組態是呼叫 UseCors) ，以及呼叫 MapSignalR ，這會為專案中的任何 Hub 物件建立路由。
MyHub，應用程式將會提供給用戶端的 SignalR Hub 類別。這個類別具有單一方法 Send，用戶端會呼叫以將訊息廣播給所有其他已連線的用戶端。

編譯並執行應用程式。伺服器正在執行的位址應該會顯示在主控台視窗中。
如果執行失敗，但例外 System.Reflection.TargetInvocationException was unhandled 狀況為，您必須以系統管理員許可權重新開機 Visual Studio。
繼續下一節之前，請先停止應用程式。

使用 JavaScript 用戶端存取伺服器

在本節中，您將使用開始使用教學課程中的相同 JavaScript 用戶端。我們只會對用戶端進行一項修改，也就是明確定義中樞 URL。使用自我裝載應用程式時，伺服器不一定與連線 URL 位於相同位址 (，因為反向 Proxy 和負載平衡器) ，因此必須明確定義 URL。

在[Solution Explorer] 中，以滑鼠右鍵按一下方案，然後選取 [新增]、[新增專案]。選取 [Web] 節點，然後選取 [ASP.NET Web 應用程式 ] 範本。將專案命名為「JAVAscriptClient」，然後按一下 [ 確定]。
選取 [空白 ] 範本，並將其餘選項保留為未選取狀態。選取 [建立專案]。
在套件管理員主控台中，選取 [ 預設專案 ] 下拉式清單中的「JAVAscriptClient」專案，然後執行下列命令：
```
Install-Package Microsoft.AspNet.SignalR.JS
```
此命令會安裝用戶端中所需的 SignalR 和 JQuery 程式庫。
以滑鼠右鍵按一下您的專案，然後選取 [ 新增]、[ 新增專案]。選取 [Web] 節點，然後選取 [HTML 頁面]。將頁面 命名Default.html。

以下列程式碼取代新 HTML 頁面的內容。確認此處的腳本參考符合專案 [腳本] 資料夾中的腳本。

<!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="http://localhost:8080/signalr/hubs"></script>
    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">
        $(function () {
        //Set the hubs URL for the connection
            $.connection.hub.url = "http://localhost:8080/signalr";
            
            // Declare a proxy to reference the hub.
            var chat = $.connection.myHub;
            
            // Create a function that the hub can call to broadcast messages.
            chat.client.addMessage = 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>:&nbsp;&nbsp;' + encodedMsg + '</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();
                });
            });
        });
    </script>
</body>
</html>

上述程式碼範例中醒目提示的下列程式碼 () 是除了將程式碼升級至 SignalR 第 2 版 Beta 版) 之外，您已對在 Getting Stared 教學課程 (中使用的用戶端新增。這行程式碼會明確設定伺服器上的 SignalR 基底連線 URL。

//Set the hubs URL for the connection
$.connection.hub.url = "http://localhost:8080/signalr";

以滑鼠右鍵按一下方案，然後選取 [設定啟始專案...]。選取 [ 多個啟始專案] 選項按鈕，並將這兩個專案的 [動作 ] 設定為 [ 啟動]。
以滑鼠右鍵按一下 [Default.html]，然後選取 [設定為起始頁]。
執行應用程式。伺服器和頁面將會啟動。您可能需要重載網頁 (，或在偵錯工具中選取 [ 繼續 ]，) 如果頁面在伺服器啟動之前載入。
在瀏覽器中，出現提示時提供使用者名稱。將頁面的 URL 複製到另一個瀏覽器索引標籤或視窗中，並提供不同的使用者名稱。如同使用者入門教學課程，您將能夠將訊息從一個瀏覽器窗格傳送到另一個瀏覽器窗格。

教學課程：SignalR 自我裝載

教學課程中使用的軟體版本

搭配本教學課程使用 Visual Studio 2012

問題和批註

概觀

建立伺服器

使用 JavaScript 用戶端存取伺服器

意見反應

意見反應

其他資源