Samouczek: rozmowa w czasie rzeczywistym z sygnałami 2 i MVC 5

W tym samouczku pokazano, jak za pomocą ASP.NET sygnalizujący 2 utworzyć aplikację czatu w czasie rzeczywistym. Dodajesz sygnalizację do aplikacji MVC 5 i utworzysz widok rozmowy w celu wysyłania i wyświetlania komunikatów.

W tym samouczku zostaną wykonane następujące czynności:

  • Konfigurowanie projektu
  • Uruchamianie aplikacji przykładowej
  • Analizowanie kodu

Warning

Ta dokumentacja nie jest najnowsza dla najnowszej wersji usługi sygnalizującej. Zapoznaj się z tematem ASP.NET Core sygnalizujący.

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 sygnalizacji 2 utworzyć pustą aplikację ASP.NET MVC 5, dodać bibliotekę sygnałów i utworzyć aplikację czatu.

  1. W programie Visual Studio Utwórz aplikację C# ASP.NET, która jest przeznaczona dla .NET Framework 4,5, nadaj jej nazwę SignalRChat, a następnie kliknij przycisk OK.

    Tworzenie sieci Web

  2. W obszarze Nowa aplikacja sieci Web ASP.NET — SignalRMvcChatwybierz pozycję MVC , a następnie wybierz pozycję Zmień uwierzytelnianie.

  3. W obszarze Zmień uwierzytelnianiewybierz pozycję bez uwierzytelniania i kliknij przycisk OK.

    Wybierz bez uwierzytelniania

  4. W obszarze Nowa aplikacja sieci Web ASP.NET — SignalRMvcChatwybierz przycisk OK.

  5. W Eksplorator rozwiązańkliknij prawym przyciskiem myszy projekt, a następnie wybierz pozycję Dodaj > nowy element.

  6. W obszarze Dodaj nowy element — SignalRChatwybierz pozycję zainstalowane > Visual C# > sieci Web > sygnalizujący , a następnie wybierz pozycję Klasa centrum sygnałów (v2) .

  7. Nadaj klasie nazwę ChatHub i Dodaj ją do projektu.

    Ten krok tworzy plik klasy ChatHub.cs i dodaje zestaw plików skryptów oraz odwołania do zestawów, które obsługują sygnalizujący do projektu.

  8. 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 addNewMessageToPage method to update clients.
                Clients.All.addNewMessageToPage(name, message);
            }
        }
    }
    
  9. W Eksplorator rozwiązańkliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj klasę > .

  10. Nazwij nową klasę uruchamiania i Dodaj ją do projektu.

  11. Zastąp kod w pliku klasy Startup.cs tym kodem:

    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();
            }
        }
    }
    
  12. W Eksplorator rozwiązańwybierz pozycję Kontrolery > HomeController.cs.

  13. Dodaj tę metodę do HomeController.cs.

    public ActionResult Chat()
    {
        return View();
    }
    

    Ta metoda zwraca widok rozmowy , który został utworzony w późniejszym kroku.

  14. W Eksplorator rozwiązańkliknij prawym przyciskiem myszy pozycję widoki > Strona główna, a następnie wybierz polecenie Dodaj Widok > .

  15. W polu Dodaj widokNadaj nazwę nowemu widokowi rozmowy i wybierz pozycję Dodaj.

  16. Zastąp zawartość czatu. cshtml tym kodem:

    @{
        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>
    }
    
  17. W Eksplorator rozwiązańrozwiń węzeł skrypty.

    Biblioteki skryptów dla jQuery i sygnalizujących są widoczne w projekcie.

    Important

    Menedżer pakietów mógł zainstalować nowszą wersję skryptów sygnalizującego.

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

    Odwołania do skryptu z oryginalnego bloku kodu:

    <!--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>
    
  19. Jeśli nie są zgodne, zaktualizuj plik . cshtml .

  20. Na pasku menu wybierz pozycję plik > Zapisz wszystko.

Uruchamianie przykładu

  1. Na pasku narzędzi Włącz debugowanie skryptów , a następnie wybierz przycisk Odtwórz, aby uruchomić przykład w trybie debugowania.

    Wprowadź nazwę użytkownika

  2. Po otwarciu przeglądarki wprowadź nazwę swojej tożsamości rozmowy.

  3. Skopiuj adres URL z przeglądarki, Otwórz dwie inne przeglądarki i wklej adresy URL do pasków adresów.

  4. W każdej przeglądarce wprowadź unikatową nazwę.

  5. Teraz Dodaj komentarz i wybierz pozycję Wyślij. Powtórz te czynności w innych przeglądarkach. Komentarze pojawiają się w czasie rzeczywistym.

    Note

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

    Zobacz, jak działa aplikacja czatu w trzech różnych przeglądarkach. Po wysłaniu komunikatów Anand i Susan wszystkie przeglądarki są aktualizowane w czasie rzeczywistym:

    Wszystkie trzy przeglądarki wyświetlają tę samą historię rozmowy

  6. W Eksplorator rozwiązańSprawdź, czy węzeł dokumenty skryptu dla uruchomionej aplikacji. Istnieje plik skryptu o nazwie Hubs , który jest generowany przez bibliotekę sygnałów w czasie wykonywania. Ten plik zarządza komunikacją między skryptami jQuery i kodem po stronie serwera.

    wygenerowany automatycznie skrypt centrów w węźle dokumenty skryptu

Sprawdzanie kodu

Aplikacja rozmowy sygnalizującej pokazuje dwa podstawowe zadania programistyczne sygnalizujące. Pokazano, jak utworzyć centrum. Serwer używa tego centrum jako głównego obiektu koordynacji. Do wysyłania i odbierania wiadomości centrum jest wykorzystywana Biblioteka sygnałów sygnalizujących.

Centra sygnałów w ChatHub.cs

W przykładzie kodu Klasa ChatHub dziedziczy z klasy Microsoft.AspNet.SignalR.Hub. Wyprowadzanie z klasy Hub jest użytecznym sposobem tworzenia aplikacji sygnalizującej. Można tworzyć metody publiczne w klasie centrów, a następnie uzyskiwać dostęp do tych metod, wywołując je ze skryptów na stronie sieci Web.

W kodzie rozmowy klienci wywołują metodę ChatHub.Send w celu wysłania nowej wiadomości. Koncentrator z kolei wysyła komunikat do wszystkich klientów, wywołując Clients.All.addNewMessageToPage.

Metoda Send ilustruje kilka pojęć centrum:

  • 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 podłączonymi do tego centrum.

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

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

Sygnalizujący i jQuery Chat. cshtml

Plik widoku Chat. cshtml w przykładowym kodzie pokazuje, w jaki sposób używać biblioteki sygnalizującej jQuery do komunikowania się z centrum sygnałów. Kod wykonuje wiele ważnych zadań. Tworzy odwołanie do automatycznie generowanego serwera proxy dla centrum, deklaruje funkcję, którą serwer może wywoływać do wypychania zawartości do klientów i uruchamia połączenie w celu wysyłania komunikatów do centrum.

var chat = $.connection.chatHub;

Note

W języku JavaScript odwołanie do klasy serwera i jej członków jest w camelCase. Przykładowy kod odwołuje się C# do klasy ChatHub w języku JavaScript jako chatHub.

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

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

Klasa centrum na serwerze wywołuje tę funkcję, aby wypchnąć aktualizacje zawartości do każdego klienta. Opcjonalne wywołanie funkcji htmlEncode pokazuje sposób kodowania zawartości wiadomości w formacie HTML przed wyświetleniem jej na stronie. Jest to sposób, aby zapobiec iniekcji skryptu.

Ten kod otwiera połączenie z centrum.

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

Note

To podejście zapewnia, że połączenie zostanie nawiązane przed wykonaniem procedury obsługi zdarzeń.

Kod uruchamia połączenie, a następnie przekazuje go do funkcji, aby obsłużyć zdarzenie kliknięcia na przycisku Wyślij na stronie rozmowy.

Uzyskiwanie kodu

Pobierz ukończony projekt

Dodatkowe zasoby

Aby uzyskać więcej informacji o sygnalizacji, zobacz następujące zasoby:

Następne kroki

W tym samouczku zostaną wykonane następujące czynności:

  • Konfigurowanie projektu
  • Uruchomiono przykład
  • Zbadano kod

Przejdź do następnego artykułu, aby dowiedzieć się, jak utworzyć aplikację sieci Web, która używa ASP.NET sygnalizującego 2, aby zapewnić funkcję obsługi komunikatów o wysokiej częstotliwości.