Kurz: Začínáme s funkcí SignalR 1.x

Článek
07/13/2023

Upozornění

Tato dokumentace není určená pro nejnovější verzi SignalR. Podívejte se na ASP.NET Core SignalR.

V tomto kurzu se naučíte používat funkci SignalR k vytvoření aplikace pro chatování v reálném čase. Přidáte SignalR do prázdné ASP.NET webové aplikace a vytvoříte stránku HTML pro odesílání a zobrazování zpráv.

Přehled

V tomto kurzu se seznámíte s vývojem služby SignalR a ukážeme, jak vytvořit jednoduchou chatovací aplikaci založenou na prohlížeči. Přidáte knihovnu SignalR do prázdné ASP.NET webové aplikace, vytvoříte třídu centra pro odesílání zpráv klientům a vytvoříte stránku HTML, která uživatelům umožní odesílat a přijímat zprávy chatu. Podobný kurz, který ukazuje, jak vytvořit chatovací aplikaci v MVC 4 pomocí zobrazení MVC, najdete v tématu Začínáme s využitím SignalR a MVC 4.

Poznámka

Tento kurz používá vydanou verzi SignalR (1.x). Podrobnosti o změnách mezi verzemi SignalR 1.x a 2.0 najdete v tématu Upgrade projektů SignalR 1.x.

SignalR je opensourcová knihovna .NET pro vytváření webových aplikací, které vyžadují živou interakci uživatelů nebo aktualizace dat v reálném čase. Mezi příklady patří sociální aplikace, hry pro více uživatelů, obchodní spolupráce a zprávy, počasí nebo aplikace pro finanční aktualizace. Tyto aplikace se často označují jako aplikace v reálném čase.

SignalR zjednodušuje proces vytváření aplikací v reálném čase. Zahrnuje knihovnu ASP.NET serveru a klientskou knihovnu JavaScriptu, která usnadňuje správu připojení klient-server a nabízení aktualizací obsahu klientům. Knihovnu SignalR můžete přidat do existující aplikace ASP.NET, abyste získali funkce v reálném čase.

Tento kurz ukazuje následující úlohy vývoje služby SignalR:

Přidání knihovny SignalR do webové aplikace ASP.NET
Vytvoření třídy centra pro nabízení obsahu klientům
Použití knihovny SignalR jQuery na webové stránce k odesílání zpráv a zobrazení aktualizací z centra

Následující snímek obrazovky ukazuje chatovací aplikaci spuštěnou v prohlížeči. Každý nový uživatel může publikovat komentáře a zobrazit komentáře přidané po připojení uživatele k chatu.

Instance chatu

Oddíly:

Nastavení projektu
Spuštění ukázky
Prozkoumání kódu
Další kroky

Nastavení projektu

Tato část ukazuje, jak vytvořit prázdnou ASP.NET webovou aplikaci, přidat SignalR a vytvořit chatovací aplikaci.

Požadavky:

Visual Studio 2010 SP1 nebo 2012. Pokud visual studio nemáte, podívejte se na ASP.NET soubory ke stažení a získejte bezplatný nástroj Visual Studio 2012 Express Development Tool.
Microsoft ASP.NET and Web Tools 2012.2. Pro Visual Studio 2012 tento instalační program přidává do sady Visual Studio nové funkce ASP.NET, včetně šablon SignalR. Pro Visual Studio 2010 SP1 není k dispozici instalační program, ale kurz můžete dokončit instalací balíčku SignalR NuGet, jak je popsáno v krocích instalace.

Následující kroky používají Visual Studio 2012 k vytvoření ASP.NET prázdné webové aplikace a přidání knihovny SignalR:

V sadě Visual Studio vytvořte ASP.NET prázdnou webovou aplikaci.
Otevřete konzolu Správce balíčků výběrem možnosti Nástroje | Správce balíčků NuGet | Konzola Správce balíčků. Do okna konzoly zadejte následující příkaz:

Install-Package Microsoft.AspNet.SignalR -Version 1.1.3

Tento příkaz nainstaluje nejnovější verzi SignalR 1.x.
V Průzkumník řešení klikněte pravým tlačítkem na projekt a vyberte Přidat | Třída. Pojmenujte novou třídu ChatHub.
V Průzkumník řešení rozbalte uzel Skripty. Knihovny skriptů pro jQuery a SignalR jsou viditelné v projektu.

Nahraďte kód ve třídě ChatHub následujícím kódem.

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

V Průzkumník řešení klikněte pravým tlačítkem na projekt a pak klikněte na Přidat | Nová položka. V dialogovém okně Přidat novou položku vyberte Globální aplikační třída a klikněte na Přidat.
Za poskytnuté using příkazy ve třídě Global.asax.cs přidejte následující using příkazy.
```
using System.Web.Routing;
using Microsoft.AspNet.SignalR;
```
Přidejte do metody třídy Global následující řádek kódu Application_Start , který zaregistruje výchozí trasu pro centra SignalR.
```
// Register the default hubs route: ~/signalr/hubs
RouteTable.Routes.MapHubs();
```
V Průzkumník řešení klikněte pravým tlačítkem na projekt a pak klikněte na Přidat | Nová položka. V dialogovém okně Přidat novou položku vyberte Html Page (Stránka HTML) a klikněte na Add (Přidat).
V Průzkumník řešení klikněte pravým tlačítkem na stránku HTML, kterou jste právě vytvořili, a klikněte na Nastavit jako úvodní stránku.

Nahraďte výchozí kód na stránce HTML následujícím kódem.

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

Uložit vše pro projekt.

Spuštění ukázky

Stisknutím klávesy F5 spusťte projekt v režimu ladění. Stránka HTML se načte v instanci prohlížeče a zobrazí výzvu k zadání uživatelského jména.
Zadejte jméno uživatele.
Zkopírujte adresu URL z řádku adresy prohlížeče a použijte ji k otevření dvou dalších instancí prohlížeče. V každé instanci prohlížeče zadejte jedinečné uživatelské jméno.
V každé instanci prohlížeče přidejte komentář a klikněte na Odeslat. Komentáře by se měly zobrazit ve všech instancích prohlížeče.

Poznámka

Tato jednoduchá chatovací aplikace neudržuje kontext diskuze na serveru. Centrum vysílá komentáře všem aktuálním uživatelům. Uživatelům, kteří se k chatu připojí později, uvidí zprávy přidané od okamžiku, kdy se připojí.

Následující snímek obrazovky ukazuje chatovací aplikaci spuštěnou ve třech instancích prohlížeče, z nichž všechny se aktualizují, když jedna instance odešle zprávu:
V Průzkumník řešení zkontrolujte uzel Dokumenty skriptu pro spuštěnou aplikaci. Existuje soubor skriptu s názvem hubs , který knihovna SignalR dynamicky generuje za běhu. Tento soubor spravuje komunikaci mezi skriptem jQuery a kódem na straně serveru.

Prozkoumání kódu

Chatovací aplikace SignalR ukazuje dvě základní úlohy vývoje SignalR: vytvoření centra jako hlavního koordinačního objektu na serveru a použití knihovny SignalR jQuery k odesílání a přijímání zpráv.

SignalR Hubs

V ukázce kódu se třída ChatHub odvozuje z třídy Microsoft.AspNet.SignalR.Hub . Odvození z třídy Hub je užitečný způsob, jak sestavit aplikaci SignalR. Ve své třídě centra můžete vytvořit veřejné metody a pak k těmto metodám přistupovat tak, že je zavoláte ze skriptů jQuery na webové stránce.

V kódu chatu klienti volají metodu ChatHub.Send k odeslání nové zprávy. Centrum zase odešle zprávu všem klientům voláním Clients.All.broadcastMessage.

Metoda Send ukazuje několik konceptů centra :

Deklarujte veřejné metody v centru, aby je klienti mohli volat.
Pro přístup ke všem klientům připojeným k tomuto centru použijte dynamickou vlastnost Microsoft.AspNet.SignalR.Hub.Clients .

Voláním funkce jQuery v klientovi (například broadcastMessage funkce) aktualizujte klienty.

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

SignalR a jQuery

Stránka HTML v ukázce kódu ukazuje, jak pomocí knihovny SignalR jQuery komunikovat s centrem SignalR. Mezi základní úlohy v kódu patří deklarování proxy serveru pro odkazování na centrum, deklarování funkce, kterou může server volat za účelem nabízení obsahu klientům, a spuštění připojení pro odesílání zpráv do centra.

Následující kód deklaruje proxy pro centrum.

var chat = $.connection.chatHub;

Poznámka

V jQuery je odkaz na třídu serveru a její členy ve camel case. Ukázka kódu odkazuje na třídu ChatHub jazyka C# v jQuery jako chatHub.

Následující kód je způsob, jak ve skriptu vytvořit funkci zpětného volání. Třída centra na serveru volá tuto funkci k nabízení aktualizací obsahu do každého klienta. Dva řádky, které kódují obsah html před jeho zobrazením, jsou volitelné a představují jednoduchý způsob, jak zabránit injektáži skriptu.

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

Následující kód ukazuje, jak otevřít připojení k centru. Kód spustí připojení a pak mu předá funkci, která zpracuje událost click na tlačítku Odeslat na stránce HTML.

Poznámka

Tento přístup zajistí, že se připojení vytvoří před spuštěním obslužné rutiny události.

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

Další kroky

Dozvěděli jste se, že SignalR je architektura pro vytváření webových aplikací v reálném čase. Seznámili jste se také s několika úlohami vývoje služby SignalR: jak přidat službu SignalR do aplikace ASP.NET, jak vytvořit třídu centra a jak odesílat a přijímat zprávy z centra.

Ukázkovou aplikaci v tomto kurzu nebo jiné aplikace SignalR můžete zpřístupnit přes internet tak, že je nasadíte u poskytovatele hostingu. Microsoft nabízí bezplatný webhosting až pro 10 webů v rámci bezplatného zkušebního účtu Windows Azure. Návod k nasazení ukázkové aplikace SignalR najdete v tématu Publikování ukázky Začínáme SignalR jako webu Windows Azure. Podrobné informace o tom, jak nasadit webový projekt sady Visual Studio na web Windows Azure, najdete v tématu Nasazení aplikace ASP.NET na web Windows Azure. (Poznámka: Přenos protokolu WebSocket se v současné době nepodporuje pro weby Windows Azure. Pokud není přenos protokolu WebSocket k dispozici, použije služba SignalR ostatní dostupné přenosy, jak je popsáno v části Přenosy v tématu Úvod do služby SignalR.)

Další pokročilé koncepty vývoje služby SignalR najdete na následujících webech se zdrojovým kódem a zdroji informací o službě SignalR:

Sdílet prostřednictvím

Kurz: Začínáme s funkcí SignalR 1.x

Přehled

Nastavení projektu

Spuštění ukázky

Prozkoumání kódu

SignalR Hubs

SignalR a jQuery

Další kroky

Váš názor

Další materiály