Öğretici: TypeScript ve Webpack kullanarak ASP.NET Core SignalR kullanmaya başlama

Tarafından Sébastien Sougnez

Bu öğreticide, TypeScript'te yazılmış bir istemciyi paketlemek ve derlemek için ASP.NET Core SignalR web uygulamasında Webpack kullanımı gösterilmektedir. Webpack, geliştiricilerin bir web uygulamasının istemci tarafı kaynaklarını paketlemesine ve oluşturmasına olanak tanır.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

• ASP.NET Core SignalR uygulaması oluşturma
• SignalR Sunucuyu yapılandırma
• Webpack kullanarak derleme işlem hattı yapılandırma
• TypeScript istemcisini SignalR yapılandırma
• İstemci ile sunucu arasında iletişimi etkinleştirme

Örnek kodu görüntüleme veya indirme (indirme)

Önkoşullar

• npm ile Node.js

Visual Studio

• Visual Studio 2022 ile ASP.NET ve web geliştirme iş yükü.

  

Visual Studio Code

• Visual Studio Code
• Visual Studio Code için C# (en son sürüm)
• .NET 8.0 SDK

Visual Studio Code yönergelerinde proje oluşturma gibi ASP.NET Core geliştirme işlevleri için .NET CLI kullanılır. macOS, Linux veya Windows'da ve herhangi bir kod düzenleyicisiyle bu yönergeleri izleyebilirsiniz. Visual Studio Code dışında bir araç kullanıyorsanız küçük değişiklikler yapmak gerekebilir.

ASP.NET Core web uygulamasını oluşturma

Visual Studio

Varsayılan olarak, Visual Studio yükleme dizininde bulunan npm sürümünü kullanır. Visual Studio'yu ortam değişkeninde PATH npm araması için yapılandırmak için:

Visual Studio’yu başlatın. Başlangıç penceresinde Kod olmadan devam et'i seçin.

1. Araçlar>Seçenekleri>Projeleri ve Çözümleri>Web Paketi Yönetimi>Dış Web Araçları'na gidin.

2. Listeden $(PATH) girdiyi seçin. Girdiyi listedeki ikinci konuma taşımak için yukarı oku seçin ve Tamam'ı seçin:

   .

Yeni bir ASP.NET Core web uygulaması oluşturmak için:

1. Dosya>Yeni>Proje menü seçeneğini kullanın ve ASP.NET Çekirdek Boş şablonunu seçin. İleri'yi seçin.
2. Projeyi SignalRWebpackadlandırın ve Oluştur'u seçin.
3. Çerçeve açılan listesinden .NET 8.0 (Uzun Vadeli Destek) seçeneğini belirleyin. Oluştur'u belirleyin.

Microsoft.TypeScript.MSBuild NuGet paketini projeye ekleyin:

1. Çözüm Gezgini proje düğümüne sağ tıklayın ve NuGet Paketlerini Yönet'i seçin. Paketi yüklemek için Gözat sekmesinde sağ tarafta Yükle'yi arayın Microsoft.TypeScript.MSBuild ve seçin.

Visual Studio, Projede TypeScript derlemesini etkinleştirerek NuGet paketini Çözüm Gezgini Bağımlılıklar düğümü altına ekler.

Visual Studio Code

Tümleşik Terminalde aşağıdaki komutları çalıştırın:

dotnet new web -o SignalRWebpack
code -r SignalRWebpack

• komutu dizinde dotnet newSignalRWebpack boş bir ASP.NET Core web uygulaması oluşturur.
• Komutu, code visual studio code'un geçerli örneğinde dizini açar SignalRWebpack .

Visual Studio Code şu soruyu soran bir iletişim kutusu görüntüleyebilir: Bu klasördeki dosyaların yazarlarını güveniyor musunuz?

• Üst klasördeki tüm dosyalara güveniyorsanız, Üst klasördeki tüm dosyaların yazarlarını güven'i seçin.
• Proje klasöründe .NET tarafından oluşturulan dosyalar olduğundan Evet, yazarlara güveniyorum'ı seçin.
• Visual Studio Code projeyi oluşturmak ve hatalarını ayıklamak için varlık eklemenizi istediğinde Evet'i seçin. Visual Studio Code derleme ve hata ayıklama varlıkları eklemeyi önermiyorsa, Komut Paletini Görüntüle'yi>seçin ve arama kutusuna ".NET" yazın. Komut listesinden .NET: Generate Assets for Build and Debug komutunu seçin.

Visual Studio Code, oluşturulan launch.json ve tasks.json dosyaları içeren bir .vscode klasör ekler.

Tümleşik Terminalde aşağıdaki .NET CLI komutunu çalıştırın:

dotnet add package Microsoft.TypeScript.MSBuild

Yukarıdaki komut, Projede TypeScript derlemesini etkinleştirerek Microsoft.TypeScript.MSBuild paketini ekler.

Sunucuyu yapılandırma

Bu bölümde, ASP.NET Core web uygulamasını ileti gönderecek ve alacak SignalR şekilde yapılandıracaksınız.

1. içinde Program.csçağrısı:AddSignalR

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

2. Yeniden, içinde Program.csçağrısı UseDefaultFiles ve UseStaticFiles:

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

   Yukarıdaki kod, sunucunun dosyayı bulmasını ve sunmasını index.html sağlar. Kullanıcı tam URL'sini veya web uygulamasının kök URL'sini girse de dosya sunulur.

3. Hub sınıfı için SignalR proje kökünde SignalRWebpack/adlı Hubs yeni bir dizin oluşturun.

4. Aşağıdaki kodla yeni bir dosya Hubs/ChatHub.csoluşturun:

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

   Yukarıdaki kod, alınan iletileri sunucu aldıktan sonra tüm bağlı kullanıcılara yayınlar. Tüm iletileri almak için genel on bir yönteme sahip olmak gereksizdir. İleti adından sonra adlandırılmış bir yöntem yeterlidir.

   Bu örnekte:

   • TypeScript istemcisi olarak newMessagetanımlanan bir ileti gönderir.
   • C# NewMessage yöntemi, istemci tarafından gönderilen verileri bekler.
   • İstemciler.Tümü'ne SendAsyncbir çağrı yapılır.
   • Alınan iletiler hub'a bağlı tüm istemcilere gönderilir.

5. Başvuruyu çözümlemek ChatHub için üst Program.cs kısmına aşağıdaki using deyimi ekleyin:

   using SignalRWebpack.Hubs;
   

6. içinde Program.cs, yolu hub'a eşleyin /hubChatHub . Görüntülenen Hello World! kodu aşağıdaki kodla değiştirin:

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

İstemciyi yapılandırma

Bu bölümde, TypeScript'i JavaScript'e dönüştürmek ve HTML ve CSS gibi istemci tarafı kaynaklarını Webpack kullanarak paketlemek için bir Node.js projesi oluşturacaksınız.

1. Bir dosya oluşturmak package.json için proje kökünde aşağıdaki komutu çalıştırın:

   npm init -y
   

2. Vurgulanan özelliği dosyaya package.json ekleyin ve dosya değişikliklerini kaydedin:

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

   özelliğini true olarak private ayarlamak, sonraki adımda paket yükleme uyarılarını engeller.

3. Gerekli npm paketlerini yükleyin. Proje kökünden aşağıdaki komutu çalıştırın:

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

   seçeneği-E, npm'nin varsayılan anlamsal sürüm oluşturma aralığı işleçleri package.jsonyazma davranışını devre dışı bırakır. Örneğin, "webpack": "5.76.1" yerine "webpack": "^5.76.1"kullanılır. Bu seçenek, daha yeni paket sürümlerine istenmeyen yükseltmeleri engeller.

   Daha fazla bilgi için npm-install belgelerine bakın.

4. dosyasının scriptspackage.json özelliğini aşağıdaki kodla değiştirin:

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

   Aşağıdaki betikler tanımlanır:

   • build: İstemci tarafı kaynaklarını geliştirme modunda paketler ve dosya değişikliklerini izler. Dosya izleyicisi, bir proje dosyası her değiştiğinde paketin yeniden oluşturmasına neden olur. seçeneği mode ağaç sallama ve küçültme gibi üretim iyileştirmelerini devre dışı bırakır. yalnızca geliştirme aşamasında kullanın build .
   • release: İstemci tarafı kaynaklarını üretim modunda paketler.
   • publish: İstemci tarafı kaynaklarını üretim modunda paketlemek için betiği çalıştırır release . Uygulamayı yayımlamak için .NET CLI'nın yayımla komutunu çağırır.

5. Aşağıdaki kodla proje kökünde adlı webpack.config.js bir dosya oluşturun:

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

   Yukarıdaki dosya Webpack derleme işlemini yapılandırıyor:

   • özelliği varsayılan output değerini distgeçersiz kılar. Bunun yerine paket dizinde wwwroot yayılır.
   • Dizi, resolve.extensions istemci JavaScript'ini içeri aktarmayı SignalR içerir.js.

6. İstemci kodu için proje kökünde SignalRWebpack/adlı src yeni bir dizin oluşturun.

7. Örnek projedeki src dizini ve içeriğini proje köküne kopyalayın. Dizin src aşağıdaki dosyaları içerir:

   • index.html, giriş sayfasının ortak işaretlemesini tanımlar:

     <!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, giriş sayfası için CSS stilleri sağlar:

     *,
     *::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, EcMAScript 5 uyumlu JavaScript üretmek için TypeScript derleyicisini yapılandıran:

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

     Yukarıdaki kod DOM öğelerine başvuruları alır ve iki olay işleyicisi ekler:

     • keyup: Kullanıcı metin kutusuna tbMessage yazdığınızda tetiklenir ve kullanıcı Enter tuşuna bastığında işlevini çağırırsend.
     • click: Kullanıcı Gönder düğmesini seçtiğinde ve çağrılar send işlevi çağrıldığında tetikler.

     sınıfı, HubConnectionBuilder sunucu bağlantısını yapılandırmak için yeni bir oluşturucu oluşturur. İşlev, withUrl hub URL'sini yapılandırıyor.

     SignalR bir istemci ile sunucu arasında ileti alışverişini etkinleştirir. Her iletinin belirli bir adı vardır. Örneğin, ada messageReceived sahip iletiler, yeni iletiyi ileti bölgesinde görüntülemekle sorumlu mantığı çalıştırabilir. Belirli bir iletiyi dinlemek işlevi aracılığıyla on yapılabilir. herhangi bir sayıda ileti adı dinlenebilir. Ayrıca, yazarın adı ve alınan iletinin içeriği gibi parametreleri iletiye geçirmek de mümkündür. İstemci bir ileti aldığında, yazarın adı ve özniteliğindeki innerHTML ileti içeriğiyle yeni div bir öğe oluşturulur. İletileri görüntüleyen ana div öğeye eklenir.

     WebSockets bağlantısı üzerinden ileti göndermek için yönteminin çağrılması send gerekir. Yöntemin ilk parametresi ileti adıdır. İleti verileri diğer parametrelerde yer alır. Bu örnekte, olarak newMessage tanımlanan bir ileti sunucuya gönderilir. İleti, bir metin kutusundan kullanıcı adı ve kullanıcı girişinden oluşur. Gönder işe yararsa, metin kutusu değeri temizlenir.

8. Proje kökünde aşağıdaki komutu çalıştırın:

   npm i @microsoft/signalr @types/node
   

   Yukarıdaki komut yüklenir:

   • İstemcinin SignalR sunucuya ileti göndermesine izin veren TypeScript istemcisi.
   • Node.js için TypeScript türü tanımları, Node.js türlerinin derleme zamanı denetimini etkinleştirir.

Uygulamayı test etme

Uygulamanın aşağıdaki adımlarla çalıştığını onaylayın:

Visual Studio

1. Webpack'i modda release çalıştırın. Paket Yöneticisi Konsolu penceresini kullanarak proje kökünde aşağıdaki komutu çalıştırın.

   npm run release
   

   Bu komut, uygulamayı çalıştırırken sunulacak istemci tarafı varlıklarını oluşturur. Varlıklar klasöre wwwroot yerleştirilir.

   Webpack aşağıdaki görevleri tamamladı:

   • Dizinin içeriği temizlenir wwwroot .
   • Transpilation olarak bilinen bir işlemde TypeScript JavaScript'e dönüştürüldü.
   • Küçültme olarak bilinen bir işlemde dosya boyutunu küçültmek için oluşturulan JavaScript'i mangled.
   • İşlenen JavaScript, CSS ve HTML dosyalarını dizinine srcwwwroot kopyaladı.
   • Dosyaya aşağıdaki öğeler eklendi wwwroot/index.html :
     • <link> Dosyaya başvuran wwwroot/main.<hash>.css bir etiket. Bu etiket, kapanış </head> etiketinden hemen önce yerleştirilir.
     • <script> Küçültülen wwwroot/main.<hash>.js dosyaya başvuran bir etiket. Bu etiket, kapanış </title> etiketinden hemen sonra yerleştirilir.

2. Hata ayıklayıcıyı eklemeden uygulamayı tarayıcıda başlatmak için Hata ayıklama olmadan başlat'ı seçin.> Dosya wwwroot/index.html konumunda https://localhost:<port>sunulur.

   Derleme hataları varsa çözümü kapatıp yeniden açmayı deneyin.

3. Başka bir tarayıcı örneği (herhangi bir tarayıcı) açın ve URL'yi adres çubuğuna yapıştırın.

4. Tarayıcılardan birini seçin, İleti metin kutusuna bir şey yazın ve Gönder düğmesini seçin. Benzersiz kullanıcı adı ve ileti her iki sayfada da anında görüntülenir.

Visual Studio Code

1. Proje kökünde release aşağıdaki komutu yürüterek Webpack'i modda çalıştırın:

   npm run release
   

   Bu komut, uygulamayı çalıştırırken sunulacak istemci tarafı varlıklarını oluşturur. Varlıklar klasöre wwwroot yerleştirilir.

   Webpack aşağıdaki görevleri tamamladı:

   • Dizinin içeriği temizlenir wwwroot .
   • Transpilation olarak bilinen bir işlemde TypeScript JavaScript'e dönüştürüldü.
   • Küçültme olarak bilinen bir işlemde dosya boyutunu küçültmek için oluşturulan JavaScript'i mangled.
   • İşlenen JavaScript, CSS ve HTML dosyalarını dizinine srcwwwroot kopyaladı.
   • Dosyaya aşağıdaki öğeler eklendi wwwroot/index.html :
     • <link> Dosyaya başvuran wwwroot/main.<hash>.css bir etiket. Bu etiket, kapanış </head> etiketinden hemen önce yerleştirilir.
     • <script> Küçültülen wwwroot/main.<hash>.js dosyaya başvuran bir etiket. Bu etiket, kapanış </title> etiketinden hemen sonra yerleştirilir.

2. Proje kökünde aşağıdaki komutu yürüterek uygulamayı derleyin ve çalıştırın:

   dotnet run
   

   Web sunucusu uygulamayı başlatır ve localhost'ta kullanılabilir hale getirir.

3. için bir tarayıcı https://localhost:<port>açın. Dosya wwwroot/index.html sunulur. Adres çubuğundan URL'yi kopyalayın.

4. Başka bir tarayıcı örneği (herhangi bir tarayıcı) açın. URL'yi adres çubuğuna yapıştırın.

5. Tarayıcılardan birini seçin, İleti metin kutusuna bir şey yazın ve Gönder düğmesini seçin. Benzersiz kullanıcı adı ve ileti her iki sayfada da anında görüntülenir.

Sonraki adımlar

• Kesin türemiş hub'lar
• ASP.NET Core'da kimlik doğrulaması ve yetkilendirme SignalR
• ASP.NET Core için messagepack SignalR hub protokolü

Ek kaynaklar

• ASP.NET Core SignalR JavaScript istemcisi
• ASP.NET Core'da hub'ları kullanma SignalR