Jak vytvořit klienta pro streamování dat pomocí SignalR v .NET

V posledních letech je streamování dat v reálném čase jedním z nejžádanějších přístupů v moderních aplikacích. Když se jedná o implementaci reálného streamování dat, nástroje jako SignalR mohou nabídnout efektivní způsob, jak tuto funkcionalitu implementovat. Tento přístup je obzvlášť užitečný v aplikacích, které potřebují pravidelně aktualizovat uživatelské rozhraní s novými daty, jako jsou např. aplikace pro sledování akciových trhů.

Vytvoření klienta pro příjem streamu dat

Prvním krokem je vytvoření projektu klienta, který bude streamovat data o cenách akcií z SignalR hubu. Tento klient bude používat SignalR pro příjem aktuálních cen akcií a jejich zobrazení na konzoli. Abychom to dosáhli, nejprve musíme vytvořit instanci HubConnection, která se připojí k serveru, a následně budeme odbírat stream aktualizovaných cen.

Nejprve se klient připojí k SignalR hubu, který běží na serveru:

csharp
Copy code
HubConnection hubConnection = new HubConnectionBuilder()

    .WithUrl("https://localhost:5131/stockprice")
    .Build();
await hubConnection.StartAsync();

Tento kód vytvoří připojení k serveru a začne příjem dat z hubu. Poté začneme odbírat stream akciových cen a zobrazovat je v konzole. K tomu slouží metoda StreamAsync, která asynchronně získává data, až do okamžiku, kdy uživatel neukončí spojení:

csharp
Copy code
CancellationTokenSource cts = new();
IAsyncEnumerable<StockPrice> stockPrices = 
    hubConnection.StreamAsync<StockPrice>("GetStockPriceUpdates", stock, cts.Token);
await foreach (StockPrice sp in stockPrices)
{
    Console.WriteLine($"{sp.Stock} is now {sp.Price:C}.");
    Console.Write("Do you want to cancel (y/n)? ");
    ConsoleKey key = Console.ReadKey().Key;
    if (key == ConsoleKey.Y)
    {
        cts.Cancel();
    }
    Console.WriteLine();
}

Pokud uživatel stiskne klávesu "Y", streamování se zastaví, což se provede pomocí CancellationToken, který je předán do metody StreamAsync.

Odesílání streamu dat na server

Další částí tohoto procesu je odesílání dat zpět na server, což umožní aplikaci posílat nové akciové kódy nebo jiné informace. SignalR umožňuje odesílat data na server prostřednictvím metod jako SendAsync. V našem příkladu klient odesílá generované kódy akcií:

csharp
Copy code
await hubConnection.SendAsync("UploadStocks", GetStocksAsync());

Tato metoda zavolá serverovou metodu, která přijme stream akciových kódů generovaných asynchronně. Metoda GetStocksAsync generuje náhodné čtyřpísmenné kódy akcií:

csharp
Copy code
static async IAsyncEnumerable<string> GetStocksAsync()
{
    for (int i = 0; i < 10; i++)
    {

        yield return $"{AtoZ()}{AtoZ()}{AtoZ()}{AtoZ()}";

        await Task.Delay(3000); // milliseconds
    }
}
static string AtoZ()
{
    return char.ConvertFromUtf32(Random.Shared.Next(65, 91));
}

Tato metoda generuje náhodné akciové kódy složené z čtyř písmen a odesílá je na server.

Testování klienta a serveru

Při testování si všimneme, že cena akcie se neustále aktualizuje, dokud uživatel nezruší požadavek na streamování. Tento mechanismus se dá velmi snadno upravit pro různé obchodní aplikace, kde je potřeba pravidelně přijímat data z různých zdrojů a posílat zpět na server například změny v portfoliu nebo nové obchodní nabídky.

Co by měl čtenář ještě pochopit

SignalR je velmi flexibilní nástroj pro různé scénáře reálného streamování dat, ať už se jedná o webové aplikace, mobilní klienty nebo jiné distribuované systémy. Při implementaci je však důležité mít na paměti správnou správu připojení, výběr vhodného přenosového protokolu a zajištění efektivní správy chyb, aby aplikace byla stabilní a výkonná.

Jak efektivně využít Bootstrap a Razor v moderním webovém vývoji?

Při práci s Razor syntaxí a výrazy v rámci ASP.NET Core MVC je zásadní pochopit, jakým způsobem Razor generuje HTML. Razor soubory obsahují nejen HTML značky, ale i kód, který dynamicky vytváří obsah stránky. Příklad jednoduchého Razor kódu ukazuje, jak je možné generovat hodnoty z objektů a proměnných na stránce. Pro správnou funkci je nezbytné dbát na správné používání syntaxe, především při výpočtech a generování hodnot v rámci šablon. Když například generujete cenu objednávky, je důležité wrapovat výrazy do závorek, aby Razor správně interpretoval aritmetické operace.

razor
Copy code
@{   
  Order order = new()   
  {     
    OrderId = 123,     
    Product = "Sushi",     
    Price = 8.49M,     
    Quantity = 3   
  }; 
}
Your order for @order.Quantity of @order.Product has a total cost of $@(order.Price * order.Quantity)

Pokud byste použili nesprávnou syntaxi, Razor by nesprávně vygeneroval výstup jako:

"Your order for 3 of Sushi has a total cost of $8.49 * 3", což by rozhodně neodráželo skutečnou cenu objednávky. Při použití správné syntaxe však bude výstup správně spočítaný a zobrazen jako:

"Your order for 3 of Sushi has a total cost of $25.47."

Další důležitou součástí tvorby webových rozhraní je pochopení metod HTML Helper v rámci ASP.NET Core. Tyto metody, které byly původně zavedeny v ASP.NET MVC v roce 2009, jsou stále k dispozici pro zpětnou kompatibilitu a poskytují způsob, jak generovat HTML kód programově. V moderním ASP.NET Core existují také Tag Helpers, které obvykle poskytují čistší a snadněji čitelný zápis. Tag Helpers však nejsou vždy použitelnými nástroji, například v případě Razor komponent. Mezi užitečné HTML Helper metody patří například:

• ActionLink: Pomocí této metody můžete generovat odkaz na specifikovanou akci v rámci aplikace. Tato metoda umožňuje jednoduše definovat text odkazu a URL, která bude směřovat na určitou kontrolerovou akci.

• AntiForgeryToken: Tato metoda je nezbytná pro zajištění bezpečnosti aplikace při odesílání formulářů. Pomocí ní lze vložit token proti podvrhu požadavků (CSRF), který zajistí, že data pocházejí z legitimního zdroje.

• Display a DisplayFor: Tato metoda je určena pro generování HTML značek pro zobrazení dat spojených s aktuálním modelem. Lze využít předdefinovaných šablon pro .NET typy, ale i vytvářet vlastní šablony pro zobrazení specifických dat.

• Editor a EditorFor: Metody pro generování formulářových polí na základě modelu a editorových šablon. Tyto metody jsou užitečné, když potřebujete poskytovat uživatelům možnost editace dat.

V případě, že pracujete s ASP.NET Core a Razor, je nezbytné mít také na paměti, jaký vliv na výkon může mít nesprávně optimalizovaný HTML kód. Pomalu se načítající stránky, nadbytečný JavaScript nebo neefektivní CSS mohou negativně ovlivnit uživatelskou zkušenost. To je důvod, proč je důležité se zaměřit nejen na logiku a funkčnost aplikace, ale také na optimalizaci výstupu na straně klienta. Vždy je vhodné dbát na čistotu a optimalizaci generovaného kódu.

Jak lokalizovat webovou stránku v ASP.NET Core pro různé kultury?

V předchozí kapitole jste se seznámili se základy práce s daty, časy a jejich globalizací a lokalizací v .NET. V této kapitole se zaměříme na lokalizaci webových stránek v prostředí ASP.NET Core, a to nejen pro zobrazení textových hodnot, ale i pro správnou globalizaci dat, jako jsou měny a datumy, které se mohou lišit podle geografické oblasti uživatele.

Pro začátek musíme vytvořit složku Resources v našem projektu, kde budeme uchovávat všechny související soubory pro lokalizaci. Tato složka je výchozím místem pro hledání souborů *.resx, které obsahují lokalizované hodnoty pro různé kultury.

Vytváření souborů pro lokalizaci

Pokud používáte Visual Studio 2022, vytvoření souborů je velmi jednoduché. Vytvoříme složku "Resources" a následně složku "Views" a "Home", do které přidáme soubory s lokalizovanými hodnotami pro různé jazyky. Například pro angličtinu (USA) bude soubor pojmenován Index.en-US.resx. Poté zkopírujeme tento soubor a přejmenujeme jej na Index.en-GB.resx pro britskou angličtinu a upravíme hodnoty podle potřeby. Následně přidáme soubory pro francouzštinu (Index.fr-FR.resx) a neutrální francouzštinu (Index.fr.resx).

Pokud používáte Visual Studio Code, musíte tyto soubory upravovat ručně. Příkladem mohou být následující lokalizované hodnoty:

• Company Name → Nom de l'entreprise

• Country → Pays

• Item Count → Nombre d'éléments

• Order Date → Date de commande

Tímto způsobem se vytvářejí soubory, které následně použijeme pro lokalizaci textu na stránkách.

Lokalizace Razor pohledů

Po vytvoření resx souborů je dalším krokem integrace lokalizace do Razor pohledů. K tomu použijeme službu IViewLocalizer, kterou injektujeme do našeho pohledu. V souboru Index.cshtml použijeme kód:

razor
Copy code
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer

Tímto způsobem můžeme na stránce používat lokalizované hodnoty, jako jsou názvy sloupců tabulek nebo tlačítek. Pro zajištění, že se správně načítají lokalizované hodnoty, použijeme následující konstrukci:

razor
Copy code
@ViewData["Title"] = Localizer["Orders"];

Tato metoda zajišťuje, že pro každý jazykový variant se zobrazí odpovídající lokalizovaný text.

Konfigurace lokalizace v aplikaci

Dalším krokem je konfigurace samotné aplikace pro podporu různých kultur. Tato konfigurace probíhá v souboru Program.cs, kde definujeme podporované kultury pro lokalizaci uživatelského rozhraní (UICultures) a pro globalizaci dat, jako jsou datumy nebo měny. Váš kód vypadá takto:

csharp
Copy code
string[] cultures = new[] { "en-US", "en-GB", "fr", "fr-FR" };

RequestLocalizationOptions localizationOptions = new();
localizationOptions.SetDefaultCulture(cultures[0])
    .AddSupportedCultures(cultures) // globalizace dat
    .AddSupportedUICultures(cultures); // lokalizace UI
app.UseRequestLocalization(localizationOptions);

Tato konfigurace zajistí, že aplikace bude schopna správně přizpůsobit jak uživatelské rozhraní, tak i data podle zvolené kultury.

Dynamická lokalizace na straně klienta

Pro ještě větší flexibilitu můžeme v prohlížeči uživatele nastavit jazykové preference, které ovlivní nejen vzhled aplikace, ale i formátování dat. Například prohlížeč může poslat požadavek na jazyk pomocí URL parametrů, cookies nebo HTTP hlaviček. Když prohlížeč posílá informace o preferencích, ASP.NET Core je automaticky použije k nastavení kulturního prostředí pro aktuální požadavek.

Pokud používáte Chrome, můžete změnit jazyk v nastavení a otestovat lokalizaci aplikace v různých jazycích. To vám umožní zjistit, zda se stránka správně přizpůsobuje kulturním preferencím uživatele.

Jak implementovat mezipaměť pomocí localStorage v Blazoru

Při vývoji webových komponent je jedním z důležitých aspektů efektivita práce s daty. V případě komponenty, která zobrazuje seznam zaměstnanců, může být opakovaný přístup k webové službě pro načítání dat zbytečně náročný a zdržující. V této kapitole se zaměříme na způsob, jakým můžeme implementovat jednoduchou mezipaměť s využitím localStorage, aby se data uchovávala v prohlížeči a následně znovu použila, pokud je to možné, což výrazně zlepší výkon aplikace.

Lokální úložiště a jeho možnosti

V moderních prohlížečích máme k dispozici dvě hlavní možnosti úložiště: sessionStorage a localStorage. První je omezené na aktuální záložku a aktuální sezení, což znamená, že při zavření záložky se data vymažou. Na druhou stranu, localStorage uchovává data mezi jednotlivými sezeními a záložkami, což je ideální pro uložení dat, která by měla být zachována i po opětovném otevření prohlížeče. Data jsou v obou případech uložena ve formě klíč-hodnota, kde obě složky (klíče i hodnoty) jsou typu string.

Blazor, jako webový rámec, nemá přímý přístup k těmto prohlížečovým nástrojům, což znamená, že pro manipulaci s localStorage je potřeba využít JavaScript. Tento problém řešíme pomocí interopace mezi Blazorem a JavaScriptem, kterou si ukážeme v následujících krocích.

Vytvoření služby pro práci s localStorage

Prvním krokem je vytvoření JavaScriptového modulu, který bude zajišťovat přístup k localStorage. Tento soubor umístíme do složky js v našem Blazor projektu. Vytvoříme soubor localStorageInterop.js, ve kterém definujeme několik základních funkcí pro práci s úložištěm:

javascript
Copy code
export function get(key) {

    return window.localStorage.getItem(key);
}
export function set(key, value) {
    window.localStorage.setItem(key, value);
}
export function clear() {
    window.localStorage.clear();
}
export function remove(key) {
    window.localStorage.removeItem(key);
}

Tento kód obsahuje funkce pro získání hodnoty podle klíče, uložení hodnoty, odstranění konkrétní položky a vymazání celého úložiště.

Interopace s Blazorem