教學課程：使用 SignalR 2 和 MVC 5 進行即時聊天

發行項
07/13/2023

本教學課程示範如何使用 ASP.NET SignalR 2 來建立即時聊天應用程式。您會將 SignalR 新增至 MVC 5 應用程式，並建立聊天檢視來傳送和顯示訊息。

在本教學課程中，您：

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

警告

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

必要條件

Visual Studio 2017，其中包含 ASP.NET 和 Web 部署工作負載。

設定專案

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

在 Visual Studio 中，建立以 .NET Framework 4.5 為目標的 C# ASP.NET 應用程式，將它命名為 SignalRChat，然後按一下 [確定]。
在 [新增 ASP.NET Web 應用程式 - SignalRMvcChat] 中，選取 [MVC ]，然後選取 [ 變更驗證]。
在 [變更驗證] 中，選取 [無驗證 ]，然後按一下 [ 確定]。
在 [新增 ASP.NET Web 應用程式 - SignalRMvcChat] 中，選取 [ 確定]。
在方案總管中，以滑鼠右鍵按一下專案，然後選取 [新增>專案]。
在[新增專案 - SignalRChat]中，選取[已安裝>的 Visual C#>Web>SignalR]，然後選取 [SignalR 中樞類別] (v2) 。
將類別命名為 ChatHub ，並將它新增至專案。

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

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

在方案總管中，以滑鼠右鍵按一下專案，然後選取 [新增>類別]。
將新類別命名為 Startup ，並將其新增至專案。

以下列程式碼取代 Startup.cs 類別檔案中的程式碼：

using Owin;
using Microsoft.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();
        }
    }
}

在方案總管中，選取[控制器>首頁][標籤.cs]。
將這個方法新增至 HomeController.cs。
```
public ActionResult Chat()
{
    return View();
}
```
此方法會傳回您在稍後步驟中建立的聊天檢視。
在方案總管中，以滑鼠右鍵按一下 [檢視>首頁]，然後選取 [新增>檢視]。
在 [新增檢視]中，將新的檢視命名為 [聊天] ，然後選取 [ 新增]。

以下列程式碼取代 Chat.cshtml 的內容：

@{
    ViewBag.Title = "Chat";
}
<h2>Chat</h2>
<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>
@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--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>
    <!--SignalR script to update the chat page and send messages.--> 
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.  
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + htmlEncode(name) 
                    + '</strong>: ' + htmlEncode(message) + '</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();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

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

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

重要

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

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

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

<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>

如果它們不相符，請更新 .cshtml 檔案。
從功能表列，選取 [檔案>全部儲存]。

執行範例

在工具列中，開啟 [腳本偵 錯]，然後選取播放按鈕以偵錯模式執行範例。
當瀏覽器開啟時，請輸入聊天身分識別的名稱。
從瀏覽器複製 URL，開啟其他兩個瀏覽器，然後將 URL 貼到網址列。
在每個瀏覽器中，輸入唯一的名稱。
現在，新增批註並選取 [ 傳送]。在其他瀏覽器中重複。批註會即時顯示。

注意

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

查看聊天應用程式如何在三個不同的瀏覽器中執行。當 Tom、Anand 和 Susan 傳送訊息時，所有瀏覽器都會即時更新：
在方案總管中，檢查執行中應用程式的[指令檔] 節點。有一個名為 Hub 的 腳本檔案，SignalR 程式庫會在執行時間產生。此檔案會管理 jQuery 腳本與伺服器端程式碼之間的通訊。

檢查程式碼

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

ChatHub.cs 中的 SignalR 中樞

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

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

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

在中樞上宣告公用方法，讓用戶端可以呼叫它們。
Microsoft.AspNet.SignalR.Hub.Clients使用動態屬性與連線至這個中樞的所有用戶端通訊。

在用戶端上呼叫函式 (，例如 addNewMessageToPage 函式) 來更新用戶端。

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        Clients.All.addNewMessageToPage(name, message);
    }
}

SignalR 和 jQuery Chat.cshtml

程式碼範例中的 Chat.cshtml 檢視檔案示範如何使用 SignalR jQuery 程式庫與 SignalR 中樞通訊。程式碼會執行許多重要工作。它會為中樞建立自動產生的 Proxy 參考、宣告函式，讓伺服器可以呼叫將內容推送至用戶端，並啟動將訊息傳送至中樞的連線。

var chat = $.connection.chatHub;

注意

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

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

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

伺服器上的中樞類別會呼叫此函式，以將內容更新推送至每個用戶端。函式的 htmlEncode 選擇性呼叫會顯示 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();
    });
});

注意

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

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

取得程式碼

下載已完成的專案

其他資源

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

後續步驟

在本教學課程中，您：

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

請前往下一篇文章，瞭解如何建立使用 ASP.NET SignalR 2 提供高頻率傳訊功能的 Web 應用程式。

具有高頻率傳訊的 Web 應用程式

教學課程：使用 SignalR 2 和 MVC 5 進行即時聊天

必要條件

設定專案

執行範例

檢查程式碼

ChatHub.cs 中的 SignalR 中樞

SignalR 和 jQuery Chat.cshtml

取得程式碼

其他資源

後續步驟

意見反應

意見反應

其他資源