[Azure] Azure Event Hubsのイベントをブラウザでリアルタイム受信するサンプル

1992 ワード
Azure JavaScript AzureEventHubs JavaScript テキストリンク

これはなに？

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内にあるので、外からはアクセスできない環境でしか活用できません。