ASP.NET SignalR
サーバプッシュのWebテクノロジーはいくつかありますが、ASP.NETで提供される最新の技術であるSignalRを試してみました。
最近いろいろとテストするにあたって感じるのは、記事等を読んで理屈ではわかっていても実際にやってみると環境や設定、バージョン違い等で構築に結構手間取ったりすることがあります。やはり実際に自分でやってみるということは大切だと思うこのごろです。
今回参考にしたのは以下の記事ですが、パケットキャプチャをとるためIIS(ローカル)で動作させました。
http://www.atmarkit.co.jp/ait/articles/1303/19/news099.html ASP.NET SignalR入門（前編)
環境 : VisualStduo 2012 / Windows 8
管理者としてVSを実行
ASP.NET空のWebアプリケーションのプロジェクトを作成
参照設定の追加でNugetパッケージ管理からSignalRを検索してインストール
新しい項目の追加でSignalR Hubクラスを作成 MyHub1.cs
新しい項目の追加でグローバルアプリケーションクラス作成 Global.asax
新しいウェブフォームの追加 WebForm1.aspx, WebForm2.aspx
MyHub1.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
namespace aspEmptyWebSignalr.Hubs
{
[HubName("echo")]
public class MyHub1 : Hub
{
public void Send(string text)
{
Clients.All.Receive(text);
}
}
}
Global.asax
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.Web.Routing;
namespace aspEmptyWebSignalr
{
public class Global : System.Web.HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHubs();
}
}
}
WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="aspEmptyWebSignalr.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-1.1.2.min.js"></script>
<script>
$(function () {
var connection = $.hubConnection("http://192.168.11.10/test/aspEmptyWebSignalr/signalr/hubs");
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>
受信のみバージョンもテストしてみました。(送信と受信をわけることによって面白いことができそうです。)
WebForm2.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="aspEmptyWebSignalr.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-1.1.2.min.js"></script>
<script>
$(function () {
var connection = $.hubConnection("http://192.168.11.10/test/aspEmptyWebSignalr/signalr/hubs");
var echo = connection.createHubProxy("echo");
echo.on("Receive", function (text) {
$("#list").append("<li>" + text + "</li>");
});
connection.start();
})
</script>
</head>
<body>
<div>
<ul id="list"></ul>
</div>
</body>
</html>
IISにデプロイするときは$.hubConnectionの引数にURLをフルで書く必要があります。(デフォルトだと空)
デプロイは、IISマネージャでDefaultWebSiteの下にディレクトリを作成した後、VSのビルド->Webの発行で、発行方法「ファイルシストム」を選び、ターゲットに作成してディレクトリを指定します。
バケットキャプチャはWireSharkを使い、サーバ側(192.168.11.10)でキャプチャしました。クライアント(192.168.11.12)はFirefoxの最新バージョン(22)です。
送信したテスキトは、”aaaaaaaaaaaa”です。HTTPとはまた違うみたいですね。また調べていきたいです。ちなみにIE7/WindowsXPでも試しましたが、通信できませんでした。(WebSocketに対応していないブラウザだと違うプロトコルでやるのかなと思ったのですが・・まだ他に設定がいるのかも)あとiPhoneのSafariは動作確認しました。
ASP.NETの既存のサービスに追加する形で使うのに、とても便利だと思いました。