こんにちは。サイオステクノロジー技術部 木村です。
今回は、「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キーを押すとメッセージが送信できます。もう一方のブラウザに、リアルタイムに発言が表示されることが確認できます。
（自分のメッセージは右側に、相手のメッセージは名前とともに左側に表示されます。）

サーバーレスでこんなに簡単にチャットアプリが作成できました。すごいですね。
皆さんも是非お試しください。

About 木村 29 Articles

Azureなどのクラウドでの稼働を主としたアプリケーション開発を行なっています。

Twitter YouTube