ASP.NET SignalR入門に入門

@ITに掲載されてます、ASP.NET SignalR入門で、SignalRを勉強中です。

SignalRはサーバサイドとクライアントサイドでのリアルタイム通信を行うアプリを比較的簡単に作ることができるテクノロジーです。

ただ、リアルタイム配信自体は、FacebookやTwitterアプリでもよくある身近な機能なため、

パッと見は地味かもしれないです。

が、

これを簡単に実装できてしまうというところが、このテクノロジーのうま味だと思いますので、是非皆さんにも一度サンプルアプリを作成して欲しいです。

ということで、@ITの記事に掲載されている手順を元にサンプルを作成してみました。

はまったポイントは、記事の中ではSignalRのバージョンが1.0.1なのですが、

現在のバージョンは2.1.2であり、サーバサイドのStartupの仕方が変わったところですね。

ざっくり書くと手順は下記の流れになります。

１．プロジェクトの作成

２．サーバサイドの実装

３．クライアントサイドの実装

４．動作確認

１．プロジェクトの作成

まずは、プロジェクトの作成を行います。

今回は、空の状態から作成しました。

あと、動作確認は、PCとiPhoneから行いたいので、AzureのWebサイトを利用しました。

DBは使用しません。

２．サーバサイドの実装

ここからは、サーバサイドの処理を実装します。

まずは、NuGetより、Microsoft ASP.NET SignalRをインストールします。

サーバサイドの処理を行うSignalR Hubのファイルを格納するフォルダは、

慣例的に、Hubsフォルダに入れるみたいです。

でも、いろいろサンプルを見ていると、Hubsフォルダがないものもあるので、

特に規約として決まっているわけでもないみたいです。

今回は、作成しました。

SignalRハブを追加します。

ファイル名は、「EchoHub.cs」です。画像の名称に1がついているのは気にしないでください。

追加したしたソースを、下記の通りにします。

[ソース]

using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace y0SignalRDemo01.Hubs
{
　　[HubName("echo")]
　　public class EchoHub : Hub
　　{
　　　　public void Send(string text)
　　　　{
　　　　　　Clients.All.Receive(text);
　　　　}
　　}
}

Startup.csを追加します。

ここはSignalRのバージョンが2以降は、OWINを使うようになった変わった部分です。

作った、Startup.csは、下記のようにします。

app.MapSignalR();を追加して、usingの整理をしたくらいです。

[ソース]

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(y0SignalRDemo01.Startup))]

namespace y0SignalRDemo01
{
　　public class Startup
　　{
　　　　public void Configuration(IAppBuilder app)
　　　　{
　　　　　　// アプリケーションの設定方法の詳細については、

　　　　　　// http://go.microsoft.com/fwlink/?LinkID=316888 を参照してください
　　　　　　app.MapSignalR();
　　　　}
　　}
}

サーバサイドの実装はここまでとなります。

３．クライアントサイドの実装

ここからは、クライアントサイドの実装となります。

NuGetより、MicrosoftASP.Net SignalR .Net Clientをインストールします。

index.htmlを追加します。今時点のソリューションエクスプローラーは、

下記のようになってます。

追加したindex.htmlに、下記のソースを書きました。

＜＞は半角だと思ってみてください。

[ソース]

＜!DOCTYPE html＞

＜html xmlns="http://www.w3.org/1999/xhtml "＞
＜head＞
　　＜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-2.1.2.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＞
　　　　＜div＞
　　　　　　＜input type="text" id="message" /＞
　　　　　　＜input type="button" id="send" value="送信" disabled="disabled" /＞

　　　　　　＜ul id="list"＞＜/ul＞
　　　　＜/div＞
＜/body＞
＜/html＞

Webアプリなのに、Formタグがないのが、ちょっと不思議な感じもしますが、

これでちゃんと動作します。

ソースを読んで動かしてみれば、どのように動作しているかがわかると思います。

４．動作確認

左のブラウザはIEで、右のブラウザはChromeです。

まずは、IEで文字を入力して、送信ボタンをクリックします。