こんにちは。サイオステクノロジー技術部 木村です。
今回は、「Azure SignalR Service と Azure Functions を使用してサーバーレスなリアルタイムWebアプリ作成」ということで、Azure SignalR Service と Azure Functionsを使ってチャットアプリを作ってみたいと思います。
Azure SignalR Serviceとは
サーバーとブラウザ間での双方向通信を実現するSignalRですが、このSignalR のマネージド・サービスが Azure SignalR Service です。
SignalR スケールを使用するアプリケーションでは、SignalR サーバーの管理とスケーリングが面倒な作業になる場合がありますが、Azure SignalR Serviceでは、SignalR サーバーのセットアップ、ホスティング、スケーリング、負荷分散に対処する必要はなくなり、リアルタイムWebアプリの構築に専念できます。
画面仕様
今回は以下のような画面のチャットアプリを作成します。
Azure SignalR Service の作成
Azure SignalR Serviceを作成します。まず、Azureポータルにログインして下さい。
「＋リソースの作成」をクリックして、「signalr」と入力します。すると、サービスの一覧に「SignalR Service」が表示されますので、クリックします。
「作成」をクリックします。
「Subscription」「Resource Group」「Resource Name」「Pricing Tier」に任意の値を入力・選択します。
「ServiceMode」に「Serverless」を選択し、「Review+Create」をクリックします。
（Azure Functionと使用する場合、「ServiceMode」に「Serverless」を選択する必要があります。
作成するときに指定したリソースグループ内にAzure SignalR Serviceが作成されますので、クリックします。
「Keys」をクリックします。
Primaryの「CONNECTION STRING」の値をメモしておきます。
Function Appの作成
Azureポータルにて、「＋リソースの作成」をクリックして、「function」と入力します。すると、サービスの一覧に「Function App」が表示されますので、クリックします。
「作成」をクリックします。
「アプリ名」は任意の名称、「サブスクリプション」「リソースグループ」は環境に応じたものを選択します。「Storage」はデフォルトで入っていたものそのまま、他は以下のように入力して、「作成」をクリックします。
作成が完了すると、以下のような通知が表示されます。「リソースに移動」をクリックして、作成したAzure Functionsを表示し、次の関数の作成の手順を行います。
negotiate 関数の作成
クライアントが Azure SignalR Service に接続するには、そのクライアントに、サービス エンドポイント URL と有効なアクセス トークンが必要です。
サービスへの接続に使用される SignalR Service エンドポイント URL と有効なトークンは、SignalR接続情報入力バインドによって生成されます。そのため、入力バインドを使用して SignalR 接続情報を取得し、接続情報を返す関数を作成します。関数は「negotiate」という名前にする必要があります。
上記「Function Appの作成」で作成したFunction Appにて、「関数」をクリックします。
「＋新しい関数」をクリックします。
「HTTP trigger」をクリックします。
名前に「negotiate」と入力し、承認レベルに「Anonymous」を選択して「作成」をクリックします。
作成された関数の「index.js」を以下のコードに書き換えて「保存」をクリックします。
「統合」をクリックし、表示された画面で「詳細エディター」をクリックします。
function.jsonに以下を追加して、「保存」をクリックします。
,
{
“type”: “signalRConnectionInfo”,
“name”: “connectionInfo”,
“connectionStringSetting”: “AzureSignalRConnectionString”,
“hubName”: “chat”,
“direction”: “in”
}
「negotiate」をクリックします。
「関数のURLの取得」をクリックします。
表示された関数のURLをコピーし、メモしておきます。
※negotiateをクリックした際に、以下のエラーが表示される場合は、下記手順にて拡張機能のバンドルを追加してください。
<拡張機能のバンドル追加方法>
関数の上に表示されているFunction名をクリックします。
下部にスクロールし「hosts.json」に以下を追記し、「保存」をクリックします。
,
“extensionBundle”: {
“id”: “Microsoft.Azure.Functions.ExtensionBundle”,
“version”: “[1.*, 2.0.0]”
}
メッセージ出力関数の作成
Azure SignalR Service を使用してメッセージを送信する関数を作成します。
今回の例ではすべての接続済みクライアントにメッセージを送信しますが、特定の認証済みユーザーやグループにのみ送信するようにすることもできます。
「関数」をクリックします。
「＋新しい関数」をクリックします。
「HTTP trigger」をクリックします。
名前に任意の名称を入力し、承認レベルに「Anonymous」を選択して「作成」をクリックします。
作成された関数の「index.js」を以下のコードに書き換えて「保存」をクリックします。
「統合」をクリックし、表示された画面で「詳細エディター」をクリックします。
function.jsonに以下を追加して、「保存」をクリックします。
,
{
“type”: “signalR”,
“name”: “$return”,
“hubName”: “<任意の文字列(negosiate関数のfunction.jsonにて入力したものと同じ値)>”,
“connectionStringSetting”:”AzureSignalRConnectionString”,
“direction”: “out”
}
作成した関数名をクリックします。
「関数のURLの取得」をクリックします。
表示された関数のURLをメモしておきます。
アプリケーション設定
関数の上に表示されているFunction名をクリックし、表示されたページで「関数アプリの設定」をクリックします。
「アプリケーション設定の管理」をクリックします。
「＋新しいアプリケーション設定」をクリックします。
「名前」に「AzureSignalRConnectionString」を入力、値に上記『Azure SignalR Service の作成』の手順でメモした「CONNECTION STRING」の値を入力して「OK」をクリックします。
「保存」をクリックします。
CORSの設定
「プラットフォーム機能」をクリックします。
下部にスクロールし、「CORS」をクリックします。
「Access-Control-Allow-Credentialsを有効にする」にチェックを入れ、Azure SignalRに接続するクライアントアプリケーションのURL
（当サンプルでは、「https://localhost:8080」で動かします）を入力して、「保存」をクリックします。
クライアントアプリケーションの作成
Azure SignalR Service に接続してメッセージを送受信するクライアントアプリケーションを作成します。
下記index.html、style.cssを作成して任意のディレクトリに置いてください。
index.htmlは、以下の修正を行って保存してください。
86行目：
→negotiate関数の作成の手順でメモした関数のURLのうち、/negotiateより前の部分を記載
101行目：<メッセージ出力関数のURL>
→メッセージ出力関数の作成の手順でメモしたURLを記載
index.html
style.css
動作確認
作成したクライアントアプリを任意のサーバーで実行します。
今回は手軽なWebサーバーであるWeb Server for Chrome（https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ja）を使います。
Web Server for Chromeを起動して、CHOOSE_FOLDERにて、index.htmlとstyle.cssを配置したフォルダを選択します。
ブラウザにて「https://localhost:8080/index.html」にアクセスします。
以下のウィンドウが表示されるので、名前を入力し「OK」をクリックします。
別のブラウザを立ち上げ、「https://localhost:8080/index.html」にアクセスし、別の名前を入力します。
メッセージ入力欄にメッセージを入力してEnterキーを押すとメッセージが送信できます。もう一方のブラウザに、リアルタイムに発言が表示されることが確認できます。
（自分のメッセージは右側に、相手のメッセージは名前とともに左側に表示されます。）
サーバーレスでこんなに簡単にチャットアプリが作成できました。すごいですね。
皆さんも是非お試しください。
