TypeScriptとSignalR

前回、SginalRの超簡単なスタートアップコードの解説をしました。
サーバー側(C#)はいいんですが、クライアントはJavaScriptで書かないといけないんですよね（当然ですが

MicrosoftのTypeScriptを使用すればもっとクライアントを楽にわかりやすく書けます。

ですが

これまた、日本語のサンプルがないないまったくない。
（探し方が下手なのはごめんなさい）
ことでまとめます。

【前提知識】

• TypeScriptの基本構文がわかる
• SignalRのクライアントをJavaScriptで書いたことがある

【準備するもの】

• SignalR　Ver2.1.3
• TypeScriot　Ver1.3
• signalr.TypeScript.DefinitelyTyped Ver0.1.6

【手順概要】

1. SignalRの外部定義ファイルを追加
2. サーバー側Hubクラス作成
3. クライアント側記述

SignalRの外部定義ファイルを追加

NugetからSignalRの外部定義ファイルを取得

PM> Install-Package signalr.TypeScript.DefinitelyTyped

サーバー側Hubクラス作成

簡単にメッセージを全クライアントへ配信するハブクラスを作成します。

using System;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
 
namespace StartUpSample.Hubs
{
    [HubName("chatHub")]
    public class ChatHub : Hub
    {
        public void Send(string message)
        {
            Clients.All.Recv(message);
        }
    }
}

クライアント側記述

今回のメイン処理です。
特に難しい構文ではないので解説は省略。

module SignalR {
    export class SignalRClient {
 
        public Hub: HubProxy = null;
        constructor() {
            this.Hub = $.connection.hub.createHubProxy('chatHub');
 
            //サーバーから受信するイベントの登録
            this.Hub.on('Recv', (data) => {
                alert('データ受信：'+data);
            });
 
            //接続開始
            $.connection.hub.start().done(() => {
                alert('接続完了');
            });
        }
 
        //サーバーにメッセージを送信する処理
        public Send(message: string): void {
            this.Hub.invoke('Send', message);
        }
    }
}

とな感じです。
これで生成されるJavaScriptのコードは見たくないですが一応

var SignalR;
(function (SignalR) {
    var SignalRClient = (function () {
        function SignalRClient() {
            this.Hub = null;
            this.Hub = $.connection.hub.createHubProxy('HubName');
 
            //サーバーから受信するイベントの登録
            this.Hub.on('Recv', function (data) {
                alert('データ受信：' + data);
            });
 
            //接続開始
            $.connection.hub.start().done(function () {
                alert('接続完了');
            });
        }
        //サーバーにメッセージを送信する処理
        SignalRClient.prototype.Send = function (message) {
            this.Hub.invoke('Send', message);
        };
        return SignalRClient;
    })();
    SignalR.SignalRClient = SignalRClient;
})(SignalR || (SignalR = {}));
//# sourceMappingURL=TsOnSgnalR.js.map