Kurz: Chat v reálném čase pomocí SignalR 2

Článek
07/13/2023

V tomto kurzu se dozvíte, jak pomocí SignalR vytvořit chatovací aplikaci v reálném čase. Přidáte SignalR do prázdné ASP.NET webové aplikace a vytvoříte stránku HTML 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 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 ASP.NET webovou aplikaci, přidat SignalR a vytvořit chatovací aplikaci.

V sadě Visual Studio vytvořte webovou aplikaci ASP.NET.
V okně Nový projekt ASP.NET – SignalRChat nechejte vybranou možnost Prázdné a 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 broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

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 ( Nainstalovaný>Visual C#>Web ) a pak vyberte OWIN Startup Class (Třída spouštění OWIN).
Pojmenujte třídu Startup a přidejte ji do projektu.

Nahraďte výchozí kód ve třídě Startup tímto kódem:

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

V Průzkumník řešení klikněte pravým tlačítkem na projekt a vyberte Přidat>stránku HTML.
Pojmenujte nový index stránky a vyberte OK.
V Průzkumník řešení klikněte pravým tlačítkem na stránku HTML, kterou jste vytvořili, a vyberte Nastavit jako úvodní stránku.

Nahraďte výchozí kód na stránce HTML tímto kódem:

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

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ů mohl mít nainstalovanou novější verzi skriptů SignalR.

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

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

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

Pokud se neshodují, aktualizujte soubor.html .
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. Opakujte to i v ostatních prohlížečích. 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

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

SignalR Hubs v ChatHub.cs

Ve výše uvedeném příkladu kódu je ChatHub třída odvozena od Microsoft.AspNet.SignalR.Hub třídy . Odvození z Hub třídy je užitečný způsob, jak vytvořit aplikaci SignalR. Ve své třídě centra můžete vytvořit veřejné metody a pak je použít tak, že je zavoláte ze skriptů na webové stránce.

V kódu chatu klienti volají metodu ChatHub.Send pro odeslání nové zprávy. Centrum pak odešle zprávu všem klientům voláním Clients.All.broadcastMessage.

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 (jako je broadcastMessage funkce) aktualizujte klienty.

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

SignalR a jQuery v index.html

Stránka index.html v ukázce kódu ukazuje, jak používat knihovnu SignalR jQuery ke komunikaci s centrem SignalR. Kód provádí mnoho důležitých úkolů. Deklaruje proxy server, který odkazuje na centrum, deklaruje funkci, kterou server může volat za účelem nabízení obsahu klientům, a zahájí připojení k odesílání zpráv do centra.

var chat = $.connection.chatHub;

Poznámka

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

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

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

Třída centra na serveru volá tuto funkci, aby do každého klienta odeslala aktualizace obsahu. Dva řádky, které html kódují obsah před jeho zobrazením, jsou volitelné a zobrazují dobrý 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 zajišťuje, že kód naváže připojení před spuštěním obslužné rutiny události.

Kód spustí připojení a pak mu předá funkci pro zpracování události click na tlačítku Odeslat na stránce HTML.

Získání kódu

Stáhnout dokončený projekt

Další materiály

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

Další kroky

V tomto kurzu:

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

V dalším článku se dozvíte, jak používat SignalR a MVC 5.

SignalR 2 a MVC 5

Sdílet prostřednictvím

Kurz: Chat v reálném čase pomocí SignalR 2

Požadavky

Nastavení projektu

Spuštění ukázky

Prozkoumání kódu

SignalR Hubs v ChatHub.cs

SignalR a jQuery v index.html

Získání kódu

Další materiály

Další kroky

Váš názor

Váš názor

Další materiály