クライアントを実装

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

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

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が自動的に立ち上がります。

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

このように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ファイルを選択します。

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

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

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

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

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