今回は、7/17の記事の Web App の Demo の内容です。
Web App で、チャットアプリと言っても、メッセージが投稿できてそれを共有してみることができるだけのアプリです。
本気でチャットアプリを作るのであれば、認証回りや、あと投稿できるメッセージの内容をしっかり検討するべきですが、今回は Demo 用のアプリですので、その辺はまったく考慮していません！！
環境など
環境 ： Visual Studio 2013
事前準備： Azure で、有効なサブスクリプションを持っていること。
今回は、Azure App Service の Premium が、 Preview でコストが安いので、Premiumを使いました。
アプリの概要
メッセージの投稿があった際に、起動している全てのクライアントにその内容が通知され表示されるアプリです。
内容通知＆表示は、「ASP.NET SignalR」を利用しました。
SignalRはWikiを見ると、「ASP.NET にリアルタイム・ウェブ機能を追加するためのライブラリ」ということらしいです。
個人的には、下記２つの理由で、今回はSignalRを使いました。
- クライアント駆動でリフレッシュが要らない。
- メッセージ通知を実装しても、サーバサイドのソース量が圧倒的に少ない。
画面リフレッシュが不要なので、見ている人には URL を教えてメッセージ投稿してみてねっていうだけで、Demo の動作確認は参加者主導でできるので面白いかなーって思ったんですよね。
実際には、JSでメッセージボックスをポップさせる投稿する人が出てきたり、ちょっとカオスチックでしたけど、面白かったです。もうちょっと気持ちに余裕があると、参加者と遊びながらやれるんだろうな。。。
SignalRについては、下記のサイトを見ていただくと、理解がしやすいと思います。
■GitHub SignalR
■@IT 特集：ASP.NET SignalR入門（前編）：ASP.NET SignalRを知る
※ 今回のソースは、上記で紹介されている内容がドンピシャだったので、ほとんど同じソースです。変更したのは、SignalRのバージョンが1.xから2.xになって変わったHUBの起動がOWIN経由になったところくらいですね。
■Learn about ASP.NET SignalR
Demo 手順
では、作って動作確認までの手順です。実際に試してやられる際は、細かなバージョンとかは違ってるかもです。
今回の手順を作成したときのソースをGitHubにUploadしてますので、よかったら参考にしてください。
(っていうか、初めてGitHubにソース載せてみました。。)
1.プロジェクトの作成
今回の記事では、Visual Studio(以降、VS)でのプロジェクトの作成から書いていきます。
VSを使ったことがある方にとっては普通の内容だと思いますので、読み飛ばしちゃってください。
VSを起動して、「新しいプロジェクト」をクリックします。
「ASP.NET Web アプリケーション」を選択し、プロジェクトを作成します。
「Empty」を選びます。
この画面は、VSからAzureに直接デプロイするための設定です。前の画面で「クラウド内のホスト」にチェックをつけている場合に表示されます。
プロジェクトが作成されました。なんか Azure で Web Appのガワを作ろうとしたところでエラーが出てますが、今回は気にせず進めます。
２．ライブラリの追加
ここでは、SignalR を使うためのライブラリをNugetを使って追加します。
「Microsoft ASP.NET SignalR」を選択して、インストールをクリックします。右上の検索を使うと見つけやすいです。
インストールが成功すると緑のアイコンが表示されます。
続いて、「Microsoft ASP.NET SignalR .Net Client」をインストールします。
３．プログラムの作成
プログラムを作成していきます。
サーバサイド処理で、EchoHub.csとStartup.csの2つを追加します。
クライアント処理として、index.htmlを追加します。
＜＜サーバサイド処理＞＞
SignalRのHUBを格納する「Hubs」フォルダを作ります。
作らなくても特に問題ないです。
まずは、SignalRハブクラス（V２）を追加します。今回は、EchoHub.csとしました。
「追加」→「クラス」と選択せずに、「追加」→「SignalR ハブクラス(v2)」を選んでも一緒ですが、その場合は、２画面目が表示されません。
「EchoHub.cs」を開き、赤枠の箇所を追加します。
簡単に概要を記載しますと、
[HubName(“Echo”)]の箇所は、クライアント(Index.html)から接続するハブの名称を指定する際に利用しています。
public void Send(String text)では、クライアントよりSendでメッセージを受信して、接続しているクライアントすべてにReceiveでメッセージを渡しています。
public void Hello()は、テンプレートに含まれていたコードを消してないだけで、今回は使ってないので削除してOKです。
次に、OWIN Startup クラスを追加します。ファイル名は、「Startup.cs」にしました。
これは、SignalR v2.xからのお作法です。
Startup.csには、赤枠の箇所を追加しました。
＜＜クライアントサイドの処理＞＞
クライアントサイドの処理は、index.htmlに記述します。
11行目で、SignalRハブに接続、
12〜14行目で、サーバからのメッセージの受信処理
15〜20行目で、サーバへのメッセージ送信処理を行ってます。
４.デバッグ実行
ひとまず、ローカルで動かしてみました。
ポストされました。
別のブラウザを立ち上げて、bbbbと打って送信。
最初に動かしてた方では、bbbbが表示されてます。この辺は動かしてみないとわかりにくいですね。。。
５.Azure へのデプロイ
今回は、VSでプロジェクトを作った時に、AzureにWeb App のガワを作るのにエラーになってたので、Azure 管理ポータルで Web App を作って、VS でアップロードする方法を掲載します。
管理ポータルで、「新規」をクリックします。
「COMPUTE」→「WEBアプリ」→「簡易作成」を選択します。
URLとAPP SERVICE プランを選択します。
VSでプロジェクトを作成した時と同じ設定にするために、下記の設定としました。
URLは、プロジェクト名と同じにしていますが、別にすることもできます。
APP SERVICE プランは、西日本リージョンでPremiumプランで作成してあったのがありますので、これを選択しています。
設定が終わりましたら、「WEBアプリの作成」をクリック
簡易作成なので、多分1分かからないで作成が完了します。
作成できましたら、赤枠の「→」をクリックして、詳細表示にします。
「ダッシュボード」をクリックします。
「発行プロファイルのダウンロード」をクリックして、発行プロファイルをローカルにダウンロードします。
VSに戻りまして、プロジェクトを選択して→クリックメニューより、「発行」をクリックします。
「インポート」をクリックします。
先ほどダウンロードした発行プロファイルを選択します。
発行するための情報が設定されますので、「発行」をクリックします。
発行が成功すると、自動的にブラウザが立ち上がりデプロイしたアプリにアクセスできます。
URLは、Webアプリ名＋azurewebsites.netとなります。
まとめ
今回のネタだけをみると、Azureがどうこうって話というよりも、SignalRでアプリを作ってみましたという内容になってます。
次回以降で、Mobile App や API APP 、 Logic App とつなげていきたいと思っています。
コメント