Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

neno
January 28, 2023

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

neno

January 28, 2023
Tweet

More Decks by neno

Other Decks in Technology

Transcript

  1. SignalR を使った
    アプリケーション開発をより快適に!
    .NET ラボ 2023/01/28
    何縫ねの。

    View Slide

  2. 自己紹介
    1
    • 所属: NTTコミュニケーションズ
    イノベーションセンター
    • 趣味: C#, OSS, ドール, 一眼(α7 IV)
    • 執心領域
    • C# ⇔ TypeScript
    • SignalR
    何縫ねの。
    nenoNaninu
    nenoMake
    ブログ https://blog.neno.dev
    その他 https://neno.dev

    View Slide

  3. SignalR を使った
    アプリケーション開発どうしてますか?
    2

    View Slide

  4. SignalR を使ったアプリケーション開発
    3
    • SwaggerUI 使ってますよね。
    • ASP.NET Core のテンプレに
    組み込まれている。
    WEB API の場合…

    View Slide

  5. SignalR を使ったアプリケーション開発
    4
    • SwaggerUI 使ってますよね。
    • ASP.NET Core のテンプレに
    組み込まれている。
    WEB API の場合…
    WEB API を定義したら
    エンドポイントを叩ける
    GUI が自動生成される

    View Slide

  6. SignalR を使ったアプリケーション開発
    5
    SignalR を使う場合は?

    View Slide

  7. SignalR を使ったアプリケーション開発
    6
    たぶん多くの人がこんな感じ。

    View Slide

  8. SignalR を使ったアプリケーション開発
    7
    SignalR Hub
    (server)
    たぶん多くの人がこんな感じ。

    View Slide

  9. SignalR を使ったアプリケーション開発
    8
    SignalR Hub
    (server)
    たぶん多くの人がこんな感じ。
    WEB
    Frontend
    Native GUI App
    (WPF, etc.)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. SignalR を使ったアプリケーション開発
    15
    😭めんどくさい😭

    View Slide

  17. SignalR を使ったアプリケーション開発
    16
    😭めんどくさい😭
    双方向の RPC ですし、さらにgrouping とかが
    絡むため REST に比べてメンドクサイのは
    仕方がないといえば仕方ない…?
    いやしかし…!

    View Slide

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

    View Slide

  19. SignalR を使ったアプリケーション開発
    18
    SignalR にも
    SwaggerUI 的なのが必要…!

    View Slide

  20. 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

    View Slide

  21. TypedSignalR.Client.DevTools
    20
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    使い方
    ①Middleware を追加
    ②属性を付与

    View Slide

  22. TypedSignalR.Client.DevTools
    21
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    使い方
    ①Middleware を追加
    ②属性を付与
    Middleware を追加

    View Slide

  23. TypedSignalR.Client.DevTools
    22
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    使い方
    属性を付与
    ①Middleware を追加
    ②属性を付与
    Middleware を追加

    View Slide

  24. TypedSignalR.Client.DevTools
    23
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    使い方
    属性を付与
    属性を付与
    ①Middleware を追加
    ②属性を付与
    Middleware を追加

    View Slide

  25. TypedSignalR.Client.DevTools
    24
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    使い方
    属性を付与
    属性を付与
    ①Middleware を追加
    ②属性を付与
    通常通りに実装。特別な事必要なし。
    Middleware を追加

    View Slide

  26. TypedSignalR.Client.DevTools
    25
    あとは /signalr-dev にアクセスすればいいだけ!
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    使い方

    View Slide

  27. TypedSignalR.Client.DevTools
    26
    あとは /signalr-dev にアクセスすればいいだけ!
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    使い方
    自動で開発用 GUI が構築
    (まるで SwaggerUI)

    View Slide

  28. TypedSignalR.Client.DevTools
    27
    あとは /signalr-dev にアクセスすればいいだけ!
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    使い方
    自動で開発用 GUI が構築
    (まるで SwaggerUI)
    launchSettings.json に
    swagger 用と signalr-dev 用を
    用意しておくと便利

    View Slide

  29. TypedSignalR.Client.DevTools
    28
    サポートしている機能
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    • Client-to-server invocation
    • Server-to-client invocation
    • Client-to-server streaming
    • Server-to-client streaming
    • JWT Authentification

    View Slide

  30. TypedSignalR.Client.DevTools
    29
    Client-to-server invocation
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#built-in-types

    View Slide

  31. TypedSignalR.Client.DevTools
    30
    Client-to-server invocation
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#built-in-types

    View Slide

  32. TypedSignalR.Client.DevTools
    31
    Client-to-server invocation
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#built-in-types
    メソッド名

    View Slide

  33. TypedSignalR.Client.DevTools
    32
    Client-to-server invocation
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#built-in-types
    パラメータ名 : 型名
    メソッド名

    View Slide

  34. TypedSignalR.Client.DevTools
    33
    Client-to-server invocation
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#built-in-types
    パラメータ名 : 型名
    メソッド名

    View Slide

  35. TypedSignalR.Client.DevTools
    34
    Client-to-server invocation
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#built-in-types
    パラメータ名 : 型名 ユーザ定義型は
    JSON 形式で入力
    メソッド名

    View Slide

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

    View Slide

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

    View Slide

  38. 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 が壊れてたら
    ちゃんと教えてくれます。

    View Slide

  39. TypedSignalR.Client.DevTools
    38
    Client-to-server invocation
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools

    View Slide

  40. TypedSignalR.Client.DevTools
    39
    Client-to-server invocation
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools

    View Slide

  41. TypedSignalR.Client.DevTools
    40
    Client-to-server invocation
    戻り値の型
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools

    View Slide

  42. TypedSignalR.Client.DevTools
    41
    Client-to-server invocation
    戻り値の型
    戻り値は
    JSON 形式で表示
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools

    View Slide

  43. https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming
    TypedSignalR.Client.DevTools
    42
    Server-to-client invocation (broadcast)

    View Slide

  44. https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming
    TypedSignalR.Client.DevTools
    43
    Server-to-client invocation (broadcast)

    View Slide

  45. https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming
    TypedSignalR.Client.DevTools
    44
    Server-to-client invocation (broadcast)

    View Slide

  46. https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming
    TypedSignalR.Client.DevTools
    45
    Server-to-client invocation (broadcast)
    右のパネルにサーバから
    呼ばれた メソッド名 と
    渡されたデータ が表示

    View Slide

  47. https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming
    TypedSignalR.Client.DevTools
    46
    Server-to-client invocation (broadcast)
    右のパネルにサーバから
    呼ばれた メソッド名 と
    渡されたデータ が表示
    Indent のcheck boxを
    マークするとインデント
    された JSON が表示される

    View Slide

  48. TypedSignalR.Client.DevTools
    47
    Client-to-server streaming
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#client-to-server-streaming

    View Slide

  49. TypedSignalR.Client.DevTools
    48
    Client-to-server streaming
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#client-to-server-streaming

    View Slide

  50. TypedSignalR.Client.DevTools
    49
    Client-to-server streaming
    IAsyncEnumerable
    ChannelReader
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#client-to-server-streaming

    View Slide

  51. TypedSignalR.Client.DevTools
    50
    Client-to-server streaming
    IAsyncEnumerable
    ChannelReader
    パラメータに何れかが存在したら
    Client-to-server streaming
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#client-to-server-streaming

    View Slide

  52. TypedSignalR.Client.DevTools
    51
    Client-to-server streaming
    IAsyncEnumerable
    ChannelReader
    パラメータに何れかが存在したら
    Client-to-server streaming
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#client-to-server-streaming
    Next, Complete, Cancel の 3 つで
    ストリームを操作

    View Slide

  53. TypedSignalR.Client.DevTools
    52
    Server-to-client streaming
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming

    View Slide

  54. TypedSignalR.Client.DevTools
    53
    Server-to-client streaming
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming

    View Slide

  55. TypedSignalR.Client.DevTools
    54
    Server-to-client streaming
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming
    IAsyncEnumerable
    Task>
    Task>

    View Slide

  56. TypedSignalR.Client.DevTools
    55
    Server-to-client streaming
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming
    IAsyncEnumerable
    Task>
    Task>
    Return Type が以下の何れかなら
    Server-to-client streaming

    View Slide

  57. TypedSignalR.Client.DevTools
    56
    Server-to-client streaming
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming
    IAsyncEnumerable
    Task>
    Task>
    Return Type が以下の何れかなら
    Server-to-client streaming

    View Slide

  58. TypedSignalR.Client.DevTools
    57
    Server-to-client streaming
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming
    IAsyncEnumerable
    Task>
    Task>
    [EnumeratorCancellation]
    とセット
    Return Type が以下の何れかなら
    Server-to-client streaming

    View Slide

  59. TypedSignalR.Client.DevTools
    58
    Server-to-client streaming
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#server-to-client-streaming
    IAsyncEnumerable
    Task>
    Task>
    CancellationToken 等の入力不要
    のパラメータはグレーアウト
    [EnumeratorCancellation]
    とセット
    Return Type が以下の何れかなら
    Server-to-client streaming

    View Slide

  60. 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
    Task>
    Task>
    CancellationToken 等の入力不要
    のパラメータはグレーアウト

    View Slide

  61. 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
    Task>
    Task>
    CancellationToken 等の入力不要
    のパラメータはグレーアウト
    ストリームに流れてくる値は
    メソッド名 : OnNext, OnCompleted, OnError
    という形で表示される

    View Slide

  62. TypedSignalR.Client.DevTools
    61
    JWT Authentification
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#jwt-authentification-support

    View Slide

  63. TypedSignalR.Client.DevTools
    62
    JWT Authentification Hub に [Authorize] を付与
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#jwt-authentification-support

    View Slide

  64. TypedSignalR.Client.DevTools
    63
    JWT Authentification Hub に [Authorize] を付与
    Hub の method に
    [Authorize] を付与
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#jwt-authentification-support

    View Slide

  65. TypedSignalR.Client.DevTools
    64
    JWT Authentification Hub に [Authorize] を付与
    JWT 入力フィールドが
    自動で現われる Hub の method に
    [Authorize] を付与
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools#jwt-authentification-support

    View Slide

  66. TypedSignalR.Client.DevTools
    の仕組み
    65

    View Slide

  67. TypedSignalR.Client.DevTools の仕組み
    66
    https://www.nuget.org/packages/TypedSignalR.Client.DevTools/#dependencies-body-tab
    依存関係をみてみましょう。

    View Slide

  68. TypedSignalR.Client.DevTools の仕組み
    67
    https://www.nuget.org/packages/TypedSignalR.Client.DevTools/#dependencies-body-tab
    依存関係をみてみましょう。
    [Hub] / [Receiver]
    属性が含まれるパッケージ

    View Slide

  69. TypedSignalR.Client.DevTools の仕組み
    68
    https://www.nuget.org/packages/TypedSignalR.Client.DevTools/#dependencies-body-tab
    依存関係をみてみましょう。
    [Hub] / [Receiver]
    属性が含まれるパッケージ
    SignalR の Hub を解析して
    Hub の仕様を表現する JSON (spec.json) を
    生成するための Source Generator

    View Slide

  70. 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 を作り
    アセンブリに埋め込む

    View Slide

  71. 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() を見つける
    2. T が実装している Hub /
    Hub の型引数で渡される
    Receiver の interface を見つけ
    3. それらの interface で定義され
    ているメソッドを解析する

    View Slide

  72. 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() を見つける
    2. T が実装している Hub /
    Hub の型引数で渡される
    Receiver の interface を見つけ
    3. それらの interface で定義され
    ているメソッドを解析する

    View Slide

  73. 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() を見つける
    2. T が実装している Hub /
    Hub の型引数で渡される
    Receiver の interface を見つけ
    3. それらの interface で定義され
    ているメソッドを解析する

    View Slide

  74. TypedSignalR.Client.DevTools の仕組み
    73
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    ミドルウェアをもう一度みてみると…

    View Slide

  75. TypedSignalR.Client.DevTools の仕組み
    74
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    ミドルウェアをもう一度みてみると…
    /signalr-dev/spec.json で
    Source Generator 生成した
    SignalR の Hub の仕様を表現する
    JSON を返すようにパイプラインを構築

    View Slide

  76. TypedSignalR.Client.DevTools の仕組み
    75
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    ミドルウェアをもう一度みてみると…
    /signalr-dev でReact アプリが
    読みだされるようパイプラインを構築
    /signalr-dev/spec.json で
    Source Generator 生成した
    SignalR の Hub の仕様を表現する
    JSON を返すようにパイプラインを構築

    View Slide

  77. TypedSignalR.Client
    シリーズ
    76

    View Slide

  78. TypedSignalR.Client.DevTools の名前の由来
    77
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    TypedSignalR.Client.DevTools

    View Slide

  79. TypedSignalR.Client.DevTools の名前の由来
    78
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    TypedSignalR.Client.DevTools

    View Slide

  80. TypedSignalR.Client.DevTools の名前の由来
    79
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    TypedSignalR.Client.DevTools
    型付けされた SignalR Client

    View Slide

  81. TypedSignalR.Client.DevTools の名前の由来
    80
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    TypedSignalR.Client.DevTools
    型付けされた SignalR Client
    今までの話に型付けとか
    なにもないじゃん

    View Slide

  82. TypedSignalR.Client.DevTools の名前の由来
    81
    https://github.com/nenoNaninu/TypedSignalR.Client.DevTools
    TypedSignalR.Client.DevTools
    型付けされた SignalR Client
    今までの話に型付けとか
    なにもないじゃん
    TypedSignalR.Client シリーズの
    1つなのです…!

    View Slide

  83. TypedSignalR.Client シリーズ
    82
    https://github.com/nenoNaninu/TypedSignalR.Client#related-work

    View Slide

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

    View Slide

  85. • 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

    View Slide

  86. • 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
    型で悩む必要は
    もうありません!
    型で悩む必要は
    もうありません!

    View Slide

  87. • 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
    型で悩む必要は
    もうありません!
    型で悩む必要は
    もうありません!

    View Slide

  88. • 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
    • 今回の登壇のテーマ

    View Slide

  89. • 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 でも簡単に利用可能!

    View Slide

  90. 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

    View Slide

  91. 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 で新規追加された
    機能もしっかりサポート!

    View Slide

  92. 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 で新規追加された
    機能もしっかりサポート!

    View Slide

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

    View Slide