Tutorial: Aan de slag met ASP.NET Core SignalR met TypeScript en Webpack

Door Sébastien Sougnez

Deze zelfstudie laat zien hoe u Webpack gebruikt in een ASP.NET Core-web-app SignalR om een client te bundelen en te bouwen die is geschreven in TypeScript. Met Webpack kunnen ontwikkelaars de resources aan de clientzijde van een web-app bundelen en bouwen.

In deze handleiding leer je hoe je:

• Een ASP.NET Core-app SignalR maken
• De SignalR server configureren
• Een build-pijplijn configureren met behulp van Webpack
• De SignalR TypeScript-client configureren
• Communicatie tussen de client en de server inschakelen

Voorbeeldcode bekijken of downloaden (hoe download je)

Vereiste voorwaarden

• Node.js met npm

Visual Studio

• Visual Studio 2022 met de workload voor ASP.NET en webontwikkeling.

  

Visual Studio Code

• Visual Studio Code
• C# voor Visual Studio Code (nieuwste versie)
• .NET 8 SDK

De Visual Studio Code-instructies maken gebruik van de .NET CLI voor ASP.NET Core-ontwikkelfuncties, zoals het maken van een project. U kunt deze instructies volgen in macOS, Linux of Windows en met elke code-editor. Er zijn mogelijk kleine wijzigingen vereist als u iets anders dan Visual Studio Code gebruikt.

De ASP.NET Core-web-app maken

Visual Studio

Visual Studio gebruikt standaard de versie van npm die in de installatiemap is gevonden. Visual Studio configureren om te zoeken naar npm in de PATH omgevingsvariabele:

Start Visual Studio. Selecteer Doorgaan zonder code in het startvenster.

1. Navigeer naar Hulpprogramma's>Opties>Projecten en Oplossingen>Webpakketbeheer>Externe Webhulpprogramma's.

2. Selecteer de $(PATH) vermelding in de lijst. Selecteer de pijl-omhoog om de vermelding naar de tweede positie in de lijst te verplaatsen en selecteer OK:

   .

Een nieuwe ASP.NET Core-web-app maken:

1. Gebruik de menuoptie Bestand>Nieuw>Project en kies de ASP.NET Core Empty sjabloon. Kies Volgende.
2. Geef het project SignalRWebpackeen naam en selecteer Maken.
3. Selecteer .NET 8.0 (Langetermijnondersteuning) in de vervolgkeuzelijst Framework . Klik op Creëren.

Voeg het Microsoft.TypeScript.MSBuild NuGet-pakket toe aan het project:

1. Klik in Solution Explorer met de rechtermuisknop op het projectknooppunt en selecteer NuGet-pakketten beheren. Zoek op het tabblad Bladeren naar Microsoft.TypeScript.MSBuild en selecteer Vervolgens Installeren aan de rechterkant om het pakket te installeren.

Visual Studio voegt het NuGet-pakket toe onder het knooppunt Afhankelijkheden in Solution Explorer, waardoor TypeScript-compilatie in het project wordt ingeschakeld.

Visual Studio Code

Voer de volgende opdrachten uit in de geïntegreerde terminal:

dotnet new web -o SignalRWebpack
code -r SignalRWebpack

• Met de dotnet new opdracht maakt u een lege ASP.NET Core-web-app in een SignalRWebpack map.
• Met code de opdracht wordt de SignalRWebpack map geopend in het huidige exemplaar van Visual Studio Code.

Visual Studio Code kan een dialoogvenster weergeven waarin u wordt gevraagd: Vertrouwt u de auteurs van de bestanden in deze map?

• Als u alle bestanden in de bovenliggende map vertrouwt, selecteer dan Vertrouw de auteurs van alle bestanden in de bovenliggende map.
• Selecteer Ja, ik vertrouw de auteurs omdat de projectmap bestanden bevat die zijn gegenereerd door .NET.
• Wanneer Visual Studio Code aanvraagt dat u assets toevoegt om het project te bouwen en fouten op te sporen, selecteert u Ja. Als Visual Studio Code geen build- en foutopsporingsassets kan toevoegen, selecteert uOpdrachtpalet> en typt u '.NET' in het zoekvak. Selecteer in de lijst met opdrachten de opdracht .NET: Generate Assets for Build and Debug.

Visual Studio Code voegt een .vscode map toe met gegenereerde launch.json- en tasks.json-bestanden.

Voer de volgende .NET CLI-opdracht uit in de geïntegreerde terminal:

dotnet add package Microsoft.TypeScript.MSBuild

Met de voorgaande opdracht wordt het Microsoft.TypeScript.MSBuild-pakket toegevoegd, waardoor TypeScript-compilatie in het project wordt ingeschakeld.

De server configureren

In deze sectie configureert u de ASP.NET Core-web-app voor het verzenden en ontvangen van SignalR berichten.

1. In Program.cs, AddSignalR bellen:

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

2. Nogmaals, in Program.cs, roep UseDefaultFiles en UseStaticFiles op:

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

   Met de voorgaande code kan de server het index.html bestand zoeken en verwerken. Het bestand wordt geleverd, ongeacht of de gebruiker de volledige URL of de hoofd-URL van de web-app invoert.

3. Maak een nieuwe map met de naam Hubs in de hoofdmap SignalRWebpack/van het project, voor de SignalR hubklasse.

4. Maak een nieuw bestand Hubs/ChatHub.csmet de volgende code:

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

   Met de voorgaande code worden ontvangen berichten verzonden naar alle verbonden gebruikers zodra de server ze ontvangt. Het is niet nodig om een algemene on methode te hebben om alle berichten te ontvangen. Een methode met de naam van het bericht is voldoende.

   In dit voorbeeld:

   • De TypeScript-client verzendt een bericht dat is geïdentificeerd als newMessage.
   • De C# NewMessage -methode verwacht de gegevens die door de client worden verzonden.
   • Er wordt een aanroep gedaan op SendAsyncClients.All.
   • De ontvangen berichten worden verzonden naar alle clients die zijn verbonden met de hub.

5. Voeg de volgende using instructie toe bovenaan Program.cs om de ChatHub verwijzing op te lossen:

   using SignalRWebpack.Hubs;
   

6. Koppel Program.cs de /hub route aan de ChatHub hub. Vervang de code die wordt weergegeven Hello World! door de volgende code:

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

De client configureren

In deze sectie maakt u een Node.js project om TypeScript te converteren naar JavaScript en resources aan de clientzijde, inclusief HTML en CSS, te bundelen met behulp van Webpack.

1. Voer de volgende opdracht uit in de hoofdmap van het project om een package.json bestand te maken:

   npm init -y
   

2. Voeg de gemarkeerde eigenschap toe aan het package.json bestand en sla de bestandswijzigingen op:

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

   Het instellen van de private-eigenschap op true voorkomt pakketinstallatiewaarschuwingen in de volgende stap.

3. Installeer de vereiste npm-pakketten. Voer de volgende opdracht uit vanuit de hoofdmap van het project:

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

   De -E optie schakelt het standaardgedrag van npm uit van het schrijven van semantische versiebeheerbereikoperators naar package.json. Wordt bijvoorbeeld "webpack": "5.76.1" gebruikt in plaats van "webpack": "^5.76.1". Met deze optie voorkomt u onbedoelde upgrades naar nieuwere pakketversies.

   Zie de npm-install-documentatie voor meer informatie.

4. Vervang de scripts eigenschap van het package.json bestand door de volgende code:

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

   De volgende scripts zijn gedefinieerd:

   • build: bundelt de resources aan de clientzijde in de ontwikkelmodus en kijkt naar bestandswijzigingen. De file watcher zorgt ervoor dat de bundel telkens opnieuw wordt gegenereerd wanneer een projectbestand wordt gewijzigd. De mode optie schakelt productieoptimalisaties uit, zoals boomschudden en minificatie. gebruik build alleen voor ontwikkeling.
   • release: Bundelt de bronnen aan de klantzijde in de productiemodus.
   • publish: voert het release script uit om de resources aan de clientzijde te bundelen in de productiemodus. Hiermee wordt de opdracht publiceren van de .NET CLI aanroepen om de app te publiceren.

5. Maak een bestand met de naam webpack.config.js in de hoofdmap van het project, met de volgende code:

   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",
           }),
       ],
   };
   

   Het voorgaande bestand configureert het compilatieproces webpack:

   • De output eigenschap overschrijft de standaardwaarde van dist. De bundel wordt in plaats daarvan geëmitteerd in de wwwroot map.
   • De resolve.extensions array omvat .js om de SignalR JavaScript-client te importeren.

6. Maak een nieuwe map met de naam src in de hoofdmap SignalRWebpack/van het project, voor de clientcode.

7. Kopieer de src map en de inhoud van het voorbeeldproject naar de hoofdmap van het project. De src map bevat de volgende bestanden:

   • index.html, waarmee de standaardmarkeringen van de startpagina worden gedefinieerd:

     <!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, die CSS-stijlen biedt voor de startpagina:

     *,
     *::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, waarmee de TypeScript-compiler wordt geconfigureerd voor het produceren van ECMAScript 5-compatibele JavaScript:

     {
       "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 = ""));
     }
     

     Met de voorgaande code worden verwijzingen naar DOM-elementen opgehaald en worden twee gebeurtenis-handlers gekoppeld:

     • keyup: wordt geactiveerd wanneer de gebruiker in het tbMessage tekstvak typt en de send functie aanroept wanneer de gebruiker op de Enter-toets drukt.
     • click: wordt geactiveerd wanneer de gebruiker de knop Verzenden selecteert en de functie Aanroepen send wordt aangeroepen.

     De HubConnectionBuilder klasse maakt een nieuwe opbouwfunctie voor het configureren van de serververbinding. De withUrl functie configureert de hub-URL.

     SignalR schakelt de uitwisseling van berichten tussen een client en een server in. Elk bericht heeft een specifieke naam. Berichten met de naam messageReceived kunnen bijvoorbeeld de logica uitvoeren die verantwoordelijk is voor het weergeven van het nieuwe bericht in de berichtenzone. Luisteren naar een specifiek bericht kan via de on functie. Er kan naar een willekeurig aantal berichtnamen worden geluisterd. Het is ook mogelijk om parameters door te geven aan het bericht, zoals de naam van de auteur en de inhoud van het ontvangen bericht. Zodra de client een bericht ontvangt, wordt er een nieuw div element gemaakt met de naam van de auteur en de inhoud van het bericht in het innerHTML kenmerk. Het wordt toegevoegd aan het hoofdelement div dat de berichten weergeeft.

     Voor het verzenden van een bericht via de WebSockets-verbinding moet je de send-methode aanroepen. De eerste parameter van de methode is de naam van het bericht. De berichtgegevens bevinden zich binnen de andere parameters. In dit voorbeeld wordt een bericht dat is geïdentificeerd als newMessage verzonden naar de server. Het bericht bestaat uit de gebruikersnaam en de gebruikersinvoer uit een tekstvak. Als het verzenden werkt, wordt de waarde van het tekstvak gewist.

8. Voer de volgende opdracht uit in de hoofdmap van het project:

   npm i @microsoft/signalr @types/node
   

   Met de voorgaande opdracht wordt het volgende geïnstalleerd:

   • De SignalR TypeScript-client, waarmee de client berichten naar de server kan verzenden.
   • De TypeScript-type-definities voor Node.js, waarmee compile-tijduitvoering van Node.js-typen mogelijk wordt gemaakt.

De app testen

Controleer of de app werkt met de volgende stappen:

Visual Studio

1. Voer Webpack uit in release de modus. Voer de volgende opdracht uit in de hoofdmap van het project via het venster Package Manager Console.

   npm run release
   

   Met deze opdracht worden de client-side assets gegenereerd die geleverd worden bij het uitvoeren van de app. De assets worden in de wwwroot map geplaatst.

   Webpack heeft de volgende taken voltooid:

   • De inhoud van de wwwroot map is leeggemaakt.
   • Het TypeScript geconverteerd naar JavaScript in een proces dat transpilatie wordt genoemd.
   • Het gegenereerde JavaScript beheren om de bestandsgrootte te verkleinen in een proces dat minificatie wordt genoemd.
   • De verwerkte JavaScript-, CSS- en HTML-bestanden gekopieerd van src naar de wwwroot map.
   • De volgende elementen zijn opgenomen in het wwwroot/index.html bestand:
     • Een <link> tag, die verwijst naar het wwwroot/main.<hash>.css bestand. Deze tag wordt direct vóór de afsluitende </head> tag geplaatst.
     • Een <script> tag, die verwijst naar het minified-bestand wwwroot/main.<hash>.js . Deze tag wordt direct na de afsluitende </title> tag geplaatst.

2. Selecteer Foutopsporing>starten zonder foutopsporing om de app in een browser te starten zonder het foutopsporingsprogramma te koppelen. Het wwwroot/index.html bestand wordt opgeslagen op https://localhost:<port>.

   Als er compilatiefouten zijn, sluit u de oplossing en opent u deze opnieuw.

3. Open een andere browsersessie (om het even welke browser) en plak de URL in de adresbalk.

4. Kies een van beide browsers, typ iets in het tekstvak Bericht en selecteer de knop Verzenden . De unieke gebruikersnaam en het unieke bericht worden direct op beide pagina's weergegeven.

Visual Studio Code

1. Voer Webpack uit in de release modus met het volgende commando in de hoofdmap van het project:

   npm run release
   

   Met deze opdracht worden de client-side assets gegenereerd die geleverd worden bij het uitvoeren van de app. De assets worden in de wwwroot map geplaatst.

   Webpack heeft de volgende taken voltooid:

   • De inhoud van de wwwroot map is leeggemaakt.
   • Het TypeScript geconverteerd naar JavaScript in een proces dat transpilatie wordt genoemd.
   • Het gegenereerde JavaScript beheren om de bestandsgrootte te verkleinen in een proces dat minificatie wordt genoemd.
   • De verwerkte JavaScript-, CSS- en HTML-bestanden gekopieerd van src naar de wwwroot map.
   • De volgende elementen zijn opgenomen in het wwwroot/index.html bestand:
     • Een <link> tag, die verwijst naar het wwwroot/main.<hash>.css bestand. Deze tag wordt direct vóór de afsluitende </head> tag geplaatst.
     • Een <script> tag, die verwijst naar het minified-bestand wwwroot/main.<hash>.js . Deze tag wordt direct na de afsluitende </title> tag geplaatst.

2. Bouw en voer de app uit door de volgende opdracht uit te voeren in de hoofdmap van het project:

   dotnet run
   

   De webserver start de app en maakt deze beschikbaar op localhost.

3. Open een browser en ga naar https://localhost:<port>. Het wwwroot/index.html bestand wordt geleverd. Kopieer de URL van de adresbalk.

4. Open een andere browserinstantie (elke browser). Plak de URL in de adresbalk.

5. Kies een van beide browsers, typ iets in het tekstvak Bericht en selecteer de knop Verzenden . De unieke gebruikersnaam en het unieke bericht worden direct op beide pagina's weergegeven.

Volgende stappen

• Sterk getypeerde hubs
• Verificatie en autorisatie in ASP.NET Core SignalR
• MessagePack Hub Protocol in SignalR voor ASP.NET Core

Aanvullende bronnen

• ASP.NET Core SignalR JavaScript-client
• Hubs gebruiken in ASP.NET Core SignalR