チュートリアル: TypeScript と Webpack を使用した ASP.NET Core SignalR の概要

作成者: Sébastien Sougnez

このチュートリアルでは、TypeScript で記述されたクライアントをバンドルおよびビルドするための、ASP.NET Core SignalR Web アプリでの Webpack の使用法を示します。 Webpack を使用すると、開発者は Web アプリのクライアント側のリソースをバンドルおよびビルドすることができます。

このチュートリアルでは、以下の内容を学習します。

• ASP.NET Core SignalR アプリを作成する
• SignalR サーバーを構成する
• Webpack を使用してビルド パイプラインを構成する
• SignalR TypeScript クライアントを構成する
• クライアントとサーバー間の通信を有効にする

サンプル コードを表示またはダウンロードします (ダウンロード方法)。

必須コンポーネント

• Node.js (npm 使用)

Visual Studio

• Visual Studio 2022 と ASP.NET と Web 開発ワークロード。

  

Visual Studio Code

• Visual Studio Code
• C# for Visual Studio Code (最新バージョン)
• .NET 8.0 SDK

Visual Studio Code の手順では、.NET CLI を使用して ASP.NET Core の開発機能 (たとえばプロジェクトの作成) を実行します。 これらの手順は、macOS、Linux、または Windows 上で、任意のコード エディターを使用して実行できます。 Visual Studio Code 以外のものを使用する場合は、軽微な変更が必要になることがあります。

ASP.NET Core Web アプリを作成する

Visual Studio

既定では、Visual Studio は、そのインストール ディレクトリ内で見つかった npm のバージョンを使用します。 PATH 環境変数で npm を検索するように Visual Studio を構成するには:

Visual Studio を起動します。 スタート ウィンドウで、 [コードなしで続行] を選択します。

1. [ツール]>[オプション]>[プロジェクトとソリューション]>[Web パッケージ管理]>[外部 Web ツール] に移動します。

2. リストから $(PATH) エントリを選択します。 上向き矢印を選択して、エントリをリストの 2 番目の位置に移動し、[OK] を選択します。

   。

新しい ASP.NET Core Web アプリを作成するには:

1. [ファイル]>[新規]>[プロジェクト] メニュー オプションを使用して、[ASP.NET Core 空] テンプレートを選択します。 [次へ] を選択します。
2. プロジェクトに SignalRWebpack という名前を付け、[作成] を選択します。
3. [フレームワーク] ドロップダウンから [.NET 8.0 (長期的なサポート)] を選択します。 ［作成］ を選択します

プロジェクトに Microsoft.TypeScript.MSBuild NuGet パッケージを追加します。

1. ソリューション エクスプローラーで、プロジェクト ノードを右クリックし、[NuGet パッケージの管理] を選択します。 [参照] タブで Microsoft.TypeScript.MSBuild を検索し、右側にある [インストール] を選択してパッケージをインストールします。

Visual Studio によってソリューション エクスプローラーの [依存関係] ノードの下に NuGet パッケージが追加され、プロジェクトで TypeScript のコンパイルができるようになります。

Visual Studio Code

統合ターミナルで次のコマンドを実行します。

dotnet new web -o SignalRWebpack
code -r SignalRWebpack

• dotnet new コマンドによって、空の ASP.NET Core Web アプリが SignalRWebpack ディレクトリ内に作成されます。
• code コマンドにより、Visual Studio Code の現在のインスタンス内で SignalRWebpack ディレクトリが開きます。

Visual Studio Code で "このフォルダー内のファイルの作成者を信頼しますか?" と尋ねるダイアログ ボックスが表示される場合があります

• 親フォルダー内のすべてのファイルを信頼する場合は、[親フォルダー内のすべてのファイルの作成者を信頼します] を選択します。
• プロジェクト フォルダーには .NET によって生成されたファイルが含まれているので、[はい、作成者を信頼します] を選択します。
• Visual Studio Code でプロジェクトのビルドとデバッグを行うための資産を追加するように求められたら、[はい] を選択します。 Visual Studio Code でビルドとデバッグの資産を追加するように求められない場合は、[表示]>[コマンド パレット] の順に選択し、検索ボックスに「.NET」と入力します。 コマンドの一覧から、.NET: Generate Assets for Build and Debug コマンドを選択します。

Visual Studio Code により、生成されたファイル launch.json と tasks.json を含む .vscode フォルダーが追加されます。

統合ターミナルで次の .NET CLI コマンドを実行します。

dotnet add package Microsoft.TypeScript.MSBuild

上記のコマンドにより、Microsoft.TypeScript.MSBuild パッケージが追加され、プロジェクトでの TypeScript コンパイルが可能になります。

サーバーの構成

このセクションでは、SignalR メッセージを送受信するように ASP.NET Core Web アプリを構成します。

1. Program.cs で、AddSignalR を呼び出します。

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

2. 再度、Program.cs で、UseDefaultFiles と UseStaticFiles を呼び出します。

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

   上記のコードを使用すると、サーバーで "index.html" ファイルを検索して提供できるようになります。 ファイルは、ユーザーが Web アプリの完全な URL またはルート URL を入力した場合に提供されます。

3. SignalR ハブ クラス用に、プロジェクト ルート SignalRWebpack/ に Hubs という名前の新しいディレクトリを作成します。

4. 次のコードを使用して新しいファイル Hubs/ChatHub.cs を作成します。

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

   上記のコードは、サーバーがメッセージを受信すると、受信したメッセージをすべての接続されているユーザーにブロードキャストします。 すべてのメッセージを受信するのに、ジェネリック on メソッドは必要ありません。 メッセージ名に基づいて名前を付けたメソッドで十分です。

   次の点に注意してください。

   • TypeScript クライアントによって newMessage として識別されるメッセージが送信されます。
   • C# NewMessage メソッドは、データがクライアントから送信されることを想定しています。
   • Clients.All 上の SendAsync に対して呼び出しが行われます。
   • 受信したメッセージは、ハブに接続されているすべてのクライアントに送信されます。

5. ChatHub 参照を解決するには、次の using ステートメントを Program.cs の先頭に追加します。

   using SignalRWebpack.Hubs;
   

6. Program.cs で、/hub ルートを ChatHub ハブにマップします。 Hello World! を表示するコードを次のコードに置き換えます。

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

クライアントの構成

このセクションでは、Node.js プロジェクトを作成して TypeScript を JavaScript に変換し、Webpack を使用してクライアント側リソース (HTML や CSS など) をバンドルします。

1. プロジェクト ルートで次のコマンドを実行して、"package.json" ファイルを作成します。

   npm init -y
   

2. 強調表示されているプロパティを "package.json" ファイルに追加し、ファイルの変更を保存します。

   {
     "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 プロパティを true に設定して、次の手順でパッケージのインストールの警告が表示されないようにします。

3. 必要な npm パッケージをインストールします。 プロジェクト ルートで、次のコマンドを実行します。

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

   -E オプションは、セマンティック バージョン管理範囲演算子を package.json に書き込む npm の既定の動作を無効にします。 たとえば、"webpack": "5.76.1" が "webpack": "^5.76.1" の代わりに使用されています。 このオプションにより、新しいパッケージ バージョンへの予期しないアップグレードが防止されます。

   詳細については、npm-install のドキュメントを参照してください。

4. package.json ファイルの scripts プロパティを次のコードで置き換えます。

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

   次のスクリプトが定義されています。

   • build:開発モードでクライアント側のリソースをバンドルし、ファイルの変更を監視します。 ファイル監視により、プロジェクト ファイルを変更するたびにバンドルが再生成されます。 mode オプションは、ツリー シェイキングや縮小などの運用環境の最適化を無効にします。 build は開発でのみ使用します。
   • release:運用モードでクライアント側のリソースをバンドルします。
   • publish:release スクリプトを実行して、運用モードでクライアント側のリソースをバンドルします。 .NET CLI の publish コマンドを呼び出してアプリを公開します。

5. プロジェクト ルートに、次のコードを含む "webpack.config.js" という名前のファイルを作成します。

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

   上記のファイルは、Webpack コンパイル プロセスを構成します。

   • output プロパティにより、dist の既定値がオーバーライドされます。 代わりにバンドルが wwwroot ディレクトリ内に生成されます。
   • resolve.extensions 配列には、SignalR クライアント JavaScript をインポートするための .js が含まれています。

6. プロジェクト ルート SignalRWebpack/ にクライアント コード用の src という名前の新しいディレクトリを作成します。

7. サンプル プロジェクトからプロジェクト ルートに src ディレクトリをコピーします。 src ディレクトリには、次のファイルが含まれています。

   • index.html: ホームページのボイラープレート マークアップを定義します。

     <!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: ホームページの 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;
     }
     

   • tsconfig.json: ECMAScript 5 対応の JavaScript を生成するように、TypeScript コンパイラを構成します。

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

     上記のコードは、DOM 要素への参照を取得し、次の 2 つのイベント ハンドラーをアタッチします。

     • keyup: ユーザーが tbMessage テキスト ボックス内に入力したときに発生し、ユーザーが Enter キーを押したときに send 関数を呼び出します。
     • click: ユーザーが [送信] ボタンを選択したときに発生し、send 関数を呼び出します。

     HubConnectionBuilder クラスは、サーバー接続を構成するための新しいビルダーを作成します。 withUrl 関数は、ハブ URL を構成します。

     SignalR により、クライアントとサーバー間でのメッセージのやり取りが可能になります。 各メッセージには特定の名前があります。 たとえば、messageReceived という名前のメッセージは、メッセージ ゾーンに新しいメッセージを表示するためのロジックを実行できます。 特定のメッセージをリッスンするには、on 関数を使用します。 任意の数のメッセージ名をリッスンできます。 作成者の名前や受信したメッセージの内容など、パラメーターをメッセージに渡すこともできます。 クライアントがメッセージを受信すると、innerHTML 属性に作成者の名前とメッセージ コンテンツを持つ新しい div 要素が作成されます。 これはメッセージを表示する主要な div 要素に追加されます。

     WebSocket 接続を介してメッセージを送信するには、send メソッドを呼び出す必要があります。 メソッドの最初のパラメーターは、メッセージ名です。 メッセージ データは、他のパラメーターに存在しています。 この例では、newMessage として識別されたメッセージがサーバーに送信されます。 メッセージは、ユーザー名と、テキスト ボックスへのユーザー入力で構成されます。 送信が機能していると、テキスト ボックスの値はクリアされます。

8. プロジェクト ルートで、次のコマンドを実行します。

   npm i @microsoft/signalr @types/node
   

   上記のコマンドにより、次がインストールされます。

   • SignalR TypeScript クライアント。クライアントがサーバーにメッセージを送信できるようになります。
   • Node.js の TypeScript 型定義。Node.js 型のコンパイル時チェックが有効になります。

アプリをテストする

次の手順に従ってアプリの動作を確認します。

Visual Studio

1. release モードで Webpack を実行します。 パッケージ マネージャー コンソール ウィンドウを使用して、プロジェクト ルートで次のコマンドを実行します。

   npm run release
   

   このコマンドは、アプリの実行中に提供するクライアント側資産を生成します。 資産は、wwwroot フォルダーに配置されます。

   Webpack は、次のタスクを完了しました。

   • wwwroot ディレクトリの内容を消去しました。
   • "トランスコンパイル" と呼ばれるプロセスで TypeScript を JavaScript に変換しました。
   • "縮小" と呼ばれるプロセスで、生成後の JavaScript ファイルのサイズを縮小しました。
   • 処理済みの JavaScript、CSS、および HTML ファイルを src から wwwroot ディレクトリにコピーしました。
   • 次の要素を wwwroot/index.html ファイルに挿入しました。
     • wwwroot/main.<hash>.css ファイルを参照している <link> タグ。 このタグは、終了 </head> タグの直前に置かれます。
     • 縮小された wwwroot/main.<hash>.js ファイルを参照している <script> タグ。 このタグは、終了 </title> タグの直後に置かれます。

2. [デバッグ]>[デバッグなしで開始] の順に選択して、デバッガーをアタッチせずに、ブラウザーでアプリを起動します。 wwwroot/index.html ファイルは https://localhost:<port> で提供されます。

   コンパイル エラーが発生した場合は、ソリューションを閉じてから再度開いてみてください。

3. 別のブラウザー インスタンスを開き (どのブラウザーでもかまいません)、アドレス バーに URL を貼り付けます。

4. いずれかのブラウザーを選択し、[メッセージ] テキスト ボックスにメッセージを入力し、[送信] ボタンを選択します。 次の瞬間、両方のページに一意のユーザー名とメッセージが表示されます。

Visual Studio Code

1. プロジェクト ルートで次のコマンドを実行して、release モードで Webpack を実行します。

   npm run release
   

   このコマンドは、アプリの実行中に提供するクライアント側資産を生成します。 資産は、wwwroot フォルダーに配置されます。

   Webpack は、次のタスクを完了しました。

   • wwwroot ディレクトリの内容を消去しました。
   • "トランスコンパイル" と呼ばれるプロセスで TypeScript を JavaScript に変換しました。
   • "縮小" と呼ばれるプロセスで、生成後の JavaScript ファイルのサイズを縮小しました。
   • 処理済みの JavaScript、CSS、および HTML ファイルを src から wwwroot ディレクトリにコピーしました。
   • 次の要素を wwwroot/index.html ファイルに挿入しました。
     • wwwroot/main.<hash>.css ファイルを参照している <link> タグ。 このタグは、終了 </head> タグの直前に置かれます。
     • 縮小された wwwroot/main.<hash>.js ファイルを参照している <script> タグ。 このタグは、終了 </title> タグの直後に置かれます。

2. プロジェクト ルートで次のコマンドを実行して、アプリをビルドして実行します。

   dotnet run
   

   Web サーバーは、アプリを起動して、localhost 上で使用できるようにします。

3. ブラウザーを開いて https://localhost:<port> にアクセスします。 wwwroot/index.html ファイルが提供されます。 アドレス バーから URL をコピーします。

4. 別のブラウザー インスタンスを開きます (任意のブラウザー)。 アドレス バーに URL を貼り付けます。

5. いずれかのブラウザーを選択し、[メッセージ] テキスト ボックスにメッセージを入力し、[送信] ボタンを選択します。 次の瞬間、両方のページに一意のユーザー名とメッセージが表示されます。

次の手順

• 厳密に型指定されたハブ
• ASP.NET Core SignalR での認証と認可
• ASP.NET Core 用 SignalR の MessagePack ハブ プロトコル

その他のリソース

• ASP.NET Core SignalR JavaScript クライアント
• ASP.NET Core でハブを使用するSignalR