前回でSignalRの概要とVisual Studioを利用した開発の準備が整いましたので，実際に簡単なSignalRアプリケーションを開発してみます。

サンプルとしてはnode.jsの回と同じ1行チャットアプリケーションです。同じ機能を出来るだけ同じメソッド名，パラメータ名で実装しますので，node.js + socket.ioとSignalRのスタイルの違いを感じていただければと思います。

プロジェクトを作成

まずはVisual Studioを立ち上げて「ファイル⁠」⁠→「⁠新規⁠」⁠→「⁠新規プロジェクト」の順に選択すると，以下のようなプロジェクトテンプレートを選択するダイアログが表示されます。

左ペインから「インストール済み⁠」⁠→「⁠Visual C#⁠」⁠→「⁠Web」の順に選択し，中央に表示されるテンプレートの中から「ASP.NET 空のWebアプリケーション」を選択します。そして下部にある「名前」は何でもよいのですが，今回は「Gihyo.SignalR」と入力しておきました。

プロジェクトが作成出来たらSignalRをインストールするために，ソリューションエクスプローラーのプロジェクト名を右クリックして表示されるメニューから「NuGetパッケージの管理」を選択してください。

選択すると以下のようなダイアログが表示されますので，右上にあるテキストボックスに「SignalR」と入力してEnterキーを押します。すると中央部分に検索結果が表示されるので，その中にある「Microsoft ASP.NET SignalR」を選択して表示される「インストール」ボタンをクリックします。

これだけの作業で作成したプロジェクトにSignalRのインストールが完了しました。それではこれからは実際にコードを書いていきたいと思います。

サーバを実装

まずはプロジェクトを右クリックして「Hubs」フォルダを作成します。SignalRでは通例的にHubsフォルダを作成して，その中にHubの実装クラスを作成するようになっています。今回はChatHubという名前のクラスをHubsフォルダ内に作成しました。

そして実際に作成したChatHub.csファイルを開いて，以下のようにコードを追加します。

[HubName("chat")]
public class ChatHub : Hub
{
    public void SendMessage(string text)
    {
        Clients.All.ReceiveMessage(text, DateTime.Now.ToLongTimeString());
    }
}

socket.ioを使ったときのコードと比較してみてください。クライアントへのデータの渡し方が異なっていたり，引数として入力された文字列を受け取っていたり違いがありますね。

サーバ側のAPIの実装はこれで終わりなのですが，最後に作成したHubをシステムに登録する処理を追加する必要があります。ソリューションエクスプローラーのプロジェクト名を右クリックして「追加⁠」⁠→「⁠グローバルアプリケーションクラス」を選択します。

途中でファイル名を入力するダイアログが表示されますが，デフォルトの「Global」のままで問題ないです。そして作成されたGlobal.asax.csファイルを開いて，中身を以下のように修正します。

using System;
using System.Web.Routing;

namespace Gihyo.SignalR
{
    public class Global : System.Web.HttpApplication
    {
        protected void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.MapHubs();
        }
    }
}

重要なのはMapHubメソッドで，このメソッドをアプリケーション開始時に呼び出しておかないと，クライアント側からHubのAPIを呼び出すことができません。

これでサーバ側の実装は全て終わりました。次はクライアント側の実装を行っていきます。