Samouczek: wprowadzenie do usługi SignalR 1.x i wzorca MVC 4

Artykuł
07/13/2023

Ostrzeżenie

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

W tym samouczku pokazano, jak za pomocą ASP.NET SignalR utworzyć aplikację do czatu w czasie rzeczywistym. Dodasz usługę SignalR do aplikacji MVC 4 i utworzysz widok czatu do wysyłania i wyświetlania komunikatów.

Omówienie

W tym samouczku przedstawiono tworzenie aplikacji internetowych w czasie rzeczywistym za pomocą usługi ASP.NET SignalR i ASP.NET MVC 4. W samouczku użyto tego samego kodu aplikacji czatu co samouczek dotyczący usługi SignalR Wprowadzenie, ale pokazano, jak dodać go do aplikacji MVC 4 na podstawie szablonu internetowego.

W tym temacie przedstawiono następujące zadania programistyczne usługi SignalR:

Dodawanie biblioteki SignalR do aplikacji MVC 4.
Tworzenie klasy centrum w celu wypychania zawartości do klientów.
Używanie biblioteki jQuery usługi SignalR na stronie internetowej do wysyłania komunikatów i wyświetlania aktualizacji z centrum.

Poniższy zrzut ekranu przedstawia ukończoną aplikację czatu uruchomioną w przeglądarce.

Wystąpienia czatu

Sekcje:

Konfigurowanie projektu
Uruchamianie przykładu
Sprawdzanie kodu
Następne kroki

Konfigurowanie projektu

Wymagania wstępne:

Visual Studio 2010 SP1, Visual Studio 2012 lub Visual Studio 2012 Express. Jeśli nie masz programu Visual Studio, zobacz ASP.NET Pliki do pobrania , aby uzyskać bezpłatne narzędzie Visual Studio 2012 Express Development Tool.
W przypadku programu Visual Studio 2010 zainstaluj ASP.NET MVC 4.

W tej sekcji pokazano, jak utworzyć aplikację ASP.NET MVC 4, dodać bibliotekę SignalR i utworzyć aplikację do czatu.

1. W programie Visual Studio utwórz aplikację ASP.NET MVC 4, nadaj jej nazwę SignalRChat, a następnie kliknij przycisk OK.
  
  Uwaga
  
  W programie VS 2010 wybierz pozycję .NET Framework 4 w kontrolce rozwijanej Wersja platformy Framework. Kod usługi SignalR jest uruchamiany w .NET Framework w wersjach 4 i 4.5.
  
  2. Wybierz szablon Aplikacja internetowa, wyczyść opcję Utwórz projekt testów jednostkowych, a następnie kliknij przycisk OK.
  
  3. Otwórz konsolę menedżera > pakietów NuGet Narzędzi > i uruchom następujące polecenie. Ten krok dodaje do projektu zestaw plików skryptów i odwołań do zestawów, które umożliwiają korzystanie z funkcji signalR.
  
  install-package Microsoft.AspNet.SignalR -Version 1.1.34. W Eksplorator rozwiązań rozwiń folder Scripts. Pamiętaj, że biblioteki skryptów dla usługi SignalR zostały dodane do projektu.
  
  5. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt, wybierz polecenie Dodaj | Nowy folder i dodaj nowy folder o nazwie Hubs. 6. Kliknij prawym przyciskiem myszy folder Hubs , kliknij polecenie Dodaj | Klasa i utwórz nową klasę języka C# o nazwie ChatHub.cs. Ta klasa będzie używana jako centrum serwera SignalR, które wysyła komunikaty do wszystkich klientów.

Uwaga

Jeśli używasz programu Visual Studio 2012 i zainstalowano aktualizację ASP.NET and Web Tools 2012.2, możesz użyć nowego szablonu elementu SignalR, aby utworzyć klasę centrum. Aby to zrobić, kliknij prawym przyciskiem myszy folder Hubs , kliknij polecenie Dodaj | Nowy element, wybierz pozycję SignalR Hub Class (v1) i nadaj klasie nazwę ChatHub.cs.

Zastąp kod w klasie ChatHub 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);
        }
    }
}

Otwórz plik Global.asax dla projektu i dodaj wywołanie metody RouteTable.Routes.MapHubs(); jako pierwszy wiersz kodu w metodzie Application_Start . Ten kod rejestruje trasę domyślną dla centrów SignalR i musi być wywoływany przed zarejestrowaniem innych tras. Ukończona Application_Start metoda wygląda podobnie do poniższego przykładu.

protected void Application_Start()
{
    RouteTable.Routes.MapHubs();
    AreaRegistration.RegisterAllAreas();

    WebApiConfig.Register(GlobalConfiguration.Configuration);
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
    AuthConfig.RegisterAuth();
}

Zmodyfikuj klasę znajdującą HomeController się w pliku Controllers/HomeController.cs i dodaj następującą metodę do klasy . Ta metoda zwraca widok czatu , który zostanie utworzony w późniejszym kroku.
```
public ActionResult Chat()
{
    return View();
}
```
Kliknij prawym przyciskiem myszy właśnie utworzoną Chat metodę, a następnie kliknij polecenie Dodaj widok , aby utworzyć nowy plik widoku.
W oknie dialogowym Dodawanie widoku upewnij się, że zaznaczono pole wyboru Użyj układu lub strony wzorcowej (wyczyść pozostałe pola wyboru), a następnie kliknij przycisk Dodaj.

Edytuj nowy plik widoku o nazwie Chat.cshtml. Po tagu <h2> wklej następującą <sekcję div> i @section scripts blok kodu na stronie. Ten skrypt umożliwia stronie wysyłanie wiadomości czatu i wyświetlanie wiadomości z serwera. Pełny kod widoku czatu pojawia się w poniższym bloku kodu.

Ważne

Po dodaniu bibliotek SignalR i innych bibliotek skryptów do projektu programu Visual Studio Menedżer pakietów może instalować wersje skryptów, które są nowsze niż wersje przedstawione w tym temacie. Upewnij się, że odwołania do skryptu w kodzie są zgodne z wersjami bibliotek skryptów zainstalowanych w projekcie.

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

Zapisz wszystko dla projektu.

Uruchamianie przykładu

Naciśnij klawisz F5, aby uruchomić projekt w trybie debugowania.
W wierszu adresu przeglądarki dołącz ciąg /home/chat do adresu URL domyślnej strony projektu. Strona czatu ładuje się w wystąpieniu przeglądarki i wyświetla monit o podanie nazwy użytkownika.
Wprowadź nazwę użytkownika.
Skopiuj adres URL z wiersza adresu przeglądarki i użyj go, aby otworzyć jeszcze dwa wystąpienia przeglądarki. W każdym wystąpieniu przeglądarki wprowadź unikatową nazwę użytkownika.
W każdym wystąpieniu przeglądarki dodaj komentarz i kliknij przycisk Wyślij. Komentarze powinny być wyświetlane we wszystkich wystąpieniach przeglądarki.

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.
Poniższy zrzut ekranu przedstawia aplikację czatu działającą w przeglądarce.
W Eksplorator rozwiązań sprawdź węzeł Dokumenty skryptów dla uruchomionej aplikacji. Ten węzeł jest widoczny w trybie debugowania, jeśli używasz programu Internet Explorer jako przeglądarki. Istnieje plik skryptu o nazwie hubs , który biblioteka SignalR dynamicznie generuje w czasie wykonywania. Ten plik zarządza komunikacją między skryptem jQuery i kodem po stronie serwera. Jeśli używasz przeglądarki innej niż Internet Explorer, możesz również uzyskać dostęp do pliku centrów dynamicznych , przechodząc bezpośrednio do niego, na przykład http://mywebsite/signalr/hubs.

Sprawdzanie kodu

Aplikacja do czatu usługi SignalR demonstruje dwa podstawowe zadania programistyczne usługi SignalR: tworzenie centrum jako głównego obiektu koordynacji na serwerze oraz używanie biblioteki SignalR jQuery do wysyłania i odbierania komunikatów.

Koncentratory SignalR

W przykładzie kodu klasa ChatHub pochodzi z klasy Microsoft.AspNet.SignalR.Hub . Wyprowadzanie z klasy Hub to przydatny sposób tworzenia aplikacji SignalR. Możesz utworzyć publiczne metody w klasie centrum, a następnie uzyskać dostęp do tych metod, wywołując je ze skryptów jQuery na stronie internetowej.

W kodzie czatu klienci wywołają metodę ChatHub.Send , aby wysłać nową wiadomość. Centrum z kolei wysyła komunikat do wszystkich klientów przez wywołanie 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 Microsoft.AspNet.SignalR.Hub.Clients , aby uzyskać dostęp do wszystkich klientów połączonych z tym centrum.

Wywołaj funkcję jQuery na kliencie (np 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

Plik widoku Chat.cshtml w przykładzie kodu pokazuje, jak używać biblioteki SignalR jQuery do komunikowania się z centrum SignalR. Podstawowe zadania w kodzie tworzą odwołanie do automatycznie wygenerowanego serwera proxy dla centrum, deklarując 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.

Poniższy kod deklaruje serwer proxy dla centrum.

var chat = $.connection.chatHub;

Uwaga

W jQuery odwołanie do klasy serwera i jego składowych jest w przypadku camel. Przykładowy kod odwołuje się do klasy ChatHub języka C# w aplikacji jQuery jako chatHub. Jeśli chcesz odwołać się do klasy w jQuery przy użyciu konwencjonalnej ChatHub wielkości liter Pascal, tak jak w języku C#, zmodyfikuj plik klasy ChatHub.cs. Dodaj instrukcję, using aby odwoływać Microsoft.AspNet.SignalR.Hubs się do przestrzeni nazw. Następnie dodaj HubName atrybut do ChatHub klasy, na przykład [HubName("ChatHub")]. Na koniec zaktualizuj odwołanie jQuery do ChatHub klasy.

Poniższy kod pokazuje, jak utworzyć funkcję wywołania zwrotnego w skrycie. Klasa koncentratora na serwerze wywołuje tę funkcję w celu wypychania aktualizacji zawartości do każdego klienta. Opcjonalne wywołanie htmlEncode funkcji pokazuje sposób kodowania zawartości komunikatu w języku HTML przed jego wyświetleniem na stronie jako sposób zapobiegania iniekcji skryptu.

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

Poniższy kod pokazuje, jak otworzyć połączenie z koncentratorem. Kod uruchamia połączenie, a następnie przekazuje ją do obsługi zdarzenia kliknięcia na przycisku Wyślij na stronie Czat.

Uwaga

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

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

Następne kroki

Wiesz już, że usługa SignalR to platforma do tworzenia aplikacji internetowych w czasie rzeczywistym. Przedstawiono również kilka zadań programistycznych usługi SignalR: jak dodać usługę SignalR do aplikacji ASP.NET, jak utworzyć klasę centrum oraz jak wysyłać i odbierać komunikaty z centrum.

Aby dowiedzieć się więcej zaawansowanych pojęć związanych z rozwojem usługi SignalR, odwiedź następujące witryny dotyczące kodu źródłowego i zasobów usługi SignalR:

Udostępnij za pośrednictwem

Samouczek: wprowadzenie do usługi SignalR 1.x i wzorca MVC 4

Omówienie

Konfigurowanie projektu

Uruchamianie przykładu

Sprawdzanie kodu

Koncentratory SignalR

SignalR i jQuery

Następne kroki

Opinia

Dodatkowe zasoby