Samouczek: wprowadzenie do usługi SignalR 1.x

  • Artykuł

Autor: Patrick Fletcher, Tim Teebken

Ostrzeżenie

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

Ten samouczek pokazuje, jak utworzyć aplikację do obsługi rozmów w czasie rzeczywistym przy użyciu SignalR. Dodasz usługę SignalR do pustej aplikacji internetowej ASP.NET i utworzysz stronę HTML do wysyłania i wyświetlania komunikatów.

Omówienie

W tym samouczku przedstawiono programowanie w usłudze SignalR, pokazując, jak utworzyć prostą aplikację czatu opartą na przeglądarce. Biblioteka SignalR zostanie dodana do pustej aplikacji internetowej ASP.NET, utworzysz klasę centrum do wysyłania komunikatów do klientów i utworzysz stronę HTML umożliwiającą użytkownikom wysyłanie i odbieranie wiadomości czatu. Aby zapoznać się z podobnym samouczkiem, który pokazuje, jak utworzyć aplikację czatu w mvc 4 przy użyciu widoku MVC, zobacz Wprowadzenie z usługami SignalR i MVC 4.

Uwaga

W tym samouczku jest używana wersja (1.x) usługi SignalR. Aby uzyskać szczegółowe informacje na temat zmian między usługą SignalR 1.x i 2.0, zobacz Uaktualnianie projektów SignalR 1.x.

SignalR to biblioteka platformy .NET typu open source do tworzenia aplikacji internetowych, które wymagają interakcji użytkownika na żywo lub aktualizacji danych w czasie rzeczywistym. Przykłady obejmują aplikacje społecznościowe, gry dla wielu użytkowników, współpracę biznesową i wiadomości, pogodę lub aplikacje aktualizacji finansowych. Są one często nazywane aplikacjami czasu rzeczywistego.

Usługa SignalR upraszcza proces tworzenia aplikacji w czasie rzeczywistym. Zawiera ona bibliotekę serwera ASP.NET i bibliotekę klienta JavaScript, aby ułatwić zarządzanie połączeniami klient-serwer i wypychanie aktualizacji zawartości do klientów. Bibliotekę SignalR można dodać do istniejącej aplikacji ASP.NET, aby uzyskać funkcje w czasie rzeczywistym.

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

  • Dodawanie biblioteki SignalR do aplikacji internetowej ASP.NET.
  • 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 aplikację czatu działającą w przeglądarce. Każdy nowy użytkownik może publikować komentarze i wyświetlać komentarze dodane po dołączeniu użytkownika do czatu.

Wystąpienia czatu

Sekcje:

Konfigurowanie projektu

W tej sekcji pokazano, jak utworzyć pustą aplikację internetową ASP.NET, dodać usługę SignalR i utworzyć aplikację do czatu.

Wymagania wstępne:

  • Visual Studio 2010 SP1 lub 2012. 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.
  • Microsoft ASP.NET and Web Tools 2012.2. W przypadku programu Visual Studio 2012 ten instalator dodaje nowe funkcje ASP.NET, w tym szablony usługi SignalR do programu Visual Studio. W przypadku programu Visual Studio 2010 SP1 instalator jest niedostępny, ale możesz ukończyć samouczek, instalując pakiet NuGet usługi SignalR zgodnie z opisem w krokach konfiguracji.

W poniższych krokach użyj programu Visual Studio 2012, aby utworzyć ASP.NET Empty Web Application i dodać bibliotekę SignalR:

  1. W programie Visual Studio utwórz ASP.NET pustą aplikację internetową.

    Tworzenie pustej sieci Web

  2. Otwórz konsolę menedżera pakietów , wybierając pozycję Narzędzia | Menedżer pakietów NuGet | Konsola menedżera pakietów. Wprowadź następujące polecenie w oknie konsoli:

    Install-Package Microsoft.AspNet.SignalR -Version 1.1.3

    To polecenie instaluje najnowszą wersję biblioteki SignalR 1.x.

  3. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt, wybierz polecenie Dodaj | Klasa. Nadaj nowej klasie nazwę ChatHub.

  4. W Eksplorator rozwiązań rozwiń węzeł Skrypty. Biblioteki skryptów dla bibliotek jQuery i SignalR są widoczne w projekcie.

    Odwołania do biblioteki

  5. 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 broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

  6. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt, a następnie kliknij polecenie Dodaj | Nowy element. W oknie dialogowym Dodawanie nowego elementu wybierz pozycję Global Application Class (Klasa aplikacji globalnej ) i kliknij przycisk Add (Dodaj).

    Dodawanie globalnego

  7. Dodaj następujące using instrukcje po podanych using instrukcjach w klasie Global.asax.cs.

    using System.Web.Routing;
using Microsoft.AspNet.SignalR;

  8. Dodaj następujący wiersz kodu w Application_Start metodzie klasy Global, aby zarejestrować trasę domyślną dla centrów SignalR.

    // Register the default hubs route: ~/signalr/hubs
RouteTable.Routes.MapHubs();

  9. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt, a następnie kliknij polecenie Dodaj | Nowy element. W oknie dialogowym Dodawanie nowego elementu wybierz pozycję Strona HTML i kliknij przycisk Dodaj.

  10. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy właśnie utworzoną stronę HTML i kliknij pozycję Ustaw jako stronę startową.

  11. Zastąp domyślny kod na stronie HTML następującym 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-1.6.4.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="/Scripts/jquery.signalR-1.1.4.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>

  12. Zapisz wszystko dla projektu.

Uruchamianie przykładu

  1. Naciśnij klawisz F5, aby uruchomić projekt w trybie debugowania. Strona HTML jest ładowana w wystąpieniu przeglądarki i monituje o podanie nazwy użytkownika.

    Wprowadź nazwę użytkownika

  2. Wprowadź nazwę użytkownika.

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

  4. 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 uruchomioną w trzech wystąpieniach przeglądarki, z których wszystkie są aktualizowane, gdy jedno wystąpienie wysyła komunikat:

    Przeglądarki czatów

  5. W Eksplorator rozwiązań sprawdź węzeł Dokumenty skryptów dla uruchomionej aplikacji. 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.

    Wygenerowany skrypt centrum

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

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 uzyskać dostęp do wszystkich klientów połączonych z tym koncentratorem.

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

Na stronie HTML w przykładzie kodu pokazano, jak używać biblioteki SignalR jQuery do komunikowania się z centrum SignalR. Podstawowe zadania w kodzie deklarują serwer proxy do odwoływania się do centrum, deklarując funkcję, którą serwer może wywołać w celu wypychania zawartości do klientów, i uruchamiając 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.

Poniższy kod polega na tworzeniu funkcji wywołania zwrotnego w skrycie. 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ą prosty sposób zapobiegania wstrzyknięciu skryptu.

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

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

Uwaga

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

Przykładową aplikację można udostępnić w tym samouczku lub innych aplikacjach usługi SignalR za pośrednictwem Internetu, wdrażając je u dostawcy hostingu. Firma Microsoft oferuje bezpłatny hosting internetowy dla maksymalnie 10 witryn internetowych na bezpłatnym koncie wersji próbnej platformy Windows Azure. Aby zapoznać się z przewodnikiem po sposobie wdrażania przykładowej aplikacji SignalR, zobacz Publikowanie przykładu usługi SignalR Wprowadzenie jako witryny sieci Web platformy Windows Azure. Aby uzyskać szczegółowe informacje na temat wdrażania projektu internetowego programu Visual Studio w witrynie sieci Web platformy Windows Azure, zobacz Wdrażanie aplikacji ASP.NET w witrynie sieci Web platformy Windows Azure. (Uwaga: Transport protokołu WebSocket nie jest obecnie obsługiwany w witrynach sieci Web platformy Windows Azure. Gdy transport protokołu WebSocket jest niedostępny, usługa SignalR używa innych dostępnych transportów zgodnie z opisem w sekcji Transports w temacie Wprowadzenie do usługi SignalR).

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: