2021年6月の.NETラボの発表で使用した資料です。 デモで使用したソースコードはです https://github.com/Takas0522/dotnetlab-2021-june

1. Azure Web Pub Sub Serviceを触ってみた
2021.06 .NETラボ

2. 誰？
Takas(@DevTakas)
Angular / Azure / .NET Core / Azure DevOps / Microsoft Graph
Microsoft MVP Office Development

3. 誰？
ブログやってます
http://takasdev.hatenablog.com/
「はまったりひらめいたり…とか…」

4. ※注意
Azure Web PubSub Serviceは
プレビューです
(6/26現在)

5. おしながき
1. Azure Web PubSub Serviceとは?
2. Azure Web PubSub Serviceを体験してみる
3. Azure Web PubSub Serviceで開発をしてみる
4. まとめ

6. 1. Azure Web PubSub Serviceとは？

7. 1. Azure Web PubSub Serviceとは?
- サービスの概要
• 名前の通りPub/Subパターンモデルのサービス
• メッセージブローカーにあたる
• WebSocketを使用したリアルタイムWebアプリケーションを
構築する
• 大量のリクエスト・同時接続を解決する

8. 1. Azure Web Pub Sub Serviceとは?
- 価格
無料プラン Standard
ユニットあたりの同時接続数 20 1,000
1ユニットあたりの
1日のメッセージ数
20,000 無制限
※最初の1,000,000メッセージは無料
料金/ユニット/日 無料 180.320
最大ユニット数 1 100
• 最大接続数：1,000(同時接続) * 100(ユニット) = 10万同時接続
• Standardで1,000,000メッセージ以上は追加課金112
• 1,000,000メッセージはだいたい2GB相当
※すべて日本円

9. 1. Azure Web PubSub Serviceとは?
- ドキュメント
• リリースブログ
• 概要などを手っ取り早くおさえるならこれ
• https://azure.microsoft.com/ja-jp/blog/easily-build-realtime-apps-
with-websockets-and-azure-web-pubsub-now-in-preview/
• Docs
• 日本語訳があるほうはこっち
• https://docs.microsoft.com/ja-jp/azure/azure-web-pubsub/
• Azure Web PubSub Service
• たぶんDocsよりこっちのほうが今はまとまっている？
• https://azure.github.io/azure-webpubsub/

10. 1. Azure Web PubSub Serviceとは?
- ユースケース
• 頻度の高いデータの更新
• ゲーム、投票、ポーリング、オーク損
• ライブダッシュボードと監視
• 会社のダッシュボード、金融市場のデータ、売上の即時更新、マルチ プレイヤー ゲームのスコア ボード、および IoT 監視
• クロスプラットフォームのライブ チャット
• ライブ チャット ルーム、チャット ボット、オンライン カスタマー サポート、リアルタイムのショッピング アシスタント、メッセンジャー、ゲーム内
チャットなど
• 地図上のリアルタイムの位置
• 物流の追跡、配送状態の追跡、輸送状態の更新、GPS アプリ
• 対象を絞ったリアルタイムの広告
• パーソナライズされたリアルタイムのプッシュ型広告およびオファー、対話型広告。
• コラボレーション アプリ
• 共同作成、ホワイトボード アプリ、チーム会議ソフトウェア。
• プッシュ型のインスタント通知
• ソーシャル ネットワーク、電子メール、ゲーム、移動に関するアラート。
• リアルタイムのブロードキャスト
• ライブ オーディオ/ビデオのブロードキャスト、ライブ キャプション、翻訳、イベント/ニュースのブロードキャスト。
• IoT デバイスおよび接続されているデバイス
• リアルタイムの IoT メトリック、リモート制御、リアルタイムの状態、および場所の追跡。
• オートメーション
• アップストリーム イベントからのリアルタイム トリガー

11. 1. Azure Web PubSub Serviceとは?
-SignalR…🤔?
https://twitter.com/davidfowl/status/1387885009625780228

12. 1. Azure Web PubSub Serviceとは?
-SignalR…🤔?
• SignalR ServiceはサービスがWebSocketのエンドポイントを
提供していた
• 対してWeb PubSubは単なるWebSocket
• SignalRで要求される再接続などがPubSubの場合必要なくなる
• SinalRServiceがなくなるというわけではない
• 使えない環境に対応するためのよりシンプルなサービスのイメージ
• SignalR Serviceを使い続けたほうが良い場合も当然ある
• WebSocket以外のフォールバックトランスポートが欲しい場合
• RPCやStreamingを使用したい場合。。。などなど
• より詳細な場合分けは👇のTwitterのスレッドで確認することができる
• https://twitter.com/davidfowl/status/1387885009625780228

13. 1. Azure Web PubSub Serviceとは?
-SignalR…🤔?
• 価格設定はまったく同じとなっている

14. 2. Azure Web PubSub Serviceを体験してみる

15. 2. Azure Web PubSub Serviceを体験してみる
-なにはともあれリソースを作成する

16. 2. Azure Web PubSub Serviceを体験してみる
-サンプルを動かしてみる
• Demoがあるのでそこで簡単に動作を確認することができる
• https://azure.github.io/azure-webpubsub/demos/clientpubsub

17. 2. Azure Web PubSub Serviceを体験してみる
-なにはともあれリソースを作成する
• 動きと何をしなければいけないかはある程度把握できた
• 必要なのは接続文字列
• Groupを作成しそこに参加する形でメッセージをやり取りする
• 同一のGroup同士でメッセージのやり取りがおこなえる

18. 3. Azure Web PubSub Serviceで開発をしてみる

19. 3. Azure Web PubSub Serviceで開発をしてみる
-必要な概念を抑えておく
• 必要な概念を抑える
• サービス
• Azure Web PubSub Service
• サーバー
• クライアント
• グループ
• クライアントが参加しメッセージを公開する先
• メッセージ
• サービス/グループに送付するデータ、文字列/JSON/Binary
• 1MBまで

20. 3. Azure Web PubSub Serviceで開発をしてみる
-Serverの役割など
• Server SDKは下記の環境のものが現在用意されている
• JavaScript
• C#
• Python
• Java
• ServerはSDKを通して下記のことなどが行える
• クライアント用のWebSocketUriの生成
• グループ作成可能などRole情報を付与したアクセストークンも生成
• ソケット通信で使用するGroupやUserの作成が可能
• グループ宛/全体宛にメッセージを送信

21. 3. Azure Web PubSub Serviceで開発をしてみる
-クライアント側
• 標準のWebSocket APIでメッセージを送受信できる
• JSのWebSocket
• C#のWebsocketClient
• などなど
• サーバーで生成されたAccessTokenを通信に付与
• JSONメッセージを送ることでユーザーやグループを作成可能

22. 3. Azure Web PubSub Serviceで開発をしてみる
-Azure Functionsでイベント駆動する
• Connect/Connected/Disconnectのバインド可能
• とある条件の場合は拒否。とかできる。
• 送信されたメッセージをトリガーにバインド可能
• 使用するにはアクセスできるエンドポイントと設定が必要

23. 3. Azure Web PubSub Serviceで開発をしてみる
-動作フローをまとめてみる

24. まとめ
• 現在Preview中のAzure Web PubSub Serviceを触ってみた
• SignalRとはユースケースを考慮した上で選定する必要あり
• Web標準のWebSocket APIで通信可能
• Server側の処理はSDKを使うのが一番ラク
• Functionsのイベント駆動も便利に使用できそう

25. 参考ページ
• WebSocket と Azure Web PubSub を使用してリアルタイム アプリを簡単に構築する (プレビュー段階)
• https://azure.microsoft.com/ja-jp/blog/easily-build-realtime-apps-with-websockets-and-azure-web-pubsub-now-in-preview/
• パブリッシャーとサブスクライバーのパターン
• https://docs.microsoft.com/ja-jp/azure/architecture/patterns/publisher-subscriber
• 価格
• https://azure.microsoft.com/ja-jp/pricing/details/web-pubsub/
• Azure Web PubSub サービスに関するドキュメント
• https://docs.microsoft.com/ja-jp/azure/azure-web-pubsub/
• Azure Web PubSub Service
• https://azure.github.io/azure-webpubsub/
• Azure/azure-webpubsub
• https://github.com/Azure/azure-webpubsub
• New Azure Web PubSub Unveiled for Real-time WebSocket Apps
• https://visualstudiomagazine.com/articles/2021/04/29/azure-web-pubsub.aspx
• How is it different from SignalR you ask?
• https://twitter.com/davidfowl/status/1387885009625780228
• WebSocket
• https://developer.mozilla.org/ja/docs/Web/API/WebSocket