Kurz: Chat v reálném čase s využitím SignalR 2 a MVC 5

Článek
07/13/2023

V tomto kurzu se dozvíte, jak pomocí ASP.NET SignalR 2 vytvořit chatovací aplikaci v reálném čase. Službu SignalR přidáte do aplikace MVC 5 a vytvoříte zobrazení chatu pro odesílání a zobrazování zpráv.

V tomto kurzu jste:

Nastavení projektu
Spuštění ukázky
Kontrola kódu

Upozornění

Tato dokumentace není určená pro nejnovější verzi služby SignalR. Podívejte se na ASP.NET Core SignalR.

Požadavky

Sada Visual Studio 2017 se sadou funkcí Vývoj pro ASP.NET a web.

Nastavení projektu

Tato část ukazuje, jak pomocí sady Visual Studio 2017 a SignalR 2 vytvořit prázdnou aplikaci ASP.NET MVC 5, přidat knihovnu SignalR a vytvořit chatovací aplikaci.

V sadě Visual Studio vytvořte aplikaci ASP.NET jazyka C#, která cílí na rozhraní .NET Framework 4.5, pojmenujte ji SignalRChat a klikněte na OK.
V části Nová webová aplikace ASP.NET – SignalRMvcChat vyberte MVC a pak vyberte Změnit ověřování.
V části Změnit ověřování vyberte Bez ověřování a klikněte na OK.
V části Nová webová aplikace ASP.NET – SignalRMvcChat vyberte OK.
V Průzkumník řešení klikněte pravým tlačítkem na projekt a vyberte Přidat>novou položku.
V části Přidat novou položku – SignalRChat vyberte Installed>Visual C#>Web>SignalR a pak vyberte SignalR Hub Class (v2).
Pojmenujte třídu ChatHub a přidejte ji do projektu.

Tento krok vytvoří soubor třídy ChatHub.cs a přidá do projektu sadu souborů skriptů a odkazů na sestavení, které podporují SignalR.

Nahraďte kód v novém souboru třídy ChatHub.cs tímto kódem:

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);
        }
    }
}

V Průzkumník řešení klikněte pravým tlačítkem na projekt a vyberte Přidat>třídu.
Pojmenujte novou třídu Startup a přidejte ji do projektu.

Nahraďte kód v souboru třídy Startup.cs tímto kódem:

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

V Průzkumník řešení vyberte Controllers>HomeController.cs.
Přidejte tuto metodu do souboru HomeController.cs.
```
public ActionResult Chat()
{
    return View();
}
```
Tato metoda vrátí zobrazení Chat , které vytvoříte v pozdějším kroku.
V Průzkumník řešení klikněte pravým tlačítkem na Domovská stránka zobrazení> a vyberte Přidat>zobrazení.
V části Přidat zobrazení pojmenujte nové zobrazení Chat a vyberte Přidat.

Obsah souboru Chat.cshtml nahraďte tímto kódem:

@{
    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>
}

V Průzkumník řešení rozbalte Položku Skripty.

Knihovny skriptů pro jQuery a SignalR jsou viditelné v projektu.

Důležité

Správce balíčků možná nainstaloval novější verzi skriptů SignalR.

Zkontrolujte, jestli odkazy na skripty v bloku kódu odpovídají verzím souborů skriptu v projektu.

Odkazy na skripty z původního bloku kódu:

<!--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>

Pokud se neshodují, aktualizujte soubor .cshtml .
V řádku nabídek vyberte Soubor>Uložit vše.

Spuštění ukázky

Na panelu nástrojů zapněte Ladění skriptů a pak výběrem tlačítka Přehrát spusťte ukázku v režimu ladění.
Po otevření prohlížeče zadejte název vaší identity chatu.
Zkopírujte adresu URL z prohlížeče, otevřete dva další prohlížeče a vložte adresy URL do adresního řádku.
V každém prohlížeči zadejte jedinečný název.
Teď přidejte komentář a vyberte Odeslat. V ostatních prohlížečích to opakujte. Komentáře se zobrazují v reálném čase.

Poznámka

Tato jednoduchá chatovací aplikace neudržuje kontext diskuze na serveru. Centrum vysílá komentáře všem aktuálním uživatelům. Uživatelům, kteří se k chatu připojí později, uvidí zprávy přidané od okamžiku, kdy se připojí.

Podívejte se, jak chatovací aplikace běží ve třech různých prohlížečích. Když Tom, Anand a Susan posílají zprávy, všechny prohlížeče se aktualizují v reálném čase:
V Průzkumník řešení zkontrolujte uzel Dokumenty skriptu pro spuštěnou aplikaci. Existuje soubor skriptu s názvem hubs , který knihovna SignalR generuje za běhu. Tento soubor spravuje komunikaci mezi skriptem jQuery a kódem na straně serveru.

Prozkoumání kódu

Chatovací aplikace SignalR ukazuje dvě základní úlohy vývoje služby SignalR. Ukáže vám, jak vytvořit centrum. Server používá toto centrum jako hlavní koordinační objekt. Centrum používá knihovnu SignalR jQuery k odesílání a přijímání zpráv.

SignalR Hubs v ChatHub.cs

Ve vzorovém kódu je ChatHub třída odvozená z Microsoft.AspNet.SignalR.Hub třídy . Odvození z Hub třídy je užitečný způsob, jak sestavit aplikaci SignalR. Ve třídě centra můžete vytvořit veřejné metody a pak k těmto metodám přistupovat voláním ze skriptů na webové stránce.

V kódu chatu klienti volají metodu , ChatHub.Send aby odeslali novou zprávu. Centrum pak odešle zprávu všem klientům voláním Clients.All.addNewMessageToPage.

Metoda Send ukazuje několik konceptů centra:

Deklarujte veřejné metody v centru, aby je klienti mohli volat.
Dynamická Microsoft.AspNet.SignalR.Hub.Clients vlastnost slouží ke komunikaci se všemi klienty připojenými k tomuto centru.

Voláním funkce v klientovi (například addNewMessageToPage funkce) aktualizujte klienty.

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

SignalR a jQuery Chat.cshtml

Soubor zobrazení Chat.cshtml v ukázce kódu ukazuje, jak pomocí knihovny SignalR jQuery komunikovat s centrem SignalR. Kód provádí mnoho důležitých úloh. Vytvoří odkaz na automaticky vygenerovaný proxy server pro centrum, deklaruje funkci, kterou server může volat za účelem nabízení obsahu klientům, a spustí připojení k odesílání zpráv do centra.

var chat = $.connection.chatHub;

Poznámka

V JavaScriptu je odkaz na serverovou třídu a její členy v camelCase. Ukázka kódu odkazuje na třídu jazyka C# ChatHub v JavaScriptu jako chatHub.

V tomto bloku kódu vytvoříte ve skriptu funkci zpětného volání.

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

Třída centra na serveru volá tuto funkci k nabízení aktualizací obsahu do každého klienta. Volitelné volání htmlEncode funkce ukazuje způsob, jak obsah zprávy před zobrazením na stránce zakódovat ve formátu HTML. Je to způsob, jak zabránit injektáži skriptu.

Tento kód otevře připojení k centru.

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

Poznámka

Tento přístup zajistí navázání připojení před spuštěním obslužné rutiny události.

Kód spustí připojení a pak mu předá funkci, která zpracuje událost click na tlačítku Odeslat na stránce Chat.

Získání kódu

Stažení dokončeného projektu

Další materiály

Další informace o službě SignalR najdete v následujících zdrojích informací:

Další kroky

V tomto kurzu jste:

Nastavení projektu
Spuštění ukázky
Prozkoumání kódu

V dalším článku se dozvíte, jak vytvořit webovou aplikaci, která používá ASP.NET SignalR 2 k poskytování funkcí vysokofrekvenčního zasílání zpráv.

Webová aplikace s vysokofrekvenčním zasíláním zpráv

Sdílet prostřednictvím

Kurz: Chat v reálném čase s využitím SignalR 2 a MVC 5

Požadavky

Nastavení projektu

Spuštění ukázky

Prozkoumání kódu

SignalR Hubs v ChatHub.cs

SignalR a jQuery Chat.cshtml

Získání kódu

Další materiály

Další kroky

Váš názor

Další materiály