Samouczek: rozmowa w czasie rzeczywistym z usługą SignalR 2

Artykuł
07/13/2023

W tym samouczku pokazano, jak za pomocą usługi SignalR utworzyć aplikację czatu w czasie rzeczywistym. Usługa SignalR jest dodana do pustej aplikacji internetowej ASP.NET i tworzy stronę HTML w celu wysyłania i wyświetlania komunikatów.

W tym samouczku zostały wykonane następujące czynności:

Konfigurowanie projektu
Uruchamianie aplikacji przykładowej
Analizowanie kodu

Ostrzeżenie

Ta dokumentacja nie jest przeznaczona dla najnowszej wersji usługi SignalR. Przyjrzyj się ASP.NET Core SignalR.

Wymagania wstępne

Program Visual Studio 2017 z pakietem roboczym Tworzenie aplikacji na platformie ASP.NET i aplikacji internetowych.

Konfigurowanie projektu

W tej sekcji pokazano, jak za pomocą programu Visual Studio 2017 i SignalR 2 utworzyć pustą aplikację internetową ASP.NET, dodać usługę SignalR i utworzyć aplikację do czatu.

W programie Visual Studio utwórz aplikację internetową ASP.NET.
W oknie Nowy projekt ASP.NET — SignalRChat pozostaw pole Puste i wybierz przycisk OK.
W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt i wybierz pozycję Dodaj>nowy element.
W obszarze Dodaj nowy element — SignalRChat wybierz pozycję Zainstalowane>visual C#>Web>SignalR , a następnie wybierz pozycję SignalR Hub Class (v2).
Nadaj klasie nazwę ChatHub i dodaj ją do projektu.

Ten krok tworzy plik klasy ChatHub.cs i dodaje zestaw plików skryptów i odwołań do zestawów, które obsługują usługę SignalR do projektu.

Zastąp kod w nowym pliku klasy ChatHub.cs tym kodem:

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

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt i wybierz pozycję Dodaj>nowy element.
W obszarze Dodaj nowy element — SignalRChat wybierz pozycję Zainstalowano>program Visual C#>Web , a następnie wybierz pozycję Klasa uruchamiania OWIN.
Nadaj klasie nazwę Startup i dodaj ją do projektu.

Zastąp domyślny kod w klasie Startup tym kodem:

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

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt i wybierz pozycję Dodaj>stronę HTML.
Nazwij nowy indeks strony i wybierz przycisk OK.
W Eksplorator rozwiązań kliknij prawym przyciskiem myszy utworzoną stronę HTML i wybierz pozycję Ustaw jako stronę początkową.

Zastąp domyślny kod na stronie HTML tym kodem:

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

W Eksplorator rozwiązań rozwiń węzeł Skrypty.

Biblioteki skryptów dla bibliotek jQuery i SignalR są widoczne w projekcie.

Ważne

Menedżer pakietów mógł zainstalować późniejszą wersję skryptów usługi SignalR.

Sprawdź, czy odwołania skryptu w bloku kodu odpowiadają wersjom plików skryptów w projekcie.

Odwołania do skryptu z oryginalnego bloku kodu:

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

Jeśli nie są one zgodne, zaktualizuj plik .html .
Na pasku menu wybierz pozycję Plik>Zapisz wszystko.

Uruchamianie przykładu

Na pasku narzędzi włącz pozycję Debugowanie skryptu , a następnie wybierz przycisk odtwarzania, aby uruchomić przykład w trybie debugowania.
Po otwarciu przeglądarki wprowadź nazwę tożsamości czatu.
Skopiuj adres URL z przeglądarki, otwórz dwie inne przeglądarki i wklej adresy URL do pasków adresów.
W każdej przeglądarce wprowadź unikatową nazwę.
Teraz dodaj komentarz i wybierz pozycję Wyślij. Powtórz to w innych przeglądarkach. Komentarze są wyświetlane w czasie rzeczywistym.

Uwaga

Ta prosta aplikacja do czatu nie zachowuje kontekstu dyskusji na serwerze. Centrum emituje komentarze do wszystkich bieżących użytkowników. Użytkownicy, którzy dołączą do czatu, zobaczą później komunikaty dodane od momentu dołączenia.

Zobacz, jak aplikacja czatu działa w trzech różnych przeglądarkach. Kiedy Tom, Anand i Susan wysyłają wiadomości, wszystkie przeglądarki są aktualizowane w czasie rzeczywistym:
W Eksplorator rozwiązań sprawdź węzeł Dokumenty skryptów dla uruchomionej aplikacji. Istnieje plik skryptu o nazwie hubs , który biblioteka SignalR generuje w czasie wykonywania. Ten plik zarządza komunikacją między skryptem jQuery i kodem po stronie serwera.

Badanie kodu

Aplikacja SignalRChat demonstruje dwa podstawowe zadania programistyczne usługi SignalR. Pokazano w nim, jak utworzyć centrum. Serwer używa tego centrum jako głównego obiektu koordynacji. Centrum używa biblioteki SignalR jQuery do wysyłania i odbierania komunikatów.

Usługa SignalR Hubs w pliku ChatHub.cs

W powyższym ChatHub przykładzie kodu klasa pochodzi z Microsoft.AspNet.SignalR.Hub klasy . Wyprowadzanie z Hub klasy jest przydatnym sposobem kompilowania aplikacji SignalR. Metody publiczne można utworzyć w klasie centrum, a następnie użyć tych metod, wywołując je ze skryptów na stronie internetowej.

W kodzie czatu klienci nazywają metodę ChatHub.Send , aby wysłać nową wiadomość. Centrum następnie wysyła komunikat do wszystkich klientów, wywołując polecenie Clients.All.broadcastMessage.

Metoda Send demonstruje kilka pojęć związanych z piastą:

Zadeklaruj metody publiczne w centrum, aby klienci mogli je wywoływać.
Użyj właściwości dynamicznej Microsoft.AspNet.SignalR.Hub.Clients , aby komunikować się ze wszystkimi klientami połączonymi z tym koncentratorem.

Wywołaj funkcję na kliencie (na przykład broadcastMessage funkcję), aby zaktualizować klientów.

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

SignalR i jQuery w index.html

Strona index.html w przykładzie kodu pokazuje, jak używać biblioteki SignalR jQuery do komunikowania się z koncentratorem SignalR. Kod wykonuje wiele ważnych zadań. Deklaruje serwer proxy w celu odwołania się do centrum, deklaruje funkcję, którą serwer może wywołać w celu wypychania zawartości do klientów i uruchamia połączenie w celu wysyłania komunikatów do centrum.

var chat = $.connection.chatHub;

Uwaga

W języku JavaScript odwołanie do klasy serwera i jego składowych musi być camelCase. Przykładowy kod odwołuje się do klasy ChatHub języka C# w języku JavaScript jako chatHub.

W tym bloku kodu utworzysz funkcję wywołania zwrotnego w skrycie.

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

Klasa koncentratora na serwerze wywołuje tę funkcję w celu wypychania aktualizacji zawartości do każdego klienta. Dwa wiersze kodujące zawartość HTML przed jego wyświetleniem są opcjonalne i pokazują dobry sposób zapobiegania iniekcji skryptu.

Ten kod otwiera połączenie z koncentratorem.

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

Uwaga

Takie podejście zapewnia, że kod ustanawia połączenie przed wykonaniem procedury obsługi zdarzeń.

Kod uruchamia połączenie, a następnie przekazuje ją do obsługi zdarzenia kliknięcia na przycisku Wyślij na stronie HTML.

Uzyskiwanie kodu

Pobieranie ukończonego projektu

Dodatkowe zasoby

Aby uzyskać więcej informacji na temat usługi SignalR, zobacz następujące zasoby:

Następne kroki

W tym samouczku wykonasz następujące instrukcje:

Konfigurowanie projektu
Uruchom przykład
Zbadano kod

Przejdź do następnego artykułu, aby dowiedzieć się, jak używać usług SignalR i MVC 5.

SignalR 2 i MVC 5

Samouczek: rozmowa w czasie rzeczywistym z usługą SignalR 2

Wymagania wstępne

Konfigurowanie projektu

Uruchamianie przykładu

Badanie kodu

Usługa SignalR Hubs w pliku ChatHub.cs

SignalR i jQuery w index.html

Uzyskiwanie kodu

Dodatkowe zasoby

Następne kroki

Opinia

Opinia

Dodatkowe zasoby