SignalRの初心者向けサンプルで学ぶステップバイステップ学習

この記事は ASP.NET Advent Calendar 2014 18日目の記事です。

ASP.NET Advent Calendar 2014 - Qiita

18日ってことは25日まであと１週間なんですね、早いですねー
このブログはなぜかASP.NETとかASP.NET MVCとかってキーワードで検索してくる方が多いんです。
しかもなぜか↓こういうまとめに入れてもらってて、そこから飛んでくる人もいる始末。（恥ずかしー）

ASP.NET MVCを勉強するときはまずここ！ - NAVER まとめ

まあマイクロソフトMVPの方々を筆頭に最新技術をエバるブログもあれば、ここみたいに初心者向けのイロハのイが書いてあるブログがAdventしても良いでしょうってことで、ずうずうしくもAdvent Calendarに登録してしまいました。

ということで、SignalR 2の初心者向けのサンプル作成をゼロからやったって私なりの思うところを少し書きたいと思います。
まずは Visual Studio 2013 ですね。これがないと始まらない。
ファーストステップは

空のASP.NETプロジェクトの作成(ここではFirstSignalRって名前にします)
.NET Framework 4.5(4.0じゃダメなんです！4.5以上じゃないと！微妙にハマりポイントかも)

ほんで、今回はステップバイステップ学習ってことでエビデンスを残すことと可逆操作になるようにGitへのコミットでエビデンスを残す感じにします。

保存先のフォルダはどこでも良いです。ポイントは赤線ひいてます。
で、出来上がったらソッコーでgitにコミットします。

さすがに空のってテンプレートなだけあってファイルも少ないですね。逆に、ここで追加されてるファイルは必須（かプロジェクトとして必要な）ファイルだとわかります。
Web.ConfigとかAssemblyInfo.csとかですね。

セカンドステップは

OWIN Startupクラスの追加(おまじない的に)

追加のやり方はプロジェクトの上で右クリックかーらーのー

OWIN startuoクラス追加

※ここでもしもどこ探してもOWIN Startupクラスなんかねーぞ！って場合は、NugetでMicrosoft ASP.NET SignalRパッケージをインストールしてみてください。

で、Startup1.csが追加できたら、またまたソッコーでgitにコミットします。

２手進めちゃうと可逆になりにくいのでステップバイステップで、手順で何がどう変わるのかを確認しながらすすめます。
Nugetのパッケージの参照を自動で足してくれているのがわかります。

サードステップは

SignalR ハブクラスの追加(おまじない的に)

追加の手順はセカンドステップと同じです。プロジェクトの上で右クリックから
SignalR ハブクラス(v2)を追加します。

で、gitにコミット。（今回は山ほど依存パッケージが追加されます）

実際に重要なところはパッケージを見ればわかります。この辺が追加されます。

フォースステップは

index.htmlファイルの追加

これもプロジェクトの上で右クリックなのですが直接htmlを追加しちゃいます。
新しい綱目の追加でhtmlファイルを選んでも同じように思いますが、ちょっとした謎挙動があって全く同じ挙動じゃないかもしれないので、ここでは直接htmlを追加します。

名前はウェブの常識に従ってindexにします。

これまで同様に確認します。

これで準備は完了です。そして次が最後のステップになります。
この時点でソリューションは

こういう構成になっていると思います。そうじゃ無い場合は途中の手順を見直してみてください。

フィフスステップは

Startup1.csに１行追加
MyHub1.csに数行追加
index.htmlに沢山追加

Startup1 クラスのConfigurationメソッドにapp.MapSignalR();を追加します。
MyHub1 クラスにメソッド SendMessage を追加します。

public void SendMessage(string message)
{
    Clients.All.recieveMessage(message);
}

リモートプロシジャーコールの形式なのに、イベントハンドリング的に書くので少し立ち位置が困りますね。
OOPでアクセッサが受動的に宣言するのと同じ感じ。説明が難しい。
index.htmlへの追加は多いので、それぞれ変更したコードを全部載せます。

Startup1.cs

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(FirstSignalR.Startup1))]

namespace FirstSignalR
{
    public class Startup1
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

MyHub1.cs

using Microsoft.AspNet.SignalR;

namespace FirstSignalR
{
    public class MyHub1 : Hub
    {
        /// <summary>
        /// クライアントから受信した文字列を全クライアントにブロードキャストする
        /// </summary>
        /// <param name="message"></param>
        public void SendMessage(string message)
        {
            Clients.All.recieveMessage(message);
        }
    }
}

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SignalR</title>
</head>
<body>
    <div>
        サーバーへ送る:<input type="text" id="message" /><input type="button" id="sendmessage" value="送信" /><br/>
        サーバーから受信した結果<ul id="messages"></ul>
    </div>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.signalR-2.0.2.min.js"></script>
    <script src="signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            var myhub = $.connection.myHub1;

            myhub.client.recieveMessage = function (message) {
                var msg = $("<li/>").text(message);
                $("#messages").append(msg);
            };

            $.connection.hub.start().done(function () {
                $("#sendmessage").click(function() {
                    myhub.server.sendMessage($("#message").val());
                });
            });
        });
    </script>
</body>
</html>

ここまでで、SignalRに良くあるチャットと言うか、サーバにつながってるクライアントから文字列が飛んできたら全部のクライアントにブロードキャストするサーバの完成ってことになります。
手順的には単純で簡単なんですが、最後に追加するコードがほぼ定型句なのに毎回ググってかかなアカンのが個人的には気に入らない。
Visual Studioのファイルメニューからテンプレートのエクスポートを選んでStartup1.csとMyHub1.csとindex.htmlを全部テンプレート化出来るなんてのが個人的には理想なのですが。

それはさておき。
これだけの手順で接続されたクライアントにリアルタイムプッシュするサーバが書けます。IISもなくて構いません。
Azureにデプロイすればインターネット越しにすぐ実行させられます。（ただし勉強会のデモ中に通信料オーバーしてサーバ止まっちゃうかもですが。その節はXingleさんお世話になりました）

ここまで書いた各々の意味や詳細はネットのほかのサイトの解説に任せるとして、私のAdvent Calenderの記事は終わりにします。

明日のASP.NET Advent calender 2014 ははMasuqaTさんです！