Tutorial: Mulai menggunakan ASP.NET Core SignalR menggunakan TypeScript dan Webpack

Oleh Sébastien Sougnez

Tutorial ini menunjukkan penggunaan Webpack di aplikasi web ASP.NET Core SignalR untuk memaketkan dan membangun klien yang ditulis dalam TypeScript. Webpack memungkinkan pengembang untuk memaketkan dan membangun sumber daya sisi klien dari aplikasi web.

Dalam tutorial ini, Anda akan mempelajari cara:

• Membuat aplikasi ASP.NET Core SignalR
• SignalR Mengonfigurasi server
• Mengonfigurasi alur build menggunakan Webpack
• SignalR Mengonfigurasi klien TypeScript
• Mengaktifkan komunikasi antara klien dan server

Melihat atau mengunduh kode sampel (cara mengunduh)

Prasyarat

• Node.js dengan npm

Visual Studio

• Visual Studio 2022 dengan beban kerja ASP.NET serta pengembangan web.

  

Visual Studio Code

• Visual Studio Code
• C# for Visual Studio Code (versi terbaru)
• .NET 8.0 SDK

Petunjuk Visual Studio Code menggunakan .NET CLI untuk fungsi pengembangan ASP.NET Core seperti pembuatan proyek. Anda dapat mengikuti petunjuk ini di macOS, Linux, atau Windows dan dengan editor kode apa pun. Mungkin diperlukan perubahan kecil jika Anda menggunakan editor selain Visual Studio Code.

Membuat aplikasi web ASP.NET Core

Visual Studio

Secara default, Visual Studio menggunakan versi npm yang ditemukan di direktori penginstalannya. Untuk mengonfigurasi Visual Studio untuk mencari npm dalam PATH variabel lingkungan:

Luncurkan Visual Studio. Di jendela mulai, pilih Lanjutkan tanpa kode.

1. Navigasi ke Opsi>Alat>Proyek dan Solusi>Manajemen>Paket Web Alat Web Eksternal.

2. $(PATH) Pilih entri dari daftar. Pilih panah atas untuk memindahkan entri ke posisi kedua dalam daftar, dan pilih OK:

   .

Untuk membuat aplikasi web ASP.NET Core baru:

1. Gunakan opsi menu File>Proyek Baru>dan pilih templat ASP.NET Core Empty. Pilih Selanjutnya.
2. Beri nama proyek SignalRWebpack, dan pilih Buat.
3. Pilih .NET 8.0 (Dukungan Jangka Panjang) dari menu drop-down Kerangka Kerja . Pilih Buat.

Tambahkan paket NuGet Microsoft.TypeScript.MSBuild ke proyek:

1. Di Penjelajah Solusi, klik kanan simpul proyek dan pilih Kelola Paket NuGet. Di tab Telusuri , cari Microsoft.TypeScript.MSBuild lalu pilih Instal di sebelah kanan untuk menginstal paket.

Visual Studio menambahkan paket NuGet di bawah simpul Dependensi di Penjelajah Solusi, memungkinkan kompilasi TypeScript dalam proyek.

Visual Studio Code

Jalankan perintah berikut di Terminal Terintegrasi:

dotnet new web -o SignalRWebpack
code -r SignalRWebpack

• Perintah dotnet new membuat aplikasi web ASP.NET Core kosong di SignalRWebpack direktori.
• Perintah code membuka direktori dalam instans SignalRWebpack Visual Studio Code saat ini.

Visual Studio Code mungkin menampilkan kotak dialog yang menanyakan: Apakah Anda mempercayai penulis file di folder ini?

• Jika Anda mempercayai semua file di folder induk, pilih Percayai penulis semua file di folder induk.
• Pilih Ya, saya mempercayai penulis karena folder proyek memiliki file yang dihasilkan oleh .NET.
• Saat Visual Studio Code meminta Anda menambahkan aset untuk membangun dan men-debug proyek, pilih Ya. Jika Visual Studio Code tidak menawarkan untuk menambahkan aset build dan debug, pilih Tampilkan>Palet Perintah dan ketik ".NET" ke dalam kotak pencarian. Dari daftar perintah, pilih .NET: Generate Assets for Build and Debug perintah .

Visual Studio Code menambahkan .vscode folder dengan file dan tasks.json yang dihasilkanlaunch.json.

Jalankan perintah .NET CLI berikut di Terminal Terpadu:

dotnet add package Microsoft.TypeScript.MSBuild

Perintah sebelumnya menambahkan paket Microsoft.TypeScript.MSBuild , memungkinkan kompilasi TypeScript dalam proyek.

Mengonfigurasi server

Di bagian ini, Anda mengonfigurasi aplikasi web ASP.NET Core untuk mengirim dan menerima SignalR pesan.

1. Dalam Program.cs, panggil AddSignalR:

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

2. Sekali lagi, dalam Program.cs, panggil UseDefaultFiles dan UseStaticFiles:

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

   Kode sebelumnya memungkinkan server menemukan dan melayani index.html file. File dilayani apakah pengguna memasukkan URL lengkapnya atau URL akar aplikasi web.

3. Buat direktori baru bernama Hubs di akar proyek, SignalRWebpack/, untuk SignalR kelas hub.

4. Buat file baru, Hubs/ChatHub.cs, dengan kode berikut:

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

   Kode sebelumnya menyiarkan pesan yang diterima ke semua pengguna yang terhubung setelah server menerimanya. Tidak perlu memiliki metode generik on untuk menerima semua pesan. Metode yang dinamai sesuai dengan nama pesan sudah cukup.

   Dalam contoh ini:

   • Klien TypeScript mengirim pesan yang diidentifikasi sebagai newMessage.
   • Metode C# NewMessage mengharapkan data yang dikirim oleh klien.
   • Panggilan dilakukan pada SendAsyncClients.All.
   • Pesan yang diterima dikirim ke semua klien yang terhubung ke hub.

5. Tambahkan pernyataan berikut using di bagian Program.cs atas untuk mengatasi ChatHub referensi:

   using SignalRWebpack.Hubs;
   

6. Di Program.cs, petakan /hub rute ke ChatHub hub. Ganti kode yang ditampilkan Hello World! dengan kode berikut:

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

Mengonfigurasi klien

Di bagian ini, Anda membuat proyek Node.js untuk mengonversi TypeScript ke JavaScript dan memaketkan sumber daya sisi klien, termasuk HTML dan CSS, menggunakan Webpack.

1. Jalankan perintah berikut di akar proyek untuk membuat package.json file:

   npm init -y
   

2. Tambahkan properti yang disorot ke package.json file dan simpan perubahan file:

   {
     "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 Mengatur properti untuk true mencegah peringatan penginstalan paket di langkah berikutnya.

3. Instal paket npm yang diperlukan. Jalankan perintah berikut dari akar proyek:

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

   Opsi -E menonaktifkan perilaku default npm menulis operator rentang penerapan versi semantik ke package.json. Misalnya, "webpack": "5.76.1" digunakan alih-alih "webpack": "^5.76.1". Opsi ini mencegah peningkatan yang tidak diinginkan ke versi paket yang lebih baru.

   Untuk informasi selengkapnya, lihat dokumentasi npm-install .

4. scripts Ganti properti package.json file dengan kode berikut:

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

   Skrip berikut didefinisikan:

   • build: Menggabungkan sumber daya sisi klien dalam mode pengembangan dan mengawasi perubahan file. Pengamat file menyebabkan bundel diregenerasi setiap kali file proyek berubah. Opsi ini mode menonaktifkan pengoptimalan produksi, seperti pemecahan pohon dan minifikasi. hanya digunakan build dalam pengembangan.
   • release: Menggabungkan sumber daya sisi klien dalam mode produksi.
   • publish: Menjalankan release skrip untuk menggabungkan sumber daya sisi klien dalam mode produksi. Ini memanggil perintah terbitkan .NET CLI untuk menerbitkan aplikasi.

5. Buat file bernama webpack.config.js di akar proyek, dengan kode berikut:

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

   File sebelumnya mengonfigurasi proses kompilasi Webpack:

   • Properti output mengambil alih nilai distdefault . Bundel malah dipancarkan dalam wwwroot direktori.
   • Array resolve.extensions termasuk .js untuk mengimpor SignalR JavaScript klien.

6. Buat direktori baru bernama src di akar proyek, SignalRWebpack/, untuk kode klien.

7. src Salin direktori dan kontennya dari proyek sampel ke akar proyek. src Direktori berisi file berikut:

   • index.html, yang mendefinisikan markup boilerplate beranda:

     <!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, yang menyediakan gaya CSS untuk beranda:

     *,
     *::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, yang mengonfigurasi pengkompilasi TypeScript untuk menghasilkan JavaScript yang kompatibel dengan ECMAScript 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 = ""));
     }
     

     Kode sebelumnya mengambil referensi ke elemen DOM dan melampirkan dua penanganan aktivitas:

     • keyup: Diaktifkan saat pengguna mengetik di tbMessage kotak teks dan memanggil send fungsi saat pengguna menekan tombol Enter .
     • click: Diaktifkan saat pengguna memilih tombol Kirim dan fungsi panggilan send dipanggil.

     Kelas HubConnectionBuilder membuat penyusun baru untuk mengonfigurasi koneksi server. Fungsi ini withUrl mengonfigurasi URL hub.

     SignalR memungkinkan pertukaran pesan antara klien dan server. Setiap pesan memiliki nama tertentu. Misalnya, pesan dengan nama messageReceived dapat menjalankan logika yang bertanggung jawab untuk menampilkan pesan baru di zona pesan. Mendengarkan pesan tertentu dapat dilakukan melalui on fungsi . Sejumlah nama pesan dapat didengarkan. Dimungkinkan juga untuk meneruskan parameter ke pesan, seperti nama penulis dan konten pesan yang diterima. Setelah klien menerima pesan, elemen baru div dibuat dengan nama penulis dan konten pesan dalam atributnya innerHTML . Ini ditambahkan ke elemen utama div yang menampilkan pesan.

     Mengirim pesan melalui koneksi WebSockets memerlukan panggilan send metode . Parameter pertama metode adalah nama pesan. Data pesan menghuni parameter lain. Dalam contoh ini, pesan yang diidentifikasi sebagai newMessage dikirim ke server. Pesan terdiri dari nama pengguna dan input pengguna dari kotak teks. Jika pengiriman berfungsi, nilai kotak teks dikosongkan.

8. Jalankan perintah berikut di akar proyek:

   npm i @microsoft/signalr @types/node
   

   Perintah sebelumnya menginstal:

   • Klien SignalR TypeScript, yang memungkinkan klien mengirim pesan ke server.
   • Definisi jenis TypeScript untuk Node.js, yang memungkinkan pemeriksaan waktu kompilasi jenis Node.js.

Menguji aplikasi

Konfirmasikan bahwa aplikasi berfungsi dengan langkah-langkah berikut:

Visual Studio

1. Jalankan Webpack dalam release mode. Menggunakan jendela Konsol Manajer Paket, jalankan perintah berikut di akar proyek.

   npm run release
   

   Perintah ini menghasilkan aset sisi klien yang akan dilayani saat menjalankan aplikasi. Aset ditempatkan di wwwroot folder .

   Webpack menyelesaikan tugas-tugas berikut:

   • Menghapus menyeluruh konten wwwroot direktori.
   • Mengonversi TypeScript ke JavaScript dalam proses yang dikenal sebagai terjemahan.
   • Mangled JavaScript yang dihasilkan untuk mengurangi ukuran file dalam proses yang dikenal sebagai minifikasi.
   • Menyalin file JavaScript, CSS, dan HTML yang diproses dari src ke wwwroot direktori.
   • Menyuntikkan elemen berikut ke wwwroot/index.html dalam file:
     • Tag <link> , mereferensikan wwwroot/main.<hash>.css file. Tag ini ditempatkan segera sebelum tag penutup </head> .
     • Tag <script> , merujuk pada file yang dikurangi wwwroot/main.<hash>.js . Tag ini ditempatkan segera setelah tag penutup </title> .

2. Pilih Debug>Mulai tanpa penelusuran kesalahan untuk meluncurkan aplikasi di browser tanpa melampirkan debugger. File wwwroot/index.html disajikan di https://localhost:<port>.

   Jika ada kesalahan kompilasi, coba tutup dan buka kembali solusi.

3. Buka instans browser lain (browser apa pun) dan tempelkan URL di bilah alamat.

4. Pilih salah satu browser, ketik sesuatu di kotak teks Pesan , dan pilih tombol Kirim . Nama pengguna dan pesan unik ditampilkan di kedua halaman secara instan.

Visual Studio Code

1. Jalankan Webpack dalam release mode dengan menjalankan perintah berikut di akar proyek:

   npm run release
   

   Perintah ini menghasilkan aset sisi klien yang akan dilayani saat menjalankan aplikasi. Aset ditempatkan di wwwroot folder .

   Webpack menyelesaikan tugas-tugas berikut:

   • Menghapus menyeluruh konten wwwroot direktori.
   • Mengonversi TypeScript ke JavaScript dalam proses yang dikenal sebagai terjemahan.
   • Mangled JavaScript yang dihasilkan untuk mengurangi ukuran file dalam proses yang dikenal sebagai minifikasi.
   • Menyalin file JavaScript, CSS, dan HTML yang diproses dari src ke wwwroot direktori.
   • Menyuntikkan elemen berikut ke wwwroot/index.html dalam file:
     • Tag <link> , mereferensikan wwwroot/main.<hash>.css file. Tag ini ditempatkan segera sebelum tag penutup </head> .
     • Tag <script> , merujuk pada file yang dikurangi wwwroot/main.<hash>.js . Tag ini ditempatkan segera setelah tag penutup </title> .

2. Buat dan jalankan aplikasi dengan menjalankan perintah berikut di akar proyek:

   dotnet run
   

   Server web memulai aplikasi dan membuatnya tersedia di localhost.

3. Buka browser ke https://localhost:<port>. File wwwroot/index.html dilayani. Salin URL dari bilah alamat.

4. Buka instans browser lain (browser apa pun). Tempelkan URL di bilah alamat.

5. Pilih salah satu browser, ketik sesuatu di kotak teks Pesan , dan pilih tombol Kirim . Nama pengguna dan pesan unik ditampilkan di kedua halaman secara instan.

Langkah berikutnya

• Hub yang sangat ditik
• Autentikasi dan otorisasi di ASP.NET Core SignalR
• Protokol Hub MessagePack di SignalR untuk ASP.NET Core

Sumber Daya Tambahan:

• klien ASP.NET Core SignalR JavaScript
• Menggunakan hub di ASP.NET Core SignalR