これはなに？
Azure Event Hubsのコンシューマ（イベント受信側）をWebブラウザで動かすサンプルです。
ソース全体は https://github.com/sengokyu/Ex.AzureEventHubConsumerOnBrowser に置いてあります。
実行の仕方
事前準備
Event Hubを作成し、接続文字列を取得しておきます。
実行
環境変数を3つ設定します。
| 環境変数 | 内容 |
|---|---|
| EVENTHUB_CONNECTION_STRING | 取得した接続文字列です。 |
| EVENTHUB_CONSUMER_GROUP | 既定では$Defaultです。 |
| EVENTHUB_NAME | 作成したEvent Hubの名前です。 |
パッケージをインストールしてビルドします。
npm install
npm build
dist/index.htmlをブラウザで開きます。開発者コンソールを開きます。
イベントを送信してみます。
node src/producer/send-event.js
実行結果
このような感じにイベントが届きます。
はまったところ
Webpack 5ではprocessを定義してくれなくなったため、自前でwebpack.config.jsに書く必要がありました。
この実装の弱点
接続文字列がJavaScript内にあるので、外からはアクセスできない環境でしか活用できません。