ASP.NET SignalRを知る：特集：ASP.NET SignalR入門（前編）（4/5 ページ）
●クライアント側の実装
SignalRは公式にJavaScriptや.NET Framework用のクライアント・ライブラリをNuGetで公開している。JavaScript用のクライアント・ライブラリはSignalRのインストールと同時に入るようになっているが、JavaScriptを使わずに.NET言語やそのほかの開発言語でクライアントを開発する場合には、クライアント・ライブラリを手動でインストールする必要がある。この場合には、次のコマンドを実装すればよい。
Install-Package Microsoft.AspNet.SignalR.Client
そして公式ではないがMac OS XとiOS向けにObjective-C言語で実装された「SignalR-ObjC」が公開されているので、これらのOSで動作するアプリにも簡単にSignalRの通信機能を組み込むことが可能だ。
今紹介した全てのクライアント・ライブラリは、言語特有な部分を除いてAPIがほぼ統一されているため、全てのプラットフォーム向けのライブラリについて学ぶ必要はない。そこで今回は一番の基本となっているJavaScriptのAPIを使うことにする。
それでは先ほどHubを実装したプロジェクトに、表示用のページを追加していこう。SignalRはビューに関しては静的なHTMLでも構わないが、今回は「Default.aspx」というファイル名のWebフォームを追加して実装する。
まずはjQueryとSignalRライブラリへの参照を追加してから、実際にサーバと通信を行うコードを書いていこう。クライアント側で行わなければならない処理は、大きく分けて以下の5つだ。
- サーバとの接続オブジェクトを作成
- Hubのプロキシ・オブジェクトを作成
- サーバから呼び出される関数を登録
- 接続を開始
- サーバのメソッドを呼び出し
そして、これら一連の処理を行うコードが以下になる。
<script>
$(function() {
// 1. サーバとの接続オブジェクト作成
var connection = $.hubConnection();
// 2. Hubのプロキシ・オブジェクトを作成
var echo = connection.createHubProxy("echo");
// 3. サーバから呼び出される関数を登録
echo.on("Receive", function (text) {
alert(text);
});
// 4. 接続を開始
connection.start(function() {
// 5. サーバのメソッドを呼び出し
echo.invoke("Send", "Hello, world");
});
})
注意点としては、クライアントからサーバのメソッドを呼び出すにしろ、クライアントで用意した関数がサーバから呼び出されるにしろ、接続を確立する必要があるということだ。当たり前のように思うだろうが、invokeメソッドの呼び出しはボタンなどがクリックされたときに行うことが多いため、接続に時間がかかってしまった場合には接続完了の前にボタンがクリックされることも十分あり得る。
接続が完了する前にinvokeメソッドを呼び出した場合には、当然ながら例外が投げられて処理が終了してしまう。そうなることを回避するために、invokeメソッドが接続完了前に呼び出されないようにしなくてはならない。
SignalRに固有の処理というわけでもないが、今回作成したクライアント側のコードを以下に示す。今回作成したのはメッセージをやりとりするだけの簡単なアプリだが、実行してみれば、どのような挙動なのかを確認できるだろう。
そして先ほど挙げた問題に対しても、接続が完了するまではボタンを無効にすることで、例外が投げられることを防いでいる。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/jquery.signalR-1.0.1.min.js"></script>
<script>
$(function() {
var connection = $.hubConnection();
var echo = connection.createHubProxy("echo");
echo.on("Receive", function (text) {
$("#list").append("<li>" + text + "</li>");
});
$("#send").click(function() {
var message = $("#message").val();
echo.invoke("Send", message).done(function() {
$("#message").val("");
});
});
connection.start(function() {
$("#send").prop("disabled", false);
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="message" />
<input type="button" id="send" value="送信" disabled="disabled" />
<ul id="list"></ul>
</div>
</form>
</body>
</html>
※この例では、「jquery-1.9.1.min.js」という記述のとおりjQuery「1.9.1」を使っているが、このバージョンは開発者の環境やプロジェクトごとに異なる場合があるので注意してほしい。
このページを表示すると、簡単なテキストボックスと［送信］ボタンだけのページが表示される。テキストボックスに文字列を入力後に［送信］ボタンをクリックすると、直下にメッセージが表示される。
これだけではSignalRの挙動確認としては不完全なので、次の画面のように、開いているページを別のタブで表示するなどしてブラウザ・セッションを増やしてから、先ほどと同様に［送信］ボタンをクリックする。すると、その瞬間に、開いている全てのページにメッセージが表示されるのが確認できるだろう。
ブラウザを複数立ち上げた場合、［送信］ボタンを押した直後に、全てのブラウザに送信したメッセージが配信されるここで作成したアプリは非常に簡単なものだ。しかしながら、たった数行のコードで数多くのクライアントとの双方向通信を可能にするSignalRの実力を分かっていただけたと思う。
Copyright© Digital Advantage Corp. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。