教學課程：使用 SignalR 2 即時聊天

  • 發行項

本教學課程說明如何使用 SignalR 建立即時聊天應用程式。 您會將 SignalR 新增至空白 ASP.NET Web 應用程式，並建立 HTML 頁面來傳送和顯示訊息。

在本教學課程中，您：

  • 設定專案
  • 執行範例
  • 檢查程式碼

警告

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

必要條件

設定專案

本節說明如何使用 Visual Studio 2017 和 SignalR 2 來建立空的 ASP.NET Web 應用程式、新增 SignalR，以及建立聊天應用程式。

  1. 在 Visual Studio 中，建立 ASP.NET Web 應用程式。

    建立 Web

  2. 在 [ 新增 ASP.NET 專案 - SignalRChat ] 視窗中，保留 [ 空白 ] 並選取 [ 確定]。

  3. 在[方案總管] 中，以滑鼠右鍵按一下專案，然後選取 [新增>專案]。

  4. 在[新增專案 - SignalRChat] 中，選取[已安裝>的 Visual C#>Web>SignalR]，然後選取[SignalR 中樞類別] (v2) 。

  5. 將類別命名為 ChatHub ，並將它新增至專案。

    此步驟會建立 ChatHub.cs 類別檔案，並將一組支援 SignalR 的腳本檔案和元件參考新增至專案。

  6. 以下列程式碼取代新 ChatHub.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 broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

  7. 在[方案總管] 中，以滑鼠右鍵按一下專案，然後選取 [新增>專案]。

  8. 在[新增專案 - SignalRChat] 中，選取[已安裝>的 Visual C#>Web]，然後選取[OWIN 啟動類別]。

  9. 將類別命名為 Startup ，並將它新增至專案。

  10. 以下列程式碼取代 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();
        }
    }
}

  11. 在[方案總管] 中，以滑鼠右鍵按一下專案，然後選取 [新增>HTML 頁面]。

  12. 將新頁面 索引 命名為 ，然後選取 [ 確定]。

  13. 在[方案總管] 中，以滑鼠右鍵按一下您所建立的 HTML 頁面，然後選取 [設定為起始頁]。

  14. 以下列程式碼取代 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-3.1.1.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.1.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>:&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>

  15. 在[方案總管] 中，展開 [腳本]。

    jQuery 和 SignalR 的腳本程式庫會顯示在專案中。

    重要

    套件管理員可能已安裝較新版本的 SignalR 腳本。

  16. 檢查程式碼區塊中的腳本參考是否對應至專案中腳本檔案的版本。

    來自原始程式碼區塊的腳本參考：

    <!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-3.1.1.min.js" ></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.2.1.min.js"></script>

  17. 如果它們不相符，請更新 .html 檔案。

  18. 從功能表列中，選取 [檔案>全部儲存]。

執行範例

  1. 在工具列中，開啟 [腳本偵 錯]，然後選取 [播放] 按鈕，以在 [偵錯] 模式中執行範例。

    輸入使用者名稱

  2. 當瀏覽器開啟時，請輸入聊天身分識別的名稱。

  3. 從瀏覽器複製 URL、開啟其他兩個瀏覽器，然後將 URL 貼到網址列。

  4. 在每個瀏覽器中，輸入唯一的名稱。

  5. 現在，新增批註，然後選取 [ 傳送]。 在其他瀏覽器中重複該內容。 批註會即時顯示。

    注意

    這個簡單的聊天應用程式不會維護伺服器上的討論內容。 中樞會將批註廣播給所有目前的使用者。 稍後加入聊天的使用者會看到從他們加入時新增的訊息。

    查看聊天應用程式如何在三個不同的瀏覽器中執行。 當 Tom、Anand 和 Susan 傳送訊息時，所有瀏覽器都會即時更新：

    這三個瀏覽器都會顯示相同的聊天記錄

  6. 在方案總管中，檢查執行中應用程式的[指令檔] 節點。 有一個名為 hubs 的 腳本檔案，SignalR 程式庫會在執行時間產生。 此檔案會管理 jQuery 腳本與伺服器端程式碼之間的通訊。

    [指令檔] 節點中的自動產生中樞腳本

檢查程式碼

SignalRChat 應用程式示範兩個基本的 SignalR 開發工作。 它示範如何建立中樞。 伺服器會使用該中樞作為主要協調物件。 中樞會使用 SignalR jQuery 程式庫來傳送和接收訊息。

ChatHub.cs 中的 SignalR Hubs

在上述程式碼範例中，類別 ChatHub 衍生自 Microsoft.AspNet.SignalR.Hub 類別。 衍生自 Hub 類別是建置 SignalR 應用程式的實用方式。 您可以在中樞類別上建立公用方法，然後從網頁中的腳本呼叫它們，以使用這些方法。

在聊天程式碼中，用戶端會呼叫 ChatHub.Send 方法來傳送新的訊息。 然後，中樞會藉由呼叫 Clients.All.broadcastMessage ，將訊息傳送至所有用戶端。

方法 Send 示範數個中樞概念：

  • 在中樞上宣告公用方法，讓用戶端可以呼叫它們。

  • Microsoft.AspNet.SignalR.Hub.Clients使用動態屬性與連線至此中樞的所有用戶端通訊。

  • 呼叫用戶端上的函式 (，例如 broadcastMessage 函式) 來更新用戶端。

    public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.broadcastMessage(name, message);
    }
}

index.html中的 SignalR 和 jQuery

程式碼範例中的 [index.html ] 頁面示範如何使用 SignalR jQuery 程式庫與 SignalR 中樞通訊。 程式碼會執行許多重要工作。 它會宣告 Proxy 以參考中樞、宣告伺服器可以呼叫以將內容推送至用戶端的函式，並啟動連線以將訊息傳送至中樞。

var chat = $.connection.chatHub;

注意

在 JavaScript 中，伺服器類別及其成員的參考必須是 camelCase。 程式碼範例會將 JavaScript 中的 C# ChatHub 類別參考為 chatHub 。

在此程式碼區塊中，您會在腳本中建立回呼函式。

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>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    };

伺服器上的中樞類別會呼叫此函式，以將內容更新推送至每個用戶端。 在顯示內容之前，HTML 編碼內容的兩行是選擇性的，並顯示防止腳本插入的好方法。

此程式碼會開啟與中樞的連線。

$.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();
        });
    });

注意

此方法可確保程式碼在執行事件處理常式之前建立連接。

程式碼會啟動連線，然後傳遞函式來處理 HTML 頁面中 [ 傳送 ] 按鈕上的 Click 事件。

取得程式碼

下載已完成的專案

其他資源

如需 SignalR 的詳細資訊，請參閱下列資源：

後續步驟

在本教學課程中，您會：

  • 設定專案
  • 執行範例
  • 檢查程式碼

請前進到下一篇文章，以瞭解如何使用 SignalR 和 MVC 5。

SignalR 2 和 MVC 5