前回、SginalRの超簡単なスタートアップコードの解説をしました。
サーバー側(C#)はいいんですが、クライアントはJavaScriptで書かないといけないんですよね(当然ですが
MicrosoftのTypeScriptを使用すればもっとクライアントを楽にわかりやすく書けます。
ですが
これまた、日本語のサンプルがないないまったくない。
(探し方が下手なのはごめんなさい)
ことでまとめます。
【前提知識】
- TypeScriptの基本構文がわかる
- SignalRのクライアントをJavaScriptで書いたことがある
【準備するもの】
- SignalR Ver2.1.3
- TypeScriot Ver1.3
- signalr.TypeScript.DefinitelyTyped Ver0.1.6
【手順概要】
- SignalRの外部定義ファイルを追加
- サーバー側Hubクラス作成
- クライアント側記述
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