Azure SignalR Service と Azure Functions を使用してサーバーレスなリアルタイムWebアプリ作成

こんにちは。サイオステクノロジー技術部 木村です。
今回は、「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アプリの構築に専念できます。

画面仕様

今回は以下のような画面のチャットアプリを作成します。
1

Azure SignalR Service の作成

Azure SignalR Serviceを作成します。まず、Azureポータルにログインして下さい。

「+リソースの作成」をクリックして、「signalr」と入力します。すると、サービスの一覧に「SignalR Service」が表示されますので、クリックします。
2
「作成」をクリックします。
3
「Subscription」「Resource Group」「Resource Name」「Pricing Tier」に任意の値を入力・選択します。
「ServiceMode」に「Serverless」を選択し、「Review+Create」をクリックします。
(Azure Functionと使用する場合、「ServiceMode」に「Serverless」を選択する必要があります。
5
作成するときに指定したリソースグループ内にAzure SignalR Serviceが作成されますので、クリックします。
6
「Keys」をクリックします。
7
Primaryの「CONNECTION STRING」の値をメモしておきます。
8

Function Appの作成

Azureポータルにて、「+リソースの作成」をクリックして、「function」と入力します。すると、サービスの一覧に「Function App」が表示されますので、クリックします。
9
「作成」をクリックします。
10
「アプリ名」は任意の名称、「サブスクリプション」「リソースグループ」は環境に応じたものを選択します。「Storage」はデフォルトで入っていたものそのまま、他は以下のように入力して、「作成」をクリックします。
11
作成が完了すると、以下のような通知が表示されます。「リソースに移動」をクリックして、作成したAzure Functionsを表示し、次の関数の作成の手順を行います。
12

negotiate 関数の作成

クライアントが Azure SignalR Service に接続するには、そのクライアントに、サービス エンドポイント URL と有効なアクセス トークンが必要です。
サービスへの接続に使用される SignalR Service エンドポイント URL と有効なトークンは、SignalR接続情報入力バインドによって生成されます。そのため、入力バインドを使用して SignalR 接続情報を取得し、接続情報を返す関数を作成します。関数は「negotiate」という名前にする必要があります。

上記「Function Appの作成」で作成したFunction Appにて、「関数」をクリックします。
13
「+新しい関数」をクリックします。
14
「HTTP trigger」をクリックします。
15
名前に「negotiate」と入力し、承認レベルに「Anonymous」を選択して「作成」をクリックします。
16
作成された関数の「index.js」を以下のコードに書き換えて「保存」をクリックします。

17
「統合」をクリックし、表示された画面で「詳細エディター」をクリックします。
18
function.jsonに以下を追加して、「保存」をクリックします。
,
{
“type”: “signalRConnectionInfo”,
“name”: “connectionInfo”,
“connectionStringSetting”: “AzureSignalRConnectionString”,
“hubName”: “chat”,
“direction”: “in”
}
19
「negotiate」をクリックします。
20
「関数のURLの取得」をクリックします。
21
表示された関数のURLをコピーし、メモしておきます。
22
※negotiateをクリックした際に、以下のエラーが表示される場合は、下記手順にて拡張機能のバンドルを追加してください。
23
<拡張機能のバンドル追加方法>
関数の上に表示されているFunction名をクリックします。
25
下部にスクロールし「hosts.json」に以下を追記し、「保存」をクリックします。
,
“extensionBundle”: {
“id”: “Microsoft.Azure.Functions.ExtensionBundle”,
“version”: “[1.*, 2.0.0]”
}
26

メッセージ出力関数の作成

Azure SignalR Service を使用してメッセージを送信する関数を作成します。
今回の例ではすべての接続済みクライアントにメッセージを送信しますが、特定の認証済みユーザーやグループにのみ送信するようにすることもできます。

「関数」をクリックします。
13
「+新しい関数」をクリックします。
14
「HTTP trigger」をクリックします。
15
名前に任意の名称を入力し、承認レベルに「Anonymous」を選択して「作成」をクリックします。
27
作成された関数の「index.js」を以下のコードに書き換えて「保存」をクリックします。

28
「統合」をクリックし、表示された画面で「詳細エディター」をクリックします。
29
function.jsonに以下を追加して、「保存」をクリックします。
,
{
“type”: “signalR”,
“name”: “$return”,
“hubName”: “<任意の文字列(negosiate関数のfunction.jsonにて入力したものと同じ値)>”,
“connectionStringSetting”:”AzureSignalRConnectionString”,
“direction”: “out”
}
30
作成した関数名をクリックします。
31
「関数のURLの取得」をクリックします。
32
表示された関数のURLをメモしておきます。
33

アプリケーション設定

関数の上に表示されているFunction名をクリックし、表示されたページで「関数アプリの設定」をクリックします。
34
「アプリケーション設定の管理」をクリックします。
35
「+新しいアプリケーション設定」をクリックします。
36
「名前」に「AzureSignalRConnectionString」を入力、値に上記『Azure SignalR Service の作成』の手順でメモした「CONNECTION STRING」の値を入力して「OK」をクリックします。
37
「保存」をクリックします。
38

CORSの設定

「プラットフォーム機能」をクリックします。
39
下部にスクロールし、「CORS」をクリックします。
40
「Access-Control-Allow-Credentialsを有効にする」にチェックを入れ、Azure SignalRに接続するクライアントアプリケーションのURL
(当サンプルでは、「http://localhost:8080」で動かします)を入力して、「保存」をクリックします。
41

クライアントアプリケーションの作成

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を配置したフォルダを選択します。
42
ブラウザにて「http://localhost:8080/index.html」にアクセスします。
以下のウィンドウが表示されるので、名前を入力し「OK」をクリックします。
43
別のブラウザを立ち上げ、「http://localhost:8080/index.html」にアクセスし、別の名前を入力します。
44
メッセージ入力欄にメッセージを入力してEnterキーを押すとメッセージが送信できます。もう一方のブラウザに、リアルタイムに発言が表示されることが確認できます。
(自分のメッセージは右側に、相手のメッセージは名前とともに左側に表示されます。)
45
46

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

>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

1人がこの投稿は役に立ったと言っています。

コメント投稿

メールアドレスは表示されません。


*