リアルタイムWebを極める

第5回 SignalRを利用した開発とWebサイトへのデプロイ

この記事を読むのに必要な時間:およそ 3 分

クライアントを実装

クライアント側はHTMLとJavaScriptで作成するので,テンプレート言語は何でもよいのですが,今回はASP.NETなのでWebフォームを使って作成していきます。

ソリューションエクスプローラーのプロジェクト名を右クリックして,⁠追加⁠⁠→⁠Web フォーム」を選択します。以下のような項目名を入力するダイアログが表示されるので,⁠Default」と入力して「OK」ボタンをクリックします。

図5 ASP.NETのデフォルトファイル名を入力する

図5 ASP.NETのデフォルトファイル名を入力する

Webフォームを使うといっても,専用の記法を使う訳ではなくて,単純にHTMLの代わりとして使います。ファイルが作成できたら,以下のようにSignalR固有のJavaScriptコードを追加していきます。

<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-1.0.0.min.js"></script>
<script>
    $(function() {
        var connection = $.hubConnection();
        
        var chat = connection.createHubProxy("chat");
            
        chat.on("ReceiveMessage", function (message, time) {
            $("#chat").prepend("<li>" + time + ": " + message + "</li>");
        });
            
        $("#send").click(function () {
            var text = $("#message").val();

            $("#message").val("");

            chat.invoke("SendMessage", text);
        });

        connection.start();
    })
</script>

見た目自体もsocket.ioを使うコードと似ていると思います。SignalRはRPCとして通信を実装しているので,プロキシクラスを作成しているという点が大きく異なっています。

そして最後に表示用のタグを少しだけ追加します。Default.aspxファイルのbodyタグ内に以下のようなコードを追加します。

<div>
    <h1>サンプルチャット</h1>
    <input type="text" id="message" />
    <input type="button" value="send" id="send" />

    <ul id="chat"></ul>
</div>

node.jsの回ではJadeを使っていたので多少書き方は違いましたが,HTMLとしてはまったく同じ構造になっています。これですべての実装が終わったので,アプリケーションをデプロイする前に動作を確認しておきます。

Visual Studioでのデバッグは,ツールバーにあるブラウザ名のボタンをクリックするだけです。以下の例ではInternet Explorerが自動的に立ち上がります。

図6 デバッグ実行をInternet Explorerで行うボタン

図6 デバッグ実行をInternet Explorerで行うボタン

ブラウザが立ち上がると作成したページが読み込まれるので,テキストボックスに文字列を入れて,⁠send」ボタンをクリックしてメッセージが送信されることを確認します。

図7 作成したアプリケーションを実行した図

図7 作成したアプリケーションを実行した図

このようにSignalRでもnode.jsとsocket.ioで作ったアプリケーションと同じものが作れることがわかっていただけたかと思います。

それでは最後にnode.jsで作成したアプリケーションと同じく,Windows Azure Webサイトにデプロイしてみます。

アプリケーションをデプロイ

Windows Azure Webサイトを作成する手順に関しては,前々回のnode.jsのアプリケーションをデプロイするときとまったく同じですので,そちらを参考してください。

今回はすでにWebサイトが作成済みで,publishsettingsファイルがダウンロードも完了していることを前提にして説明を行います。ASP.NET and Web Tools 2012.2をインストールしていない方はインストールを行ってから続きを行ってください。

それではソリューションエクスプローラーのプロジェクト名を右クリックして表示されるメニューから「発行」を選択します。すると以下のようなダイアログが表示されるので,⁠インポート」ボタンをクリックしてダウンロード済みのpublishsettingsファイルを選択します。

図8 発行するための設定を行うダイアログ

図8 発行するための設定を行うダイアログ

インポートが完了するとpublishsettingsファイルを読み取って,発行に必要な情報を自動的に入力してくれるので,あとは右下にある「発行」ボタンをクリックするだけでWebサイトへデプロイが行われます。

完了すると自動的にブラウザが起動して,デプロイを行ったWebサイトが表示されるので,node.jsのときと同じようにタブを複製して動作を確認してみましょう。

図9 複数のタブ間でもリアルタイムでメッセージを受信可能

図9 複数のタブ間でもリアルタイムでメッセージを受信可能

ちゃんと複数の画面を開いていても,メッセージが同時にすべての画面に配信されることが確認できます。

現在のWebサイトの仕様ではWebSocketにサーバが対応していないので,SignalRを使っている場合でも別の通信方式が利用されるようになっています。

これでnode.jsとSignalRの両方で作られたアプリケーションをクラウド上で実行することができましたので,次回はクラウドを利用する上で欠かせないスケールアウトについて,node.jsとSignalRの両方の視点からの解説と,node.jsとSignalRの違いや特徴についてまとめたいと思います。

著者プロフィール

芝村達郎(しばむらたつろう)

PHPでの受託開発が中心の会社に勤めていたが,趣味で C# や ASP.NET 開発を行う。

2010年4月から Microsoft MVP - ASP.NET/IIS を受賞。
2012年6月にソーシャルグリッド株式会社 取締役に就任。

blog:http://shiba-yan.hatenablog.jp/
twitter:@shibayan