Kurz: Začínáme s ASP.NET Core SignalR pomocí TypeScriptu a Webpacku

Autor : Sébastien Sougnez

Tento kurz ukazuje použití webpacku ve webové aplikaci ASP.NET Core SignalR k vytvoření balíčku a sestavení klienta napsaného v TypeScriptu. Webpack umožňuje vývojářům seskupit a sestavit prostředky na straně klienta webové aplikace.

V tomto kurzu se naučíte:

• Vytvoření aplikace ASP.NET Core SignalR
• SignalR Konfigurace serveru
• Konfigurace kanálu buildu pomocí webpacku
• Konfigurace klienta TypeScriptu SignalR
• Povolení komunikace mezi klientem a serverem

Zobrazení nebo stažení ukázkového kódu (postup stažení)

Požadavky

• Node.js s npm

Visual Studio

• Sada Visual Studio 2022 se sadou funkcí Vývoj pro ASP.NET a web

  

Visual Studio Code

• Visual Studio Code
• Jazyk C# pro Visual Studio Code (nejnovější verze)
• Sada .NET 8.0 SDK

V pokynech pro Visual Studio Code se pro vývojové funkce ASP.NET Core, jako je vytvoření projektu, používá .NET CLI. Podle těchto pokynů můžete postupovat v systému macOS, Linux nebo Windows a v jakémkoli editoru kódu. Pokud použijete jiný editor než Visual Studio Code, možná budete muset provést menší změny.

Vytvoření webové aplikace ASP.NET Core

Visual Studio

Visual Studio ve výchozím nastavení používá verzi npm nalezenou v instalačním adresáři. Konfigurace sady Visual Studio tak, aby hledala npm v PATH proměnné prostředí:

Spusťte Visual Studio. V úvodním okně vyberte Pokračovat bez kódu.

1. Přejděte na Možnosti>nástrojů>Projekty a řešení>Pro správu>webových balíčků Externí webové nástroje.

2. $(PATH) Vyberte položku ze seznamu. Výběrem šipky nahoru přesuňte položku na druhou pozici v seznamu a vyberte OK:

   .

Vytvoření nové webové aplikace ASP.NET Core:

1. Použijte možnost Nabídky Nový>projekt Soubor>a zvolte šablonu ASP.NET Prázdné jádro. Vyberte Další.
2. Pojmenujte projekt SignalRWebpacka vyberte Vytvořit.
3. V rozevíracím seznamu Framework vyberte .NET 8.0 (dlouhodobá podpora). Vyberte Vytvořit.

Přidejte do projektu balíček NuGet Microsoft.TypeScript.MSBuild :

1. V Průzkumník řešení klikněte pravým tlačítkem na uzel projektu a vyberte Spravovat balíčky NuGet. Na kartě Procházet vyhledejteMicrosoft.TypeScript.MSBuild a pak vyberte Nainstalovat napravo, abyste balíček nainstalovali.

Visual Studio přidá balíček NuGet do uzlu Závislosti v Průzkumník řešení a povolí kompilaci TypeScriptu v projektu.

Visual Studio Code

V integrovaném terminálu spusťte následující příkazy:

dotnet new web -o SignalRWebpack
code -r SignalRWebpack

• Příkaz dotnet new vytvoří prázdnou webovou aplikaci ASP.NET Core v SignalRWebpack adresáři.
• Příkaz code otevře SignalRWebpack adresář v aktuální instanci editoru Visual Studio Code.

Visual Studio Code může zobrazit dialogové okno s dotazem: Důvěřujete autorům souborů v této složce?

• Pokud důvěřujete všem souborům v nadřazené složce, vyberte Možnost Důvěřovat autorům všech souborů v nadřazené složce.
• Vyberte Ano, autorům důvěřuji, protože složka projektu obsahuje soubory generované rozhraním .NET.
• Když Visual Studio Code požádá o přidání prostředků pro sestavení a ladění projektu, vyberte Ano. Pokud Visual Studio Code nenabízí přidání prostředků sestavení a ladění, vyberte Zobrazit>paletu příkazů a do vyhledávacího pole zadejte ".NET". V seznamu příkazů vyberte .NET: Generate Assets for Build and Debug příkaz.

Visual Studio Code přidá .vscode složku s vygenerovanými launch.json soubory a tasks.json soubory.

V integrovaném terminálu spusťte následující příkaz rozhraní příkazového řádku .NET:

dotnet add package Microsoft.TypeScript.MSBuild

Předchozí příkaz přidá balíček Microsoft.TypeScript.MSBuild , který v projektu povolí kompilaci TypeScriptu.

Konfigurace serveru

V této části nakonfigurujete webovou aplikaci ASP.NET Core tak, aby odesílala a přijímala SignalR zprávy.

1. AddSignalRVolání Program.cs:

   var builder = WebApplication.CreateBuilder(args);
   
   builder.Services.AddSignalR();
   

2. Znovu, v Program.cs, zavolat UseDefaultFiles a UseStaticFiles:

   var app = builder.Build();
   
   app.UseDefaultFiles();
   app.UseStaticFiles();
   

   Předchozí kód umožňuje serveru vyhledat a obsluhovat index.html soubor. Soubor se obsluhuje bez ohledu na to, jestli uživatel zadá úplnou adresu URL nebo kořenovou adresu URL webové aplikace.

3. Vytvořte nový adresář pojmenovaný Hubs v kořenovém adresáři SignalRWebpack/projektu , pro SignalR třídu centra.

4. Vytvořte nový soubor Hubs/ChatHub.css následujícím kódem:

   using Microsoft.AspNetCore.SignalR;
   
   namespace SignalRWebpack.Hubs;
   
   public class ChatHub : Hub
   {
       public async Task NewMessage(long username, string message) =>
           await Clients.All.SendAsync("messageReceived", username, message);
   }
   

   Předchozí kód vysílá přijaté zprávy všem připojeným uživatelům, jakmile je server přijme. Není nutné mít obecnou on metodu pro příjem všech zpráv. Stačí metoda pojmenovaná po názvu zprávy.

   V tomto příkladu:

   • Klient TypeScriptu odešle zprávu identifikovanou jako newMessage.
   • Metoda C# NewMessage očekává, že data odesílaná klientem.
   • U klientů se provede SendAsyncvolání.
   • Přijaté zprávy se odesílají všem klientům připojeným k centru.

5. Na začátek Program.csChatHub odkazu přidejte následující using příkaz:

   using SignalRWebpack.Hubs;
   

6. Namapujte Program.cstrasu /hubChatHub do centra. Nahraďte kód, který se zobrazí Hello World! , následujícím kódem:

   app.MapHub<ChatHub>("/hub");
   

Konfigurace klienta

V této části vytvoříte projekt Node.js , který pomocí Webpacku převede TypeScript na JavaScript a spojí prostředky na straně klienta, včetně HTML a CSS.

1. Spuštěním následujícího příkazu v kořenovém adresáři projektu vytvořte package.json soubor:

   npm init -y
   

2. Přidejte zvýrazněnou vlastnost do package.json souboru a uložte změny souboru:

   {
     "name": "SignalRWebpack",
     "version": "1.0.0",
     "private": true,
     "description": "",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
     "author": "",
     "license": "ISC"
   }
   

   private Nastavením vlastnosti zabráníte true upozorněním instalace balíčku v dalším kroku.

3. Nainstalujte požadované balíčky npm. V kořenovém adresáři projektu spusťte následující příkaz:

   npm i -D -E clean-webpack-plugin css-loader html-webpack-plugin mini-css-extract-plugin ts-loader typescript webpack webpack-cli
   

   Tato -E možnost zakáže výchozí chování sémantických operátorů rozsahu verzí npm do package.json. "webpack": "5.76.1" Například se používá místo "webpack": "^5.76.1". Tato možnost zabraňuje nezamýšleným upgradům na novější verze balíčků.

   Další informace najdete v dokumentaci k npm-install .

4. scripts Vlastnost package.json souboru nahraďte následujícím kódem:

   "scripts": {
     "build": "webpack --mode=development --watch",
     "release": "webpack --mode=production",
     "publish": "npm run release && dotnet publish -c Release"
   },
   

   Jsou definovány následující skripty:

   • build: Sváže prostředky na straně klienta v režimu vývoje a sleduje změny souborů. Sledovací proces souboru způsobí, že se sada znovu vygeneruje při každé změně souboru projektu. Tato mode možnost zakáže optimalizace produkce, jako je například roztřesení stromu a minifikace. používejte build pouze ve vývoji.
   • release: Sváže prostředky na straně klienta v produkčním režimu.
   • publish: Spustí release skript pro sbalování prostředků na straně klienta v produkčním režimu. Zavolá příkaz pro publikování rozhraní příkazového řádku .NET CLI, který aplikaci publikuje.

5. V kořenovém adresáři projektu vytvořte soubor webpack.config.js s následujícím kódem:

   const path = require("path");
   const HtmlWebpackPlugin = require("html-webpack-plugin");
   const { CleanWebpackPlugin } = require("clean-webpack-plugin");
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   
   module.exports = {
       entry: "./src/index.ts",
       output: {
           path: path.resolve(__dirname, "wwwroot"),
           filename: "[name].[chunkhash].js",
           publicPath: "/",
       },
       resolve: {
           extensions: [".js", ".ts"],
       },
       module: {
           rules: [
               {
                   test: /\.ts$/,
                   use: "ts-loader",
               },
               {
                   test: /\.css$/,
                   use: [MiniCssExtractPlugin.loader, "css-loader"],
               },
           ],
       },
       plugins: [
           new CleanWebpackPlugin(),
           new HtmlWebpackPlugin({
               template: "./src/index.html",
           }),
           new MiniCssExtractPlugin({
               filename: "css/[name].[chunkhash].css",
           }),
       ],
   };
   

   Předchozí soubor konfiguruje proces kompilace Webpacku:

   • Vlastnost output přepíše výchozí hodnotu dist. Sada se místo toho vygeneruje v adresáři wwwroot .
   • Pole resolve.extensions zahrnuje .js import klientského JavaScriptu SignalR .

6. Vytvořte nový adresář pojmenovaný src v kořenovém adresáři SignalRWebpack/projektu pro kód klienta.

7. src Zkopírujte adresář a jeho obsah z ukázkového projektu do kořenového adresáře projektu. Adresář src obsahuje následující soubory:

   • index.html, který definuje často používané značky domovské stránky:

     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="utf-8" />
         <title>ASP.NET Core SignalR with TypeScript and Webpack</title>
       </head>
       <body>
         <div id="divMessages" class="messages"></div>
         <div class="input-zone">
           <label id="lblMessage" for="tbMessage">Message:</label>
           <input id="tbMessage" class="input-zone-input" type="text" />
           <button id="btnSend">Send</button>
         </div>
       </body>
     </html>
     

   • css/main.css, který poskytuje styly CSS pro domovskou stránku:

     *,
     *::before,
     *::after {
       box-sizing: border-box;
     }
     
     html,
     body {
       margin: 0;
       padding: 0;
     }
     
     .input-zone {
       align-items: center;
       display: flex;
       flex-direction: row;
       margin: 10px;
     }
     
     .input-zone-input {
       flex: 1;
       margin-right: 10px;
     }
     
     .message-author {
       font-weight: bold;
     }
     
     .messages {
       border: 1px solid #000;
       margin: 10px;
       max-height: 300px;
       min-height: 300px;
       overflow-y: auto;
       padding: 5px;
     }
     

   • tsconfig.json, který konfiguruje kompilátor TypeScript tak, aby vytvořil JavaScript kompatibilní s ECMAScriptem 5:

     {
       "compilerOptions": {
         "target": "es5"
       }
     }
     

   • index.ts:

     import * as signalR from "@microsoft/signalr";
     import "./css/main.css";
     
     const divMessages: HTMLDivElement = document.querySelector("#divMessages");
     const tbMessage: HTMLInputElement = document.querySelector("#tbMessage");
     const btnSend: HTMLButtonElement = document.querySelector("#btnSend");
     const username = new Date().getTime();
     
     const connection = new signalR.HubConnectionBuilder()
         .withUrl("/hub")
         .build();
     
     connection.on("messageReceived", (username: string, message: string) => {
       const m = document.createElement("div");
     
       m.innerHTML = `<div class="message-author">${username}</div><div>${message}</div>`;
     
       divMessages.appendChild(m);
       divMessages.scrollTop = divMessages.scrollHeight;
     });
     
     connection.start().catch((err) => document.write(err));
     
     tbMessage.addEventListener("keyup", (e: KeyboardEvent) => {
       if (e.key === "Enter") {
         send();
       }
     });
     
     btnSend.addEventListener("click", send);
     
     function send() {
       connection.send("newMessage", username, tbMessage.value)
         .then(() => (tbMessage.value = ""));
     }
     

     Předchozí kód načte odkazy na elementy MODELU DOM a připojí dva obslužné rutiny událostí:

     • keyup: Aktivuje se, když uživatel zadá do textového tbMessage pole a zavolá funkci, když uživatel stiskne send klávesu Enter .
     • click: Aktivuje se, když uživatel vybere tlačítko Odeslat a zavolá funkci volání send .

     Třída HubConnectionBuilder vytvoří nového tvůrce pro konfiguraci připojení k serveru. Funkce withUrl nakonfiguruje adresu URL centra.

     SignalR umožňuje výměnu zpráv mezi klientem a serverem. Každá zpráva má konkrétní název. Například zprávy s názvem messageReceived můžou spustit logiku zodpovědnou za zobrazení nové zprávy v zóně zpráv. Naslouchání konkrétní zprávě je možné provést prostřednictvím on funkce. Můžete si poslechnout libovolný počet jmen zpráv. Do zprávy je také možné předat parametry, jako je jméno autora a obsah přijaté zprávy. Jakmile klient obdrží zprávu, vytvoří se nový div prvek s názvem autora a obsahem zprávy v jeho innerHTML atributu. Přidá se do hlavního div prvku, který zobrazuje zprávy.

     Odeslání zprávy prostřednictvím připojení WebSockets vyžaduje volání send metody. Prvním parametrem metody je název zprávy. Data zprávy obývají ostatní parametry. V tomto příkladu je zpráva označená jako newMessage odeslaná na server. Zpráva se skládá z uživatelského jména a uživatelského vstupu z textového pole. Pokud odesílání funguje, hodnota textového pole se vymaže.

8. V kořenovém adresáři projektu spusťte následující příkaz:

   npm i @microsoft/signalr @types/node
   

   Předchozí příkaz nainstaluje:

   • Klient SignalRTypeScriptu, který klientovi umožňuje odesílat zprávy na server.
   • Definice typů TypeScript pro Node.js, které umožňují kontrolu času kompilace Node.js typů.

Otestování aplikace

Ověřte, že aplikace funguje pomocí následujících kroků:

Visual Studio

1. Spusťte webpack v release režimu. V okně konzoly Správce balíčků spusťte v kořenovém adresáři projektu následující příkaz.

   npm run release
   

   Tento příkaz vygeneruje prostředky na straně klienta, které se mají obsluhovat při spuštění aplikace. Prostředky se umístí do wwwroot složky.

   Webpack dokončil následující úlohy:

   • Vyprázdnil obsah wwwroot adresáře.
   • Převeďte TypeScript na JavaScript v procesu, který se označuje jako transpilace.
   • Zmásněl vygenerovaný JavaScript, aby se zmenšila velikost souboru v procesu známém jako minifikace.
   • Zkopírovali z adresáře zpracované soubory srcwwwroot JavaScriptu, CSS a HTML.
   • Do souboru vložte následující prvky wwwroot/index.html :
     • Značka <link> odkazující na wwwroot/main.<hash>.css soubor. Tato značka se umístí bezprostředně před pravou </head> značku.
     • Značka <script> odkazující na minifikovaný wwwroot/main.<hash>.js soubor. Tato značka se umístí hned za pravou </title> značku.

2. Vyberte Spustit ladění>bez ladění a spusťte aplikaci v prohlížeči bez připojení ladicího programu. Soubor wwwroot/index.html se podává na adrese https://localhost:<port>.

   Pokud dojde k chybám kompilace, zkuste řešení zavřít a znovu otevřít.

3. Otevřete jinou instanci prohlížeče (libovolný prohlížeč) a vložte adresu URL do adresního řádku.

4. Zvolte některý z prohlížečů, zadejte něco do textového pole Zpráva a vyberte tlačítko Odeslat . Jedinečné uživatelské jméno a zpráva se okamžitě zobrazí na obou stránkách.

Visual Studio Code

1. Spuštěním následujícího příkazu v kořenovém adresáři projektu spusťte webpack v release režimu:

   npm run release
   

   Tento příkaz vygeneruje prostředky na straně klienta, které se mají obsluhovat při spuštění aplikace. Prostředky se umístí do wwwroot složky.

   Webpack dokončil následující úlohy:

   • Vyprázdnil obsah wwwroot adresáře.
   • Převeďte TypeScript na JavaScript v procesu, který se označuje jako transpilace.
   • Zmásněl vygenerovaný JavaScript, aby se zmenšila velikost souboru v procesu známém jako minifikace.
   • Zkopírovali z adresáře zpracované soubory srcwwwroot JavaScriptu, CSS a HTML.
   • Do souboru vložte následující prvky wwwroot/index.html :
     • Značka <link> odkazující na wwwroot/main.<hash>.css soubor. Tato značka se umístí bezprostředně před pravou </head> značku.
     • Značka <script> odkazující na minifikovaný wwwroot/main.<hash>.js soubor. Tato značka se umístí hned za pravou </title> značku.

2. Sestavte a spusťte aplikaci spuštěním následujícího příkazu v kořenovém adresáři projektu:

   dotnet run
   

   Webový server spustí aplikaci a zpřístupní ji na místním hostiteli.

3. Otevřete prohlížeč.https://localhost:<port> Soubor wwwroot/index.html se obsluhuje. Zkopírujte adresu URL z panelu adresy.

4. Otevřete jinou instanci prohlížeče (jakýkoli prohlížeč). Vložte adresu URL do adresního řádku.

5. Zvolte některý z prohlížečů, zadejte něco do textového pole Zpráva a vyberte tlačítko Odeslat . Jedinečné uživatelské jméno a zpráva se okamžitě zobrazí na obou stránkách.

Další kroky

• Rozbočovače silného typu
• Ověřování a autorizace v ASP.NET Core SignalR
• Protokol centra MessagePack pro SignalR ASP.NET Core

Další materiály

• ASP.NET Core SignalR JavaScript client
• Použití center v ASP.NET Core SignalR