Kurz: Začínáme s ASP.NET Core SignalR pomocí TypeScriptu a Webpacku
Poznámka:
Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.
Důležité
Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.
Aktuální verzi najdete ve verzi .NET 8 tohoto článku.
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
Sada Visual Studio 2022 se sadou funkcí Vývoj pro ASP.NET a web
Vytvoření webové aplikace ASP.NET Core
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.
Přejděte na Možnosti>nástrojů>Projekty a řešení>Pro správu>webových balíčků Externí webové nástroje.
$(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:
- Použijte možnost Nabídky Nový>projekt Soubor>a zvolte šablonu ASP.NET Prázdné jádro. Vyberte Další.
- Pojmenujte projekt
SignalRWebpack
a vyberte Vytvořit. - 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 :
- 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 vyhledejte
Microsoft.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.
Konfigurace serveru
V této části nakonfigurujete webovou aplikaci ASP.NET Core tak, aby odesílala a přijímala SignalR zprávy.
AddSignalRVolání
Program.cs
:var builder = WebApplication.CreateBuilder(args); builder.Services.AddSignalR();
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.Vytvořte nový adresář pojmenovaný
Hubs
v kořenovém adresářiSignalRWebpack/
projektu , pro SignalR třídu centra.Vytvořte nový soubor
Hubs/ChatHub.cs
s 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.
- Klient TypeScriptu odešle zprávu identifikovanou jako
Na začátek
Program.cs
ChatHub
odkazu přidejte následujícíusing
příkaz:using SignalRWebpack.Hubs;
Namapujte
Program.cs
trasu/hub
ChatHub
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.
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
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ítetrue
upozorněním instalace balíčku v dalším kroku.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 dopackage.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 .
scripts
Vlastnostpackage.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. Tatomode
možnost zakáže optimalizace produkce, jako je například roztřesení stromu a minifikace. používejtebuild
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.
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í hodnotudist
. Sada se místo toho vygeneruje v adresářiwwwroot
. - Pole
resolve.extensions
zahrnuje.js
import klientského JavaScriptu SignalR .
- Vlastnost
Vytvořte nový adresář pojmenovaný
src
v kořenovém adresářiSignalRWebpack/
projektu pro kód klienta.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éhotbMessage
pole a zavolá funkci, když uživatel stisknesend
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. FunkcewithUrl
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ímon
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 jehoinnerHTML
atributu. Přidá se do hlavníhodiv
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á jakonewMessage
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.
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ů:
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
src
wwwroot
JavaScriptu, CSS a HTML. - Do souboru vložte následující prvky
wwwroot/index.html
:- Značka
<link>
odkazující nawwwroot/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.
- Značka
- Vyprázdnil obsah
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 adresehttps://localhost:<port>
.Pokud dojde k chybám kompilace, zkuste řešení zavřít a znovu otevřít.
Otevřete jinou instanci prohlížeče (libovolný prohlížeč) a vložte adresu URL do adresního řádku.
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
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
Sada Visual Studio 2022 se sadou funkcí Vývoj pro ASP.NET a web
Vytvoření webové aplikace ASP.NET Core
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.
Přejděte na Možnosti>nástrojů>Projekty a řešení>Pro správu>webových balíčků Externí webové nástroje.
$(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:
- Použijte možnost Nabídky Nový>projekt Soubor>a zvolte šablonu ASP.NET Prázdné jádro. Vyberte Další.
- Pojmenujte projekt
SignalRWebpack
a vyberte Vytvořit. - V rozevíracím seznamu Rozhraní vyberte
.NET 7.0 (Standard Term Support)
. Vyberte Vytvořit.
Přidejte do projektu balíček NuGet Microsoft.TypeScript.MSBuild :
- 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 vyhledejte
Microsoft.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.
Konfigurace serveru
V této části nakonfigurujete webovou aplikaci ASP.NET Core tak, aby odesílala a přijímala SignalR zprávy.
AddSignalRVolání
Program.cs
:var builder = WebApplication.CreateBuilder(args); builder.Services.AddSignalR();
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.Vytvořte nový adresář pojmenovaný
Hubs
v kořenovém adresářiSignalRWebpack/
projektu , pro SignalR třídu centra.Vytvořte nový soubor
Hubs/ChatHub.cs
s 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.
- Klient TypeScriptu odešle zprávu identifikovanou jako
Na začátek
Program.cs
ChatHub
odkazu přidejte následujícíusing
příkaz:using SignalRWebpack.Hubs;
Namapujte
Program.cs
trasu/hub
ChatHub
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.
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
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ítetrue
upozorněním instalace balíčku v dalším kroku.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 dopackage.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 .
scripts
Vlastnostpackage.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. Tatomode
možnost zakáže optimalizace produkce, jako je například roztřesení stromu a minifikace. používejtebuild
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.
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í hodnotudist
. Sada se místo toho vygeneruje v adresářiwwwroot
. - Pole
resolve.extensions
zahrnuje.js
import klientského JavaScriptu SignalR .
- Vlastnost
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éhotbMessage
pole a zavolá funkci, když uživatel stisknesend
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. FunkcewithUrl
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ímon
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 jehoinnerHTML
atributu. Přidá se do hlavníhodiv
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á jakonewMessage
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.
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ů:
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
src
wwwroot
JavaScriptu, CSS a HTML. - Do souboru vložte následující prvky
wwwroot/index.html
:- Značka
<link>
odkazující nawwwroot/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.
- Značka
- Vyprázdnil obsah
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 adresehttps://localhost:<port>
.Pokud dojde k chybám kompilace, zkuste řešení zavřít a znovu otevřít.
Otevřete jinou instanci prohlížeče (libovolný prohlížeč) a vložte adresu URL do adresního řádku.
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
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
- Sada Visual Studio 2022 se sadou funkcí Vývoj pro ASP.NET a web
- Sada .NET 6.0 SDK
Vytvoření webové aplikace ASP.NET Core
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.
Přejděte na Možnosti>nástrojů>Projekty a řešení>Pro správu>webových balíčků Externí webové nástroje.
$(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:
- Použijte možnost Nabídky Nový>projekt Soubor>a zvolte šablonu ASP.NET Prázdné jádro. Vyberte Další.
- Pojmenujte projekt
SignalRWebpack
a vyberte Vytvořit. - V rozevíracím seznamu Rozhraní vyberte
.NET 6.0 (Long Term Support)
. Vyberte Vytvořit.
Přidejte do projektu balíček NuGet Microsoft.TypeScript.MSBuild :
- 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 vyhledejte
Microsoft.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.
Konfigurace serveru
V této části nakonfigurujete webovou aplikaci ASP.NET Core tak, aby odesílala a přijímala SignalR zprávy.
AddSignalRVolání
Program.cs
:var builder = WebApplication.CreateBuilder(args); builder.Services.AddSignalR();
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.Vytvořte nový adresář pojmenovaný
Hubs
v kořenovém adresářiSignalRWebpack/
projektu , pro SignalR třídu centra.Vytvořte nový soubor
Hubs/ChatHub.cs
s 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 odešle klient TypeScript 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.Na začátek
Program.cs
ChatHub
odkazu přidejte následujícíusing
příkaz:using SignalRWebpack.Hubs;
Namapujte
Program.cs
trasu/hub
ChatHub
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.
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
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ítetrue
upozorněním instalace balíčku v dalším kroku.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 dopackage.json
."webpack": "5.70.0"
Například se používá místo"webpack": "^5.70.0"
. Tato možnost zabraňuje nezamýšleným upgradům na novější verze balíčků.Další informace najdete v dokumentaci k npm-install .
scripts
Vlastnostpackage.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. Tatomode
možnost zakáže optimalizace produkce, jako je například roztřesení stromu a minifikace. používejtebuild
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.
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í hodnotudist
. Sada se místo toho vygeneruje v adresářiwwwroot
. - Pole
resolve.extensions
zahrnuje.js
import klientského JavaScriptu SignalR .
- Vlastnost
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éhotbMessage
pole a zavolá funkci, když uživatel stisknesend
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. FunkcewithUrl
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ímon
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 jehoinnerHTML
atributu. Přidá se do hlavníhodiv
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á jakonewMessage
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.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ů:
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. Pokud nejste v kořenovém adresáři projektu, zadejtecd SignalRWebpack
před zadáním příkazu.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
src
wwwroot
JavaScriptu, CSS a HTML. - Do souboru vložte následující prvky
wwwroot/index.html
:- Značka
<link>
odkazující nawwwroot/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.
- Značka
- Vyprázdnil obsah
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 adresehttps://localhost:<port>
.Pokud dojde k chybám kompilace, zkuste řešení zavřít a znovu otevřít.
Otevřete jinou instanci prohlížeče (libovolný prohlížeč) a vložte adresu URL do adresního řádku.
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
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:
- Generování úvodní aplikace ASP.NET Core SignalR
- Konfigurace klienta TypeScriptu SignalR
- Konfigurace kanálu buildu pomocí webpacku
- SignalR Konfigurace serveru
- Povolení komunikace mezi klientem a serverem
Zobrazení nebo stažení ukázkového kódu (postup stažení)
Požadavky
- Visual Studio 2019 s úlohou vývoje pro ASP.NET a web
- .NET Core SDK 3.0 nebo novější
- Node.js s npm
Vytvoření webové aplikace ASP.NET Core
Nakonfigurujte Visual Studio tak, aby hledal npm v proměnné prostředí PATH . Visual Studio ve výchozím nastavení používá verzi npm nalezenou v instalačním adresáři. Postupujte podle těchto pokynů v sadě Visual Studio:
Spusťte Visual Studio. V úvodním okně vyberte Pokračovat bez kódu.
Přejděte na Možnosti>nástrojů>Projekty a řešení>Pro správu>webových balíčků Externí webové nástroje.
Ze seznamu vyberte položku $(PATH). Výběrem šipky nahoru přesunete položku na druhou pozici v seznamu a vyberete OK.
.
Konfigurace sady Visual Studio je dokončená.
- Použijte možnost Nabídky Nový>projekt Soubor>a zvolte šablonu ASP.NET Základní webová aplikace. Vyberte Další.
- Pojmenujte projekt *SignalRWebPac' a vyberte Vytvořit.
- V rozevíracím seznamu cílové architektury vyberte .NET Core a v rozevíracím seznamu selektoru architektury vyberte ASP.NET Core 3.1 . Vyberte prázdnoušablonu a vyberte Vytvořit.
Microsoft.TypeScript.MSBuild
Přidejte balíček do projektu:
- V Průzkumník řešení (pravé podokno) klikněte pravým tlačítkem myši na uzel projektu a vyberte Spravovat balíčky NuGet. Na kartě Procházet vyhledejte
Microsoft.TypeScript.MSBuild
a potom klikněte na nainstalovat balíček vpravo.
Visual Studio přidá balíček NuGet do uzlu Závislosti v Průzkumník řešení a povolí kompilaci TypeScriptu v projektu.
Konfigurace webpacku a TypeScriptu
Následující kroky nakonfigurují převod TypeScriptu na JavaScript a sdružování prostředků na straně klienta.
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
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ítetrue
upozorněním instalace balíčku v dalším kroku.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, které si poznamenejte:
- Číslo verze se řídí znaménkem
@
pro každý název balíčku. npm nainstaluje tyto konkrétní verze balíčků. - Tato
-E
možnost zakáže výchozí chování sémantických operátorů rozsahu verzí npm do *packagejson
."webpack": "4.41.5"
Například se používá místo"webpack": "^4.41.5"
. Tato možnost zabraňuje nezamýšleným upgradům na novější verze balíčků.
Další podrobnosti najdete v dokumentaci k npm-install .
- Číslo verze se řídí znaménkem
scripts
Vlastnostpackage.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" },
Vysvětlení skriptů:
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. Tatomode
možnost zakáže optimalizace produkce, jako je například roztřesení stromu a minifikace. Používejtebuild
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. Volá příkaz pro publikování rozhraní příkazového řádku .NET Core, který aplikaci publikuje.
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 nakonfiguruje kompilaci Webpacku. Několik podrobností o konfiguraci, které je potřeba poznamenat:
- Vlastnost
output
přepíše výchozí hodnotudist
. Sada se místo toho vygeneruje v adresářiwwwroot
. - Pole
resolve.extensions
zahrnuje.js
import klientského JavaScriptu SignalR .
- Vlastnost
Vytvořte nový adresář src v kořenovém adresáři projektu pro uložení prostředků na straně klienta projektu.
Vytvořte
src/index.html
s následující značkou.<!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.
Vytvořte nový adresář src/css . Jejím účelem je uložit soubory projektu
.css
.Vytvořte
src/css/main.css
pomocí následujících šablon 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; }
main.css
Předchozí styly souborů aplikace.Vytvořte
src/tsconfig.json
pomocí následujícího JSnastavení ZAPNUTO:{ "compilerOptions": { "target": "es5" } }
Předchozí kód nakonfiguruje kompilátor TypeScript tak, aby vytvořil JavaScript kompatibilní s ECMAScriptem 5.
Vytvořte
src/index.ts
pomocí následujícího kódu: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í dva obslužné rutiny událostí:
keyup
: Tato událost se aktivuje, když uživatel zadá do textovéhotbMessage
pole. Funkcesend
se volá, když uživatel stiskne klávesu Enter .click
: Tato událost se aktivuje, když uživatel vybere tlačítko Odeslat . Volá se funkcesend
.
Konfigurace aplikace
V
Startup.Configure
, přidat volání do UseDefaultFiles(IApplicationBuilder) a UseStaticFiles(IApplicationBuilder).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
index.html
soubor. Soubor se obsluhuje bez ohledu na to, jestli uživatel zadá úplnou adresu URL nebo kořenovou adresu URL webové aplikace.Na konci
Startup.Configure
namapujte trasu /hubuChatHub
do centra. Nahraďte kód, který zobrazuje Hello World! následujícím řádkem:app.UseEndpoints(endpoints => { endpoints.MapHub<ChatHub>("/hub"); });
Zavolejte
Startup.ConfigureServices
AddSignalR.services.AddSignalR();
Vytvořte nový adresář s názvem Hubs v kořenovémSignalR webovémpacku SignalR projektu/ pro uložení centra.
Vytvořte centrum
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 { } }
Na začátek
Startup.cs
souboru přidejte následujícíusing
příkaz, který přeložíChatHub
odkaz:using SignalRWebPack.Hubs;
Povolení komunikace klienta a serveru
Aplikace aktuálně zobrazuje základní formulář pro odesílání zpráv, ale zatím není funkční. Server naslouchá konkrétní trase, ale nedělá nic s odeslanými zprávami.
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ů.
Přidejte do
src/index.ts
souboru zvýrazněný kód: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. Třída
HubConnectionBuilder
vytvoří nového tvůrce pro konfiguraci připojení k serveru. FunkcewithUrl
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ímon
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 jehoinnerHTML
atributu. Přidá se do hlavníhodiv
prvku, který zobrazuje zprávy.Teď, když klient může přijmout zprávu, nakonfigurujte ji tak, aby odesílala zprávy. Přidejte do
src/index.ts
souboru zvýrazněný kód: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ím parametrem metody je název zprávy. Data zprávy obývají ostatní parametry. V tomto příkladu je zpráva označená jakonewMessage
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.Do třídy
ChatHub
přidejte metoduNewMessage
: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 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 odešle klient TypeScript 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.
Otestování aplikace
Ověřte, že aplikace funguje pomocí následujícího postupu.
Spusťte Webpack v režimu vydání . V okně konzoly Správce balíčků 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 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
src
wwwroot
JavaScriptu, CSS a HTML. - Do souboru vložte následující prvky
wwwroot/index.html
:- Značka
<link>
odkazující nawwwroot/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.
- Značka
- Vyprázdnil obsah
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 adresehttp://localhost:<port_number>
.Pokud dojde k chybám kompilace, zkuste řešení zavřít a znovu otevřít.
Otevřete jinou instanci prohlížeče (jakýkoli prohlížeč). Vložte adresu URL do adresního řádku.
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ší materiály
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:
- Generování úvodní aplikace ASP.NET Core SignalR
- Konfigurace klienta TypeScriptu SignalR
- Konfigurace kanálu buildu pomocí webpacku
- SignalR Konfigurace serveru
- Povolení komunikace mezi klientem a serverem
Zobrazení nebo stažení ukázkového kódu (postup stažení)
Požadavky
- Visual Studio 2019 s úlohou vývoje pro ASP.NET a web
- .NET Core SDK 2.2 nebo novější
- Node.js s npm
Vytvoření webové aplikace ASP.NET Core
Nakonfigurujte Visual Studio tak, aby hledal npm v proměnné prostředí PATH . Visual Studio ve výchozím nastavení používá verzi npm nalezenou v instalačním adresáři. Postupujte podle těchto pokynů v sadě Visual Studio:
Přejděte na Možnosti>nástrojů>Projekty a řešení>Pro správu>webových balíčků Externí webové nástroje.
Ze seznamu vyberte položku $(PATH). Výběrem šipky nahoru přesunete položku na druhou pozici v seznamu.
Konfigurace sady Visual Studio je dokončena. Je čas vytvořit projekt.
- Použijte možnost Nabídky Nový>projekt Soubor>a zvolte šablonu ASP.NET Základní webová aplikace.
- Pojmenujte projekt *SignalRWebPack' a vyberte Vytvořit.
- V rozevíracím seznamu cílové architektury vyberte .NET Core a v rozevíracím seznamu selektoru architektury vyberte ASP.NET Core 2.2 . Vyberte prázdnoušablonu a vyberte Vytvořit.
Konfigurace webpacku a TypeScriptu
Následující kroky nakonfigurují převod TypeScriptu na JavaScript a sdružování prostředků na straně klienta.
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
Přidejte zvýrazněnou vlastnost do
package.json
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ítetrue
upozorněním instalace balíčku v dalším kroku.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 příkazu, které si poznamenejte:
- Číslo verze se řídí znaménkem
@
pro každý název balíčku. npm nainstaluje tyto konkrétní verze balíčků. - Tato
-E
možnost zakáže výchozí chování sémantických operátorů rozsahu verzí npm do *packagejson
."webpack": "4.29.3"
Například se používá místo"webpack": "^4.29.3"
. Tato možnost zabraňuje nezamýšleným upgradům na novější verze balíčků.
Další podrobnosti najdete v dokumentaci k npm-install .
- Číslo verze se řídí znaménkem
scripts
Vlastnostpackage.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" },
Vysvětlení skriptů:
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. Tatomode
možnost zakáže optimalizace produkce, jako je například roztřesení stromu a minifikace. Používejtebuild
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. Volá příkaz pro publikování rozhraní příkazového řádku .NET Core, který aplikaci publikuje.
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(["wwwroot/*"]), new HtmlWebpackPlugin({ template: "./src/index.html" }), new MiniCssExtractPlugin({ filename: "css/[name].[chunkhash].css" }) ] };
Předchozí soubor nakonfiguruje kompilaci Webpacku. Několik podrobností o konfiguraci, které je potřeba poznamenat:
- Vlastnost
output
přepíše výchozí hodnotudist
. Sada se místo toho vygeneruje v adresářiwwwroot
. - Pole
resolve.extensions
zahrnuje.js
import klientského JavaScriptu SignalR .
- Vlastnost
Vytvořte nový adresář src v kořenovém adresáři projektu pro uložení prostředků na straně klienta projektu.
Vytvořte
src/index.html
s následující značkou.<!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.
Vytvořte nový adresář src/css . Jejím účelem je uložit soubory projektu
.css
.Vytvořte
src/css/main.css
s následující značkou:*, *::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; }
main.css
Předchozí styly souborů aplikace.Vytvořte
src/tsconfig.json
pomocí následujícího JSnastavení ZAPNUTO:{ "compilerOptions": { "target": "es5" } }
Předchozí kód nakonfiguruje kompilátor TypeScript tak, aby vytvořil JavaScript kompatibilní s ECMAScriptem 5.
Vytvořte
src/index.ts
pomocí následujícího kódu: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 elementy MODELU DOM a připojí dva obslužné rutiny událostí:
keyup
: Tato událost se aktivuje, když uživatel zadá do textovéhotbMessage
pole. Funkcesend
se volá, když uživatel stiskne klávesu Enter .click
: Tato událost se aktivuje, když uživatel vybere tlačítko Odeslat . Volá se funkcesend
.
Konfigurace aplikace ASP.NET Core
Kód uvedený v
Startup.Configure
metodě zobrazí Hello World!.app.Run
Nahrazení volání metody voláním a UseDefaultFiles(IApplicationBuilder)UseStaticFiles(IApplicationBuilder).app.UseDefaultFiles(); app.UseStaticFiles();
Předchozí kód umožňuje serveru vyhledat a obsluhovat
index.html
soubor bez ohledu na to, jestli uživatel zadá úplnou adresu URL nebo kořenovou adresu URL webové aplikace.Zavolat AddSignalR .
Startup.ConfigureServices
Přidá služby SignalR do projektu.services.AddSignalR();
Namapujte trasu /hubu
ChatHub
do centra. Na konecStartup.Configure
příkazu přidejte následující řádky:app.UseSignalR(options => { options.MapHub<ChatHub>("/hub"); });
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.
Vytvořte centrum
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 { } }
Do horní části
Startup.cs
souboru přidejte následující kód, který přeložíChatHub
odkaz:using SignalRWebPack.Hubs;
Povolení komunikace klienta a serveru
Aplikace aktuálně zobrazuje jednoduchý formulář pro odesílání zpráv. Když se to pokusíte udělat, nic se nestane. Server naslouchá konkrétní trase, ale nedělá nic s odeslanými zprávami.
V kořenovém adresáři projektu spusťte následující příkaz:
npm install @aspnet/signalr
Předchozí příkaz nainstaluje SignalR klienta TypeScript, který umožňuje klientovi odesílat zprávy na server.
Přidejte do
src/index.ts
souboru zvýrazněný kód: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. FunkcewithUrl
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ímon
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 jehoinnerHTML
atributu. Nová zpráva se přidá do hlavníhodiv
prvku, který zobrazuje zprávy.Teď, když klient může přijmout zprávu, nakonfigurujte ji tak, aby odesílala zprávy. Přidejte do
src/index.ts
souboru zvýrazněný kód: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ím parametrem metody je název zprávy. Data zprávy obývají ostatní parametry. V tomto příkladu je zpráva označená jakonewMessage
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.Do třídy
ChatHub
přidejte metoduNewMessage
: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 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 odešle klient TypeScript 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.
Otestování aplikace
Ověřte, že aplikace funguje pomocí následujícího postupu.
Spusťte Webpack v režimu vydání . V okně konzoly Správce balíčků 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 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
src
wwwroot
JavaScriptu, CSS a HTML. - Do souboru vložte následující prvky
wwwroot/index.html
:- Značka
<link>
odkazující nawwwroot/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.
- Značka
- Vyprázdnil obsah
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 adresehttp://localhost:<port_number>
.Otevřete jinou instanci prohlížeče (jakýkoli prohlížeč). Vložte adresu URL do adresního řádku.
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ší materiály
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu:Odeslat a zobrazit názory pro