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

.NET ラボ 2023/01/28 での発表資料

GitHub
- TypedSignalR.Client.DevTools
- TypedSignalR.Client
- TypedSignalR.Client.TypeScript
Twitter
Blog
neno.dev

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