Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

SignalR を使ったアプリケーション開発をより快適に!

neno
January 28, 2023

SignalR を使ったアプリケーション開発をより快適に!

neno

January 28, 2023
Tweet

More Decks by neno

Other Decks in Technology

Transcript

  1. 自己紹介 1 • 所属: NTTコミュニケーションズ イノベーションセンター • 趣味: C#, OSS,

    ドール, 一眼(α7 IV) • 執心領域 • C# ⇔ TypeScript • SignalR 何縫ねの。 nenoNaninu nenoMake ブログ https://blog.neno.dev その他 https://neno.dev
  2. SignalR を使ったアプリケーション開発 4 • SwaggerUI 使ってますよね。 • ASP.NET Core のテンプレに

    組み込まれている。 WEB API の場合… WEB API を定義したら エンドポイントを叩ける GUI が自動生成される
  3. SignalR を使ったアプリケーション開発 9 SignalR Hub (server) たぶん多くの人がこんな感じ。 WEB Frontend Native

    GUI App (WPF, etc.) 開発中のプロダクトの client app に手を入れる 開発中のプロダクトの client app に手を入れる
  4. SignalR を使ったアプリケーション開発 10 SignalR Hub (server) たぶん多くの人がこんな感じ。 WEB Frontend Native

    GUI App (WPF, etc.) 開発中のプロダクトの client app に手を入れる 開発中のプロダクトの client app に手を入れる ちょっと試したいだけなのに 適当な場所にボタンと入力 フィールド生やしてコールバッ クバインドしてサーバから送ら れてきたデータをどっかに出力 してうんぬんかんぬん
  5. SignalR を使ったアプリケーション開発 11 SignalR Hub (server) たぶん多くの人がこんな感じ。 WEB Frontend Native

    GUI App (WPF, etc.) 開発中のプロダクトの client app に手を入れる 開発中のプロダクトの client app に手を入れる ちょっと試したいだけなのに 適当な場所にボタンと入力 フィールド生やしてコールバッ クバインドしてサーバから送ら れてきたデータをどっかに出力 してうんぬんかんぬん Console App
  6. SignalR を使ったアプリケーション開発 12 SignalR Hub (server) たぶん多くの人がこんな感じ。 WEB Frontend Native

    GUI App (WPF, etc.) Console App 開発用の Console App を用意 開発項目に合わせ都度変更 開発中のプロダクトの client app に手を入れる 開発中のプロダクトの client app に手を入れる ちょっと試したいだけなのに 適当な場所にボタンと入力 フィールド生やしてコールバッ クバインドしてサーバから送ら れてきたデータをどっかに出力 してうんぬんかんぬん
  7. SignalR を使ったアプリケーション開発 13 SignalR Hub (server) たぶん多くの人がこんな感じ。 WEB Frontend Native

    GUI App (WPF, etc.) Console App 開発用の Console App を用意 開発項目に合わせ都度変更 開発中のプロダクトの client app に手を入れる 開発中のプロダクトの client app に手を入れる ちょっと試したいだけなのに 適当な場所にボタンと入力 フィールド生やしてコールバッ クバインドしてサーバから送ら れてきたデータをどっかに出力 してうんぬんかんぬん 複数のコネクション 張るためにコンソール 複数開いてうんぬん
  8. SignalR を使ったアプリケーション開発 14 SignalR Hub (server) たぶん多くの人がこんな感じ。 WEB Frontend Native

    GUI App (WPF, etc.) Console App 開発用の Console App を用意 開発項目に合わせ都度変更 開発中のプロダクトの client app に手を入れる 開発中のプロダクトの client app に手を入れる ちょっと試したいだけなのに 適当な場所にボタンと入力 フィールド生やしてコールバッ クバインドしてサーバから送ら れてきたデータをどっかに出力 してうんぬんかんぬん 複数のコネクション 張るためにコンソール 複数開いてうんぬん 入力も出力もコンソール。 つまり割としっかり実装しない とコンソールに何か書き込んで いる時に受信したデータがコン ソール上に表示され…とかが 発生してうんぬんかんぬん
  9. SignalR を使ったアプリケーション開発 17 😭めんどくさい😭 SignalR の Hub / Receiver の

    interface 定義をしたら Hub / Receiver のメソッドを呼び出せる/出される GUI app が自動生成されれば大解決のハズ! 双方向の RPC ですし、さらにgrouping とかが 絡むため REST に比べてメンドクサイのは 仕方がないといえば仕方ない…? いやしかし…!
  10. SignalR を使ったアプリケーション開発 19 • SignalR 使ったアプリを快適に開発するための GUI を自動生成 • Hub

    のメソッドの呼び出し • Hub から呼ばれたメソッドに 渡されたデータの表示 • 必要な手順は2点だけ • http pipeline に middleware の追加 • Hub と Receiver を定義してる interface に属性を付与 • JWT 認証をサポート • プリミティブ型以外の 入力/表示はJSON 形式 https://github.com/nenoNaninu/TypedSignalR.Client.DevTools TypedSignalR.Client.DevTools SignalR 版 SwaggerUI
  11. Guid / DateTime 等の Built-in で サポートしている型は README を参照…! TypedSignalR.Client.DevTools

    36 Client-to-server invocation https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#built-in-types パラメータ名 : 型名 ユーザ定義型は JSON 形式で入力 メソッド名
  12. Guid / DateTime 等の Built-in で サポートしている型は README を参照…! TypedSignalR.Client.DevTools

    37 Client-to-server invocation https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#built-in-types パラメータ名 : 型名 ユーザ定義型は JSON 形式で入力 メソッド名 JSON が壊れてたら ちゃんと教えてくれます。
  13. Return Type が以下の何れかなら Server-to-client streaming TypedSignalR.Client.DevTools 59 Server-to-client streaming https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming

    IAsyncEnumerable<T> Task<IAsyncEnumerable<T>> Task<ChannelReader<T>> CancellationToken 等の入力不要 のパラメータはグレーアウト
  14. Return Type が以下の何れかなら Server-to-client streaming TypedSignalR.Client.DevTools 60 Server-to-client streaming https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming

    IAsyncEnumerable<T> Task<IAsyncEnumerable<T>> Task<ChannelReader<T>> CancellationToken 等の入力不要 のパラメータはグレーアウト ストリームに流れてくる値は メソッド名 : OnNext, OnCompleted, OnError という形で表示される
  15. TypedSignalR.Client.DevTools 63 JWT Authentification Hub に [Authorize] を付与 Hub の

    method に [Authorize] を付与 https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#jwt-authentification-support
  16. TypedSignalR.Client.DevTools 64 JWT Authentification Hub に [Authorize] を付与 JWT 入力フィールドが

    自動で現われる Hub の method に [Authorize] を付与 https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#jwt-authentification-support
  17. TypedSignalR.Client.DevTools の仕組み 69 https://www.nuget.org/packages/TypedSignalR.Client.DevTools/#dependencies-body-tab 依存関係をみてみましょう。 [Hub] / [Receiver] 属性が含まれるパッケージ SignalR

    の Hub を解析して Hub の仕様を表現する JSON (spec.json) を 生成するための Source Generator コンパイル時に interface を ガリガリ解析してJSON を作り アセンブリに埋め込む
  18. TypedSignalR.Client.DevTools の仕組み 70 https://www.nuget.org/packages/TypedSignalR.Client.DevTools/#dependencies-body-tab 依存関係をみてみましょう。 [Hub] / [Receiver] 属性が含まれるパッケージ SignalR

    の Hub を解析して Hub の仕様を表現する JSON (spec.json) を 生成するための Source Generator コンパイル時に interface を ガリガリ解析してJSON を作り アセンブリに埋め込む 1. app.MapHub<T>() を見つける 2. T が実装している Hub / Hub<T> の型引数で渡される Receiver の interface を見つけ 3. それらの interface で定義され ているメソッドを解析する
  19. TypedSignalR.Client.DevTools の仕組み 71 https://www.nuget.org/packages/TypedSignalR.Client.DevTools/#dependencies-body-tab 依存関係をみてみましょう。 [Hub] / [Receiver] 属性が含まれるパッケージ SignalR

    の Hub を解析して Hub の仕様を表現する JSON (spec.json) を 生成するための Source Generator spec.json を元に GUI を構築する React アプリ(Next.js 製) が埋め込まれている コンパイル時に interface を ガリガリ解析してJSON を作り アセンブリに埋め込む 1. app.MapHub<T>() を見つける 2. T が実装している Hub / Hub<T> の型引数で渡される Receiver の interface を見つけ 3. それらの interface で定義され ているメソッドを解析する
  20. TypedSignalR.Client.DevTools の仕組み 72 https://www.nuget.org/packages/TypedSignalR.Client.DevTools/#dependencies-body-tab 依存関係をみてみましょう。 [Hub] / [Receiver] 属性が含まれるパッケージ SignalR

    の Hub を解析して Hub の仕様を表現する JSON (spec.json) を 生成するための Source Generator spec.json を元に GUI を構築する React アプリ(Next.js 製) が埋め込まれている /signalr-dev を叩いたら これが読みだされる コンパイル時に interface を ガリガリ解析してJSON を作り アセンブリに埋め込む 1. app.MapHub<T>() を見つける 2. T が実装している Hub / Hub<T> の型引数で渡される Receiver の interface を見つけ 3. それらの interface で定義され ているメソッドを解析する
  21. • C# の SignalR Client を 強く型付けするための Source Generator TypedSignalR.Client

    シリーズ 83 https://github.com/nenoNaninu/TypedSignalR.Client#related-work TypedSignalR.Client
  22. • C# の SignalR Client を 強く型付けするための Source Generator TypedSignalR.Client

    シリーズ 84 https://github.com/nenoNaninu/TypedSignalR.Client#related-work TypedSignalR.Client .TypeScript TypedSignalR.Client • TypeScript の SignalR Client を強く型付け するためのライブラリ 及び .NET Tool
  23. • C# の SignalR Client を 強く型付けするための Source Generator TypedSignalR.Client

    シリーズ 85 https://github.com/nenoNaninu/TypedSignalR.Client#related-work TypedSignalR.Client .TypeScript TypedSignalR.Client • TypeScript の SignalR Client を強く型付け するためのライブラリ 及び .NET Tool 型で悩む必要は もうありません! 型で悩む必要は もうありません!
  24. • C# の SignalR Client を 強く型付けするための Source Generator TypedSignalR.Client

    シリーズ 86 https://github.com/nenoNaninu/TypedSignalR.Client#related-work TypedSignalR.Client .TypeScript TypedSignalR.Client MessagePack Hub Protocol を TypeScript でも簡単に利用可能! • TypeScript の SignalR Client を強く型付け するためのライブラリ 及び .NET Tool 型で悩む必要は もうありません! 型で悩む必要は もうありません!
  25. • C# の SignalR Client を 強く型付けするための Source Generator TypedSignalR.Client

    シリーズ 87 https://github.com/nenoNaninu/TypedSignalR.Client#related-work TypedSignalR.Client .TypeScript TypedSignalR.Client .DevTools TypedSignalR.Client MessagePack Hub Protocol を TypeScript でも簡単に利用可能! • TypeScript の SignalR Client を強く型付け するためのライブラリ 及び .NET Tool 型で悩む必要は もうありません! 型で悩む必要は もうありません! • SignalR 版 SwaggerUI • 今回の登壇のテーマ
  26. • C# の SignalR Client を 強く型付けするための Source Generator TypedSignalR.Client

    シリーズ 88 https://github.com/nenoNaninu/TypedSignalR.Client#related-work TypedSignalR.Client .TypeScript TypedSignalR.Client .DevTools TypedSignalR.Client New! • TypeScript の SignalR Client を強く型付け するためのライブラリ 及び .NET Tool 型で悩む必要は もうありません! 型で悩む必要は もうありません! • SignalR 版 SwaggerUI • 今回の登壇のテーマ MessagePack Hub Protocol を TypeScript でも簡単に利用可能!
  27. TypedSignalR.Client シリーズ 89 SignalR 機能対応表 TypedSignalR.Client TypedSignalR.Client .TypeScript TypedSignalR.Client .DevTools

    Client-to-server Invocation ⭕️ ⭕️ ⭕️ Server-to-client Invocation (broadcast) ⭕️ ⭕️ ⭕️ Client-to-server streaming ⭕️ ⭕️ ⭕️ Server-to-client streaming ⭕️ ⭕️ ⭕️ Client results (.NET 7) ⭕️ ⭕️ https://github.com/nenoNaninu/TypedSignalR.Client#related-work
  28. TypedSignalR.Client シリーズ 90 SignalR 機能対応表 TypedSignalR.Client TypedSignalR.Client .TypeScript TypedSignalR.Client .DevTools

    Client-to-server Invocation ⭕️ ⭕️ ⭕️ Server-to-client Invocation (broadcast) ⭕️ ⭕️ ⭕️ Client-to-server streaming ⭕️ ⭕️ ⭕️ Server-to-client streaming ⭕️ ⭕️ ⭕️ Client results (.NET 7) ⭕️ ⭕️ https://github.com/nenoNaninu/TypedSignalR.Client#related-work .NET 7 で新規追加された 機能もしっかりサポート!
  29. TypedSignalR.Client シリーズ 91 SignalR 機能対応表 TypedSignalR.Client TypedSignalR.Client .TypeScript TypedSignalR.Client .DevTools

    Client-to-server Invocation ⭕️ ⭕️ ⭕️ Server-to-client Invocation (broadcast) ⭕️ ⭕️ ⭕️ Client-to-server streaming ⭕️ ⭕️ ⭕️ Server-to-client streaming ⭕️ ⭕️ ⭕️ Client results (.NET 7) ⭕️ ⭕️ もう暫くお待ちください…! https://github.com/nenoNaninu/TypedSignalR.Client#related-work .NET 7 で新規追加された 機能もしっかりサポート!
  30. まとめ 92 • 導入方法 • ミドルウェア追加 • Hub と Receiver

    の interface に 属性をアノテーションするだけ! • 他の TypedSignalR.Client シリーズも使って 強く型付けされた快適なコーディングライフを送ろう! TypedSignalR.Client.DevTools を使って 快適にSignalR を活用したアプリケーションを開発しよう! あとは SwaggerUI みたいに GUI ぽちぽちして実行!快適デバッグ!