Kurz: Začínáme s knihovnou SignalR 1.x a MVC 4

Č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 dozvíte, jak pomocí ASP.NET SignalR vytvořit chatovací aplikaci v reálném čase. Přidáte SignalR do aplikace MVC 4 a vytvoříte zobrazení chatu pro odesílání a zobrazování zpráv.

Přehled

Tento kurz vás seznámí s vývojem webových aplikací v reálném čase pomocí ASP.NET SignalR a ASP.NET MVC 4. Tento kurz používá stejný kód chatovací aplikace jako kurz SignalR Začínáme, ale ukazuje, jak ho přidat do aplikace MVC 4 založené na internetové šabloně.

V tomto tématu se seznámíte s následujícími úlohami vývoje služby SignalR:

Přidání knihovny SignalR do aplikace MVC 4
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 dokončenou chatovací aplikaci spuštěnou v prohlížeči.

Instance chatu

Oddíly:

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

Nastavení projektu

Požadavky:

Visual Studio 2010 SP1, Visual Studio 2012 nebo Visual Studio 2012 Express. 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.
Pro Visual Studio 2010 nainstalujte ASP.NET MVC 4.

Tato část ukazuje, jak vytvořit aplikaci ASP.NET MVC 4, přidat knihovnu SignalR a vytvořit chatovací aplikaci.

1. V sadě Visual Studio vytvořte aplikaci ASP.NET MVC 4, pojmenujte ji SignalRChat a klikněte na OK.
  
  Poznámka
  
  V sadě VS 2010 vyberte v rozevíracím seznamu Verze rozhraní možnost .NET Framework 4 . Kód SignalR běží na rozhraní .NET Framework verze 4 a 4.5.
  
  2. Vyberte šablonu Internetová aplikace, zrušte zaškrtnutí políčka Vytvořit projekt testování jednotek a klikněte na OK.
  
  3. Otevřete konzolu Správce balíčků > NuGet Nástroje > a spusťte následující příkaz. Tento krok přidá do projektu sadu souborů skriptů a odkazů na sestavení, které umožňují funkci SignalR.
  
  install-package Microsoft.AspNet.SignalR -Version 1.1.34. V Průzkumník řešení rozbalte složku Scripts. Všimněte si, že do projektu byly přidány knihovny skriptů pro SignalR.
  
  5. V Průzkumník řešení klikněte pravým tlačítkem na projekt a vyberte Přidat | Nová složka a přidejte novou složku s názvem Hubs. 6. Klikněte pravým tlačítkem na složku Hubs a klikněte na Přidat | A vytvořte novou třídu jazyka C# s názvem ChatHub.cs. Tuto třídu použijete jako serverové centrum SignalR, které odesílá zprávy všem klientům.

Poznámka

Pokud používáte Visual Studio 2012 a máte nainstalovanou aktualizaci ASP.NET and Web Tools 2012.2, můžete k vytvoření třídy centra použít novou šablonu položky SignalR. Uděláte to tak, že kliknete pravým tlačítkem na složku Hubs a kliknete na Přidat | Nová položka, vyberte SignalR Hub Class (v1) a pojmenujte třídu ChatHub.cs.

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

Otevřete soubor Global.asax pro projekt a přidejte volání metody RouteTable.Routes.MapHubs(); jako první řádek kódu v Application_Start metodě. Tento kód registruje výchozí trasu pro centra SignalR a musí být volána před registrací jakýchkoli jiných tras. Dokončená Application_Start metoda vypadá jako v následujícím příkladu.

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

Upravte třídu, která HomeController se nachází v Controllers/HomeController.cs a přidejte do třídy následující metodu. Tato metoda vrátí zobrazení Chat , které vytvoříte v pozdějším kroku.
```
public ActionResult Chat()
{
    return View();
}
```
Klikněte pravým tlačítkem myši na právě vytvořenou metodu Chat a kliknutím na Přidat zobrazení vytvořte nový soubor zobrazení.
V dialogovém okně Přidat zobrazení zkontrolujte, jestli je zaškrtnuté políčko Použít rozložení nebo stránku předlohy (zrušte zaškrtnutí ostatních políček), a potom klikněte na Přidat.

Upravte nový soubor zobrazení s názvem Chat.cshtml. <Za značku h2> vložte na stránku následující <oddíl div> a @section scripts blok kódu. Tento skript umožňuje, aby stránka odesílala chatovací zprávy a zobrazovala zprávy ze serveru. Úplný kód pro zobrazení chatu se zobrazí v následujícím bloku kódu.

Důležité

Když do projektu sady Visual Studio přidáte knihovnu SignalR a další knihovny skriptů, správce balíčků může nainstalovat verze skriptů, které jsou novější než verze uvedené v tomto tématu. Ujistěte se, že odkazy na skripty v kódu odpovídají verzím knihoven skriptů nainstalovaných v projektu.

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

Uložit vše pro projekt.

Spuštění ukázky

Stisknutím klávesy F5 spusťte projekt v režimu ladění.
V řádku adresy prohlížeče připojte k adrese URL výchozí stránky projektu /home/chat . Stránka Chat 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 v prohlížeči.
V Průzkumník řešení zkontrolujte uzel Dokumenty skriptu pro spuštěnou aplikaci. Tento uzel je viditelný v režimu ladění, pokud jako prohlížeč používáte Internet Explorer. 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. Pokud používáte jiný prohlížeč než Internet Explorer, můžete k souboru dynamických center přistupovat také tak, že do něj přejdete přímo, například http://mywebsite/signalr/hubs.

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

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 vlastnost Microsoft.AspNet.SignalR.Hub.Clients .

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

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

SignalR a jQuery

Soubor zobrazení Chat.cshtml v ukázce kódu ukazuje, jak používat knihovnu SignalR jQuery ke komunikaci s centrem SignalR. Základní úkoly v kódu jsou vytvoření odkazu na automaticky vygenerovaný proxy server pro centrum, deklarování funkce, kterou může server volat za účelem nabízení obsahu klientům, a spuštění připojení k 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. Pokud chcete odkazovat na ChatHub třídu v jQuery s běžnými písmeny Pascal stejně jako v jazyce C#, upravte soubor třídy ChatHub.cs. Přidejte příkaz pro using odkaz na Microsoft.AspNet.SignalR.Hubs obor názvů. Potom přidejte HubName atribut do ChatHub třídy, například [HubName("ChatHub")]. Nakonec aktualizujte odkaz jQuery na ChatHub třídu.

Následující kód ukazuje, jak ve skriptu vytvořit funkci zpětného volání. Třída centra na serveru volá tuto funkci, aby do každého klienta odeslala aktualizace obsahu. Volitelné volání htmlEncode funkce ukazuje způsob, jak html kódovat obsah zprávy před jeho zobrazením na stránce, jako způsob, jak zabránit injektáži skriptu.

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</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 pro zpracování události kliknutí na tlačítku Odeslat na stránce Chat.

Poznámka

Tento přístup zajišťuje, že se připojení naváže 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 SignalR do aplikace ASP.NET, jak vytvořit třídu centra a jak odesílat a přijímat zprávy z centra.

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

Share via

Kurz: Začínáme s knihovnou SignalR 1.x a MVC 4

Přehled

Nastavení projektu

Spuštění ukázky

Prozkoumání kódu

SignalR Hubs

SignalR a jQuery

Další kroky

Váš názor

Váš názor

Další materiály