はじめよう、SignalR！！ - orzmakoto’s blog

SignalRってご存じですか？
Microsoftが開発したASP.NETを基盤としてリアルタイム通信フレームワークです。
登場したのは、2013年2月のことです。

なぜ、今になって書こうと思ったのか？
SignalRはOOSで開発されていて進化が速いです。そして破壊的な進化を繰り返しています。

どういうことか。
1.0が登場した頃に書かれたサンプルは、古くて今の最新では動かない。
ということは、最新バージョンで作り出すにはサンプルがかなり少ないと感じたので書こうと思い立ちました。

大まかな流れ。
1)ASP.NET　MVCの空のプロへジェクトを作成（省略）
2)NugetからSignalRのライブラリを取得
3)Startup.csにコード記述
4)ハブクラス作成
5)クライアント側コード記述

2)NugetからSignalRのライブラリを取得

パッケージコンソールもしくは、パッケージマネージャーからSignalR 2.1.2を取得
コンソール

PM> Install-Package Microsoft.AspNet.SignalR

3)Startup.csにコード記述

using Microsoft.AspNet.SignalR;
using Microsoft.Owin;
using Owin;
 
[assembly: OwinStartupAttribute(typeof(StartUpSample.Startup))]
namespace StartUpSample
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

4)ハブクラス作成

プロジェクトフォルダの直下に「Hub」フォルダを作成し新しいハブクラスを作成する。

using System;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
 
namespace StartUpSample.Hubs
{
    [HubName("sampleHub")]
    public class SampleHub : Hub
    {
        static int valueCount;
 
        public void GetValue()
        {
            valueCount += 1;
            base.Clients.All.onUpdate(valueCount);
        }
    }
}

GetValueを呼ぶと単純に整数値を返すメソッド。

5)クライアント側コード記述

次にクライアント側の作成をします。ここで注意するのは、スクリプトファイルの参照の順番です。

<script src="@Url.Content(" ~="" scripts="" jquery.signalr-2.1.2.js")"="" type="text/javascript"></script>
<script src="~/signalr/hubs"></script>
<script_>
    $(function () {
        var con = $.hubConnection();
 
        var hub = con.createHubProxy('sampleHub');
        hub.on('onUpdate', function (value) {
            $('#text').val(value);
        });
 
        con.start(function () {
            alert('接続完了');
        }).fail(function (code) {
            alert(code);
        });
 
        $('#button').click(function () {
            hub.invoke('GetValue');
        });
    });
</script_>

”~/Scripts/jquery.signalR-2.1.2.js”を参照してから、”~/signalr/hubs”の参照の追加を行うこと。
逆にしてしまうと、よくわからないエラーが発生します。
この参照ですが、昔のバージョンでは”~/signalr/hubs”の参照が必要なかったので、1.x.xのサンプルコードには記述がないので注意が必要です。

最後に適当にボタンの配置とか結果表示用のテキストボックスを配置しておしまい

<input id="button" type="button" value="値取得">
<input id="text" type="text">

これで、完了です。後はデバッグを開始して、接続完了のアラートを確認して、値取得ボタンを押すとサーバーから値が戻ってきてテキストボックスに表示されます。