použití ASP.NET Core SignalR s TypeScript a webpackem

  • Článek
  • 9 min ke čtení

Od Sébastien Sougnez a Scott Addie

Webpack umožňuje vývojářům seskupit a sestavit prostředky webové aplikace na straně klienta. tento kurz ukazuje použití webpacku ve ASP.NET Core SignalR webové aplikaci, jejíž klient je napsaný v TypeScript.

V tomto kurzu se naučíte:

  • uživatelské rozhraní aplikace úvodní ASP.NET Core SignalR
  • Konfigurace SignalR klienta TypeScript
  • Konfigurace kanálu sestavení pomocí webpacku
  • Konfigurace SignalR serveru
  • Povolit komunikaci mezi klientem a serverem

Zobrazit nebo stáhnout ukázkový kód (Jak stáhnout)

Požadavky

vytvoření webové aplikace v ASP.NET Core

nakonfigurujte Visual Studio pro hledání npm v proměnné prostředí PATH . ve výchozím nastavení Visual Studio používá verzi npm nalezenou v instalačním adresáři. Postupujte podle těchto pokynů v Visual Studio:

  1. Spusťte Visual Studio. V okně Start vyberte pokračovat bez kódu.

  2. Přejděte na nástroje > Možnosti > projekty a řešení > Web Správa balíčků > externích webových nástrojů.

  3. Ze seznamu vyberte položku $ (cesta) . Kliknutím na šipku nahoru přesuňte položku do druhé pozice v seznamu a vyberte OK.

    Visual Studio Rozšířeného

konfigurace Visual Studio je dokončená.

  1. použijte možnost soubor > nový > Project a vyberte šablonu webové aplikace ASP.NET Core . Vyberte Další.
  2. Pojmenujte projekt SignalR Webpack a vyberte vytvořit.
  3. v rozevíracím seznamu cílové rozhraní vyberte .net Core a v rozevíracím seznamu rozhraní vyberte ASP.NET Core 3,1 . Vyberte prázdnou šablonu a vyberte vytvořit.

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

  1. v Průzkumník řešení (pravé podokno) klikněte pravým tlačítkem myši na uzel projektu a vyberte možnost spravovat balíčky NuGet. Na kartě Procházet vyhledejte Microsoft.TypeScript.MSBuild a kliknutím na nainstalovat napravo nainstalujte balíček.

Visual Studio přidá balíček NuGet pod uzel závislosti v Průzkumník řešení a povolí kompilaci TypeScript v projektu.

Konfigurace sady Webpack a TypeScriptu

Následující postup nakonfiguruje převod TypeScript na JavaScript a sdružování prostředků na straně klienta.

  1. Spusťte následující příkaz v kořenovém adresáři projektu a vytvořte package.jsv souboru:

    npm init -y

  2. Přidejte zvýrazněnou vlastnost do package.jsv 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"
}

    Nastavení private vlastnosti tak, aby se true zabránilo upozorněním na instalaci 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@3.0.0 css-loader@3.4.2 html-webpack-plugin@3.2.0 mini-css-extract-plugin@0.9.0 ts-loader@6.2.1 typescript@3.7.5 webpack@4.41.5 webpack-cli@3.3.10

    Některé podrobnosti příkazu si všimněte:

    • Číslo verze následuje po @ znaménku pro každý název balíčku. NPM nainstaluje tyto konkrétní verze balíčku.
    • -EMožnost zakáže výchozí chování npm při psaní operátorů rozsahu sémantických verzí do package.js. Například "webpack": "4.41.5" je použit místo "webpack": "^4.41.5" . Tato možnost zabrání nezamýšleným upgradům na novější verze balíčků.

    Další podrobnosti najdete v tématu npm-Install docs.

  4. Nahraďte scripts vlastnost package.jsv souboru následujícím kódem:

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

    Některé vysvětlení skriptů:

    • build: Rozbalí prostředky na straně klienta v režimu vývoje a sleduje změny souborů. Sledovací proces souboru způsobí, že se sada znovu generuje při každém změně souboru projektu. modeMožnost zakáže optimalizace produkčního prostředí, jako je například protřepání stromu a minifikace. Používejte pouze build ve vývoji.
    • release: Rozbalí prostředky na straně klienta v provozním režimu.
    • publish: Spustí release skript, který bude seskupit prostředky na straně klienta v provozním režimu. Volá příkaz publish .NET Core CLI k publikování aplikace.

  5. V kořenovém adresáři projektu vytvořte soubor s názvem 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 nakonfiguruje kompilaci sady Webpack. Některé podrobnosti konfigurace k poznámení:

    • outputVlastnost přepisuje výchozí hodnotu DIST. Místo toho se svazek vydává v adresáři wwwroot .
    • resolve.extensionsPole obsahuje .js pro import SignalR klientského JavaScriptu.

  6. Vytvořte nový zdrojový adresář v kořenovém adresáři projektu pro uložení prostředků na straně klienta v projektu.

  7. Pomocí následujícího kódu vytvořte Src/index.html .

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ASP.NET Core SignalR</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>

    Předchozí kód HTML definuje standardní kód domovské stránky.

  8. Vytvořte nový adresář Src/CSS . Jeho účelem je uložit soubory . CSS projektu.

  9. Vytvořte Src/CSS/Main. CSS s následujícími šablonami stylů CSS:

    *, *::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;
}

    Předchozí hlavní soubor. CSS styly aplikace.

  10. Pomocí následujícího formátu JSON vytvořte Src/tsconfig.js :

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

    Předchozí kód nakonfiguruje kompilátor TypeScript, aby vytvořil JavaScript kompatibilní s ECMAScript 5.

  11. Vytvořte Src/index. TS s následujícím kódem:

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

tbMessage.addEventListener("keyup", (e: KeyboardEvent) => {
    if (e.key === "Enter") {
        send();
    }
});

btnSend.addEventListener("click", send);

function send() {
}

    Předchozí TypeScript načte odkazy na elementy modelu DOM a připojí dvě obslužné rutiny událostí:

    • keyup: Tato událost se aktivuje při uživatelském typu v tbMessage textovém poli. sendFunkce se volá, když uživatel stiskne klávesu ENTER .
    • click: Tato událost se aktivuje, když uživatel klikne na tlačítko Odeslat . Volá se funkce send.

Konfigurace aplikace

  1. V Startup.Configure přidejte volání do UseDefaultFiles a UseStaticFiles.

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    
    app.UseRouting();
    app.UseDefaultFiles();
    app.UseStaticFiles();
    
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<ChatHub>("/hub");
    });
        
}

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

  2. Na konci Startup.Configure namapujte cestu /hub k ChatHub centru. Nahraďte kód, který se zobrazí Hello World! s následujícím řádkem:

    app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<ChatHub>("/hub");
});

  3. V Startup.ConfigureServices zavolejte Přidat SignalR .

    services.AddSignalR();

  4. V kořenovém adresáři projektu vytvořte nový adresář s názvem Hubs SignalR a uložte ho SignalR .

  5. Vytvořte centra rozbočovačů /ChatHub. cs s následujícím kódem:

    using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRWebPack.Hubs
{
    public class ChatHub : Hub
    {
    }
}

  6. usingDo horní části souboru Startup. cs přidejte následující příkaz pro vyřešení ChatHub odkazu:

    using SignalRWebPack.Hubs;

Povolit komunikaci klienta a serveru

Aplikace aktuálně zobrazuje základní formulář pro posílání zpráv, ale ještě není funkční. Server naslouchá konkrétní trase, ale neprovádí žádnou akci s odeslanými zprávami.

  1. Spusťte následující příkaz v kořenu projektu:

    npm i @microsoft/signalr @types/node

    Předchozí příkaz nainstaluje:

    • SignalR Klient TypeScript, který umožňuje klientovi odesílat zprávy na server.
    • Definice typu TypeScript pro Node.js, které umožňují kontrolu Node.js typů při kompilaci.

  2. Přidejte zvýrazněný kód do souboru Src/index. TS :

    import "./css/main.css";
import * as signalR from "@microsoft/signalr";

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) => {
    let 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() {
}

    Předchozí kód podporuje příjem zpráv ze serveru. HubConnectionBuilderTřída vytvoří nového tvůrce pro konfiguraci připojení k serveru. withUrlFunkce nakonfiguruje adresu URL centra.

    SignalR povolí 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 mohou spustit logiku odpovědnou za zobrazení nové zprávy v zóně zprávy. Naslouchat konkrétní zprávě se dá provést prostřednictvím on funkce. Na je možné naslouchat libovolný počet názvů zpráv. Je také možné předat parametry do zprávy, jako je například 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. Je přidána do hlavního div prvku zobrazujícího zprávy.

  3. Teď, když klient může obdržet zprávu, ji nakonfiguruje k odesílání zpráv. Přidejte zvýrazněný kód do souboru Src/index. TS :

    import "./css/main.css";
import * as signalR from "@microsoft/signalr";

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) => {
    let messages = document.createElement("div");

    messages.innerHTML =
        `<div class="message-author">${username}</div><div>${message}</div>`;

    divMessages.appendChild(messages);
    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 = "");
}

    Odeslání zprávy prostřednictvím připojení WebSockets vyžaduje volání send metody. První parametr metody je název zprávy. Data zprávy jsou v ostatních parametrech nezvyklá. V tomto příkladu se zobrazí zpráva, která je označena jako newMessage Odeslaná na server. Zpráva se skládá z uživatelského jména a vstupu uživatele z textového pole. Pokud funkce Send funguje, hodnota textového pole se nevymaže.

  4. Do třídy ChatHub přidejte metodu NewMessage:

    using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRWebPack.Hubs
{
    public class ChatHub : Hub
    {
        public async Task NewMessage(long username, string message)
        {
            await Clients.All.SendAsync("messageReceived", username, message);
        }
    }
}

    Předchozí vysílání kódu přijalo zprávy všem připojeným uživatelům, jakmile je server obdrží. Není nutné mít obecnou on metodu pro příjem všech zpráv. Metoda pojmenovaná po názvu zprávy postačuje.

    V tomto příkladu pošle klient TypeScript zprávu identifikovanou jako newMessage . Metoda jazyka C# NewMessage očekává data odesílaná klientem. Bylo provedeno volání SendAsync na klientech. vše. Přijaté zprávy se odesílají všem klientům připojeným k centru.

Otestování aplikace

Ověřte, že aplikace funguje s následujícím postupem.

  1. Spusťte příkaz Webpack v režimu vydání . pomocí okna konzoly Správce balíčků spusťte následující příkaz v kořenovém adresáři projektu. Pokud nejste v kořenovém adresáři projektu, zadejte cd SignalRWebPack před zadáním příkazu.

    npm run release

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

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

    • Vyprázdnil se obsah adresáře wwwroot.
    • Převedli TypeScript na JavaScript v procesu, který se označuje jako transpilace.
    • Zpracuje vygenerovaný JavaScript, aby se zmenšila velikost souboru v procesu, který se označuje jako minifikace.
    • Zkopíroval zpracované soubory JavaScriptu, CSS a HTML ze src do adresáře wwwroot.
    • Do souboru wwwroot/index.html vložili následující prvky:
      • Značka <link> odkazující na wwwroot/main. <hash> . soubor css. Tato značka je umístěna bezprostředně před uzavírací </head> značkou.
      • Značka <script> odkazující na minifikovaný soubor wwwroot/main. <hash> . js. Tato značka je umístěna bezprostředně před uzavírací </body> značkou.

  2. Vyberte ladit > Spustit bez ladění , aby se aplikace spouštěla v prohlížeči bez připojení ladicího programu. Soubor wwwroot/index.html se obsluhuje na http://localhost:<port_number> .

    Pokud se zobrazí chyby kompilace, zkuste řešení zavřít a znovu otevřít.

  3. Otevřete jinou instanci prohlížeče (libovolný prohlížeč). Vložte adresu URL do panelu Adresa.

  4. Vyberte možnost prohlížeč, do textového pole zpráva zadejte něco a klikněte na tlačítko Odeslat . Jedinečné uživatelské jméno a zpráva se okamžitě zobrazí na obou stránkách.

zpráva zobrazená v oknech prohlížeče

Požadavky

vytvoření webové aplikace v ASP.NET Core

nakonfigurujte Visual Studio pro hledání npm v proměnné prostředí PATH . ve výchozím nastavení Visual Studio používá verzi npm nalezenou v instalačním adresáři. Postupujte podle těchto pokynů v Visual Studio:

  1. Přejděte na nástroje > Možnosti > projekty a řešení > Web Správa balíčků > externích webových nástrojů.

  2. Ze seznamu vyberte položku $ (cesta) . Kliknutím na šipku nahoru tuto položku přesunete do druhé pozice v seznamu.

    Visual Studio Rozšířeného

konfigurace Visual Studio je dokončená. Je čas vytvořit projekt.

  1. použijte možnost soubor > nový > Project a vyberte šablonu webové aplikace ASP.NET Core .
  2. Pojmenujte projekt SignalR Webpack a vyberte vytvořit.
  3. v rozevíracím seznamu cílové rozhraní vyberte .net Core a v rozevíracím seznamu rozhraní vyberte ASP.NET Core 2,2 . Vyberte prázdnou šablonu a vyberte vytvořit.

Konfigurace sady Webpack a TypeScriptu

Následující postup nakonfiguruje převod TypeScript na JavaScript a sdružování prostředků na straně klienta.

  1. Spusťte následující příkaz v kořenovém adresáři projektu a vytvořte package.jsv souboru:

    npm init -y

  2. Přidejte zvýrazněnou vlastnost do package.js 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"
}

    Nastavení private vlastnosti tak, aby se true zabránilo upozorněním na instalaci 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 install -D -E clean-webpack-plugin@1.0.1 css-loader@2.1.0 html-webpack-plugin@4.0.0-beta.5 mini-css-extract-plugin@0.5.0 ts-loader@5.3.3 typescript@3.3.3 webpack@4.29.3 webpack-cli@3.2.3

    Některé podrobnosti o příkazu, které je třeba si poznamenat:

    • Číslo verze se řídí @ znaménkem každého názvu balíčku. Npm nainstaluje tyto konkrétní verze balíčků.
    • Možnost -E zakáže výchozí chování npm při zápisu operátorů rozsahu sémantické verze pro package.jsna. Například se "webpack": "4.29.3" používá místo "webpack": "^4.29.3" . Tato možnost zabraňuje neúmyslným upgradům na novější verze balíčků.

    Další podrobnosti najdete v dokumentu npm-install.

  4. Nahraďte scripts vlastnost souborupackage.js on následujícím kódem:

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

    Některé vysvětlení skriptů:

    • build: Zabalí prostředky na straně klienta do vývojového režimu a sleduje změny souborů. Watcher způsobí, že se sada znovu vygeneruje při každé změně souboru projektu. Možnost zakáže optimalizace produkčního prostředí, jako je například třásání stromu a mode minifikace. Používejte build pouze při vývoji.
    • release: Zabalí prostředky na straně klienta do produkčního režimu.
    • publish: Spustí release skript, který zabalí prostředky na straně klienta do produkčního režimu. Volá příkaz .NET Core CLI publikování aplikace a publikuje aplikaci.

  5. V kořenovém adresářiwebpack.config.js vytvořte soubor s názvem a 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(["wwwroot/*"]),
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].[chunkhash].css"
        })
    ]
};

    Předchozí soubor nakonfiguruje kompilaci webpacku. Je třeba poznamenat některé podrobnosti o konfiguraci:

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

  6. V kořenovém adresáři projektu vytvořte nový adresář src pro uložení prostředků projektu na straně klienta.

  7. Vytvořte soubor src/index.html s následujícím kódem.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ASP.NET Core SignalR</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>

    Předchozí KÓD HTML definuje často používaný kód domovské stránky.

  8. Vytvořte nový adresář src/css. Jejím účelem je uložit soubory .css projektu.

  9. Vytvořte soubor src/css/main.css s následujícím kódem:

    *, *::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;
}

    Předchozí soubor main.css aplikaci styluje.

  10. Vytvořte soubor src/tsconfig.json s následujícím kódem JSON:

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

    Předchozí kód nakonfiguruje kompilátor TypeScriptu tak, aby vytvářl JavaScript kompatibilní s ECMAScriptem 5.

  11. Vytvořte soubor src/index.ts s následujícím kódem:

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

tbMessage.addEventListener("keyup", (e: KeyboardEvent) => {
    if (e.keyCode === 13) {
        send();
    }
});

btnSend.addEventListener("click", send);

function send() {
}

    Předchozí TypeScript načte odkazy na prvky modelu DOM a připojí dvě obslužné rutiny událostí:

    • keyup: Tato událost se zobrazí, když uživatel do tbMessage textového pole zadá text. Funkce send se volá, když uživatel stiskne klávesu Enter.
    • click: Tato událost se zobrazí, když uživatel klikne na tlačítko Odeslat. Volá se funkce send.

Konfigurace ASP.NET Core aplikace

  1. Kód poskytnutý v Startup.Configure metodě zobrazí Hello World!. Volání metody app.Run nahraďte voláními UseDefaultFiles a UseStaticFiles.

    app.UseDefaultFiles();
app.UseStaticFiles();

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

  2. Zavolejte SignalR Add in Startup.ConfigureServices . Služby se SignalR přidávají do projektu.

    services.AddSignalR();

  3. Namapuje trasu /hub na ChatHub centrum. Na konec přidejte následující Startup.Configure řádky:

    app.UseSignalR(options =>
{
    options.MapHub<ChatHub>("/hub");
});

  4. V kořenovém adresáři projektu vytvořte nový adresář s názvem Hubs. Jejím účelem je uložit SignalR centrum, které se vytvoří v dalším kroku.

  5. Vytvořte hubs/ChatHub.cs s následujícím kódem:

    using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRWebPack.Hubs
{
    public class ChatHub : Hub
    {
    }
}

  6. Na začátek souboru Startup.cs přidejte následující kód, který překládá ChatHub odkaz:

    using SignalRWebPack.Hubs;

Povolení komunikace mezi klientem a serverem

Aplikace aktuálně zobrazuje jednoduchý formulář pro odesílání zpráv. Když se o to pokusíte, nic se nestane. Server naslouchá určité trase, ale se odeslaných zprávami nic neděje.

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

    npm install @aspnet/signalr

    Předchozí příkaz nainstaluje klienta SignalR TypeScriptu, který umožňuje klientovi odesílat zprávy na server.

  2. Přidejte zvýrazněný kód do souboru src/index.ts:

    import "./css/main.css";
import * as signalR from "@aspnet/signalr";

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) => {
    let 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.keyCode === 13) {
        send();
    }
});

btnSend.addEventListener("click", send);

function send() {
}

    Předchozí kód podporuje příjem zpráv ze serveru. 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 dají spustit logiku, která zodpovídá za zobrazení nové messageReceived 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 naslouchat libovolného počtu názvů 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ý prvek s názvem autora a div obsahem zprávy v jeho innerHTML atributu. Nová zpráva je přidána do hlavního div elementu zobrazující zprávy.

  3. Když teď klient může přijmout zprávu, nakonfigurujte ji tak, aby odesílala zprávy. Přidejte zvýrazněný kód do souboru src/index.ts:

    import "./css/main.css";
import * as signalR from "@aspnet/signalr";

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) => {
    let messageContainer = document.createElement("div");

    messageContainer.innerHTML =
        `<div class="message-author">${username}</div><div>${message}</div>`;

    divMessages.appendChild(messageContainer);
    divMessages.scrollTop = divMessages.scrollHeight;
});

connection.start().catch(err => document.write(err));

tbMessage.addEventListener("keyup", (e: KeyboardEvent) => {
    if (e.keyCode === 13) {
        send();
    }
});

btnSend.addEventListener("click", send);

function send() {
    connection.send("newMessage", username, tbMessage.value)
              .then(() => tbMessage.value = "");
}

    Odeslání zprávy prostřednictvím připojení WebSockets vyžaduje volání send metody . První parametr metody je název zprávy. Data zpráv mají jiné parametry. V tomto příkladu se na server newMessage odesílá zpráva identifikované jako . Zpráva se skládá z uživatelského jména a uživatelského vstupu z textového pole. Pokud odeslání funguje, hodnota textového pole není zaškrtnutá.

  4. Do třídy ChatHub přidejte metodu NewMessage:

    using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

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 obdrží. Není nutné mít obecnou metodu on pro příjem všech zpráv. Stačí metoda pojmenovaná podle názvu zprávy.

    V tomto příkladu klient TypeScriptu odešle zprávu označenou jako newMessage . Metoda jazyka C# NewMessage očekává data odesílaná klientem. Volání metody SendAsync na clients.all. Přijaté zprávy se odesílají všem klientům připojeným k centru.

Otestování aplikace

Ověřte, že aplikace funguje s následujícími kroky.

  1. Spusťte Webpack v režimu vydání. Pomocí Správce balíčků konzoly spusťte v kořenovém adresáři projektu následující příkaz. Pokud nejste v kořenovém adresáři projektu, zadejte cd SignalRWebPack před zadáním příkazu .

    npm run release

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

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

    • Vyprázdnil se obsah adresáře wwwroot.
    • Převedli TypeScript na JavaScript v procesu, který se označuje jako transpilace.
    • Zpracuje vygenerovaný JavaScript, aby se zmenšila velikost souboru v procesu, který se označuje jako minifikace.
    • Zkopíroval zpracované soubory JavaScriptu, CSS a HTML ze src do adresáře wwwroot.
    • Do souboru wwwroot/index.html vložili následující prvky:
      • Značka <link> odkazující na wwwroot/main. <hash> . soubor css. Tato značka je umístěna bezprostředně před uzavírací </head> značkou.
      • Značka <script> odkazující na minifikovaný soubor wwwroot/main. <hash> . js. Tato značka je umístěna bezprostředně před uzavírací </body> značkou.

  2. Pokud chcete aplikaci spustit v prohlížeči bez připojení ladicího programu, vyberte Spustit > ladění bez ladění. Soubor wwwroot/index.html se poskytuje na http://localhost:<port_number> adrese .

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

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

zpráva zobrazená v oknech prohlížeče

Další materiály