Samouczek: rozmowa w czasie rzeczywistym z usługami SignalR 2 i MVC 5

W tym samouczku pokazano, jak używać usługi ASP.NET SignalR 2 do tworzenia aplikacji do czatu w czasie rzeczywistym. Dodasz usługę SignalR do aplikacji MVC 5 i utworzysz widok czatu do wysyłania i wyświetlania komunikatów.

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

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ą programów Visual Studio 2017 i SignalR 2 utworzyć pustą aplikację MVC 5 ASP.NET, dodać bibliotekę SignalR i utworzyć aplikację do czatu.

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

   

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

3. W obszarze Zmień uwierzytelnianie wybierz pozycję Brak uwierzytelniania i kliknij przycisk OK.

   

4. W obszarze Nowa aplikacja internetowa ASP.NET — SignalRMvcChat wybierz przycisk OK.

5. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj>nowy element.

6. W obszarze Dodawanie nowego elementu — SignalRChat wybierz pozycję Zainstalowano visual>C#>Web>SignalR , a następnie wybierz pozycję Klasa centrum SignalR (wersja 2)..

7. 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 w projekcie.

8. Zastąp kod w nowym pliku klasy ChatHub.cs następującym 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. Nadaj nowej klasie nazwę Startup i dodaj ją do projektu.

11. Zastąp kod w pliku klasy Startup.cs następującym 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 pliku HomeController.cs.

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

    Ta metoda zwraca widok czatu utworzony w późniejszym kroku.

14. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy pozycję Widoki>główne, a następnie wybierz polecenie Dodaj>widok.

15. W obszarze Dodaj widok nazwij nowy widok Czat i wybierz pozycję Dodaj.

16. Zastąp zawartość pliku Chat.cshtml następującym 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 bibliotek jQuery i SignalR są widoczne w projekcie.

    Ważne

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

18. Sprawdź, czy odwołania do skryptu w bloku kodu odpowiadają wersjom 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ą one zgodne, zaktualizuj plik cshtml .

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

Uruchamianie przykładu

1. Na pasku narzędzi włącz pozycję Debugowanie skryptu , a następnie wybierz przycisk odtwarzania, aby uruchomić przykład w trybie debugowania.

   

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

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 to w innych przeglądarkach. Komentarze są wyświetlane w czasie rzeczywistym.

   Uwaga

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

   Zobacz, jak działa aplikacja czatu w trzech różnych przeglądarkach. Kiedy Tom, Anand i Susan wysyłają wiadomości, wszystkie przeglądarki są aktualizowane w czasie rzeczywistym:

   

6. 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.

   

Sprawdzanie kodu

Aplikacja do czatu usługi SignalR 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 przykładzie ChatHub kodu klasa pochodzi z Microsoft.AspNet.SignalR.Hub klasy . Wyprowadzanie z Hub klasy jest przydatnym sposobem tworzenia aplikacji SignalR. Metody publiczne można tworzyć w klasie centrum, a następnie uzyskiwać do nich dostęp, wywołując je ze skryptów na stronie internetowej.

W kodzie czatu klienci wywołają metodę ChatHub.Send , aby wysłać nową wiadomość. Koncentrator z kolei wysyła komunikat do wszystkich klientów przez wywołanie metody Clients.All.addNewMessageToPage.

Metoda Send demonstruje kilka koncepcji 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 połączonymi z tym koncentratorem.

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

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

SignalR i jQuery Chat.cshtml

Plik widoku Chat.cshtml w przykładzie kodu pokazuje, jak używać biblioteki SignalR jQuery do komunikowania się z centrum SignalR. Kod wykonuje wiele ważnych zadań. Tworzy odwołanie do automatycznie wygenerowanego serwera proxy dla centrum, deklaruje funkcję, którą serwer może wywołać w celu wypychania zawartości do klientów, a następnie uruchamia połączenie w celu wysyłania komunikatów do centrum.

var chat = $.connection.chatHub;

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

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 wypychać aktualizacje zawartości do każdego klienta. Opcjonalne wywołanie htmlEncode funkcji pokazuje sposób kodowania zawartości komunikatu HTML przed wyświetleniem jej na stronie. Jest to sposób zapobiegania wstrzyknięciu 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();
    });
});

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

Uzyskiwanie kodu

Pobieranie ukończonego projektu

Dodatkowe zasoby

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

• Projekt SignalR

• Usługa GitHub i przykłady usługi SignalR

• SignalR Wiki

Następne kroki

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

Przejdź do następnego artykułu, aby dowiedzieć się, jak utworzyć aplikację internetową, która używa ASP.NET SignalR 2 w celu zapewnienia funkcji obsługi komunikatów o wysokiej częstotliwości.