SignalR 1.x による高頻度リアルタイムHigh-Frequency Realtime with SignalR 1.x

提供者: Patrick Fletcherby Patrick Fletcher

Note

この記事では、ASP.NET SignalR を指します。This article refers to ASP.NET SignalR. SignalR を使用して、Java、Node.js、またはサーバーレス シナリオでは、リアルタイムのシナリオを有効にする方法と思う場合を見てASP.NET Core SignalRします。If you're thinking about using SignalR to enable real-time scenarios with Java, Node.js, or in a serverless scenario, take a look at ASP.NET Core SignalR. 既に ASP.NET SignalR を使用した場合を見て、のバージョンの違いバージョンの違いと ASP.NET Core SignalR での機能強化を理解するページ。If you've already used ASP.NET SignalR, take a look at the version differences page to understand the differences in the versions and the improvements in ASP.NET Core SignalR. 最後に、Microsoft Azure でリアルタイム アプリを実行することがわかっている場合を見て、 Azure SignalR サービスなど、アプリを必要とすると、クラウド ベースのスケール アウトを提供します。Finally, if you know you'll be running your real-time apps in Microsoft Azure, take a look at the Azure SignalR Service, as it provides cloud-based scale-out once your apps need it.

このチュートリアルでは、ASP.NET SignalR を使用して、頻度の高いメッセージング機能を提供する web アプリケーションを作成する方法を示します。This tutorial shows how to create a web application that uses ASP.NET SignalR to provide high-frequency messaging functionality. この場合、固定の率で送信される更新プログラムを意味頻度の高いメッセージングこのアプリケーションの場合、最大 10 個のメッセージを 2 回目です。High-frequency messaging in this case means updates that are sent at a fixed rate; in the case of this application, up to 10 messages a second.

このチュートリアルで作成するアプリケーションには、ユーザーがドラッグできるシェイプが表示されます。The application you'll create in this tutorial displays a shape that users can drag. その他のすべての接続されたブラウザーでの図形の位置は、時間指定の更新プログラムを使用して、ドラッグした図形の位置に一致するように更新されます。The position of the shape in all other connected browsers will then be updated to match the position of the dragged shape using timed updates.

このチュートリアルで導入された概念には、リアルタイムのゲームでのアプリケーションおよびその他のシミュレーション アプリケーションがあります。Concepts introduced in this tutorial have applications in real-time gaming and other simulation applications.

このチュートリアルでコメントは、ようこそ。Comments on the tutorial are welcome. チュートリアルに直接関係のない質問がある場合は、ASP.NET SignalR フォーラムまたはStackOverflow.comにて投稿してください。If you have questions that are not directly related to the tutorial, you can post them to the ASP.NET SignalR forum or StackOverflow.com.

概要Overview

このチュートリアルでは、リアルタイムでの他のブラウザーとオブジェクトの状態を共有するアプリケーションを作成する方法を示します。This tutorial demonstrates how to create an application that shares the state of an object with other browsers in real time. ここで作成するアプリケーションには、MoveShape が呼び出されます。The application we'll create is called MoveShape. MoveShape ページ、ユーザーがドラッグできます。 HTML Div 要素が表示されます。ユーザーが、Div をドラッグしたときは、新しい位置を送信して、サーバーは、一致するように、図形の位置を更新するその他のすべての接続されているクライアントに表示されます。The MoveShape page will display an HTML Div element that the user can drag; when the user drags the Div, its new position will be sent to the server, which will then tell all other connected clients to update the shape's position to match.

アプリケーション ウィンドウ

このチュートリアルで作成したアプリケーションは Damian Edwards によるデモに基づきます。The application created in this tutorial is based on a demo by Damian Edwards. このデモを格納しているビデオがわかるようにここします。A video containing this demo can be seen here.

このチュートリアルは、各図形をドラッグとして起動されるイベントから SignalR メッセージを送信する方法を示すから始めます。The tutorial will start by demonstrating how to send SignalR messages from each event that fires as the shape is dragged. 接続されている各クライアントは、メッセージを受信するたびに、図形のローカル バージョンの位置をし更新されます。Each connected client will then update the position of the local version of the shape each time a message is received.

このメソッドを使用して、アプリケーションは機能、中にこれは推奨されるプログラミング モデルでは、送信されないため、メッセージによっては、クライアントとサーバーを圧迫取得でしたし、パフォーマンスが低下するメッセージの数に上限がなくなるため.While the application will function using this method, this is not a recommended programming model, since there would be no upper limit to the number of messages getting sent, so the clients and server could get overwhelmed with messages and performance would degrade. クライアントで表示されているアニメーションはそれぞれの新しい場所にスムーズに移動するのではなくの各メソッドによって、図形は瞬時に移動すると、不整合にもなります。The displayed animation on the client would also be disjointed, as the shape would be moved instantly by each method, rather than moving smoothly to each new location. このチュートリアルの以降のセクションは、クライアントまたはサーバーによってメッセージが送信される最大転送率を制限するタイマー関数を作成する方法と場所の間でスムーズに図形を移動する方法を示します。Later sections of the tutorial will demonstrate how to create a timer function that restricts the maximum rate at which messages are sent by either the client or server, and how to move the shape smoothly between locations. このチュートリアルで作成したアプリケーションの最終バージョンをからダウンロードできますコード ギャラリーします。The final version of the application created in this tutorial can be downloaded from Code Gallery.

このチュートリアルには、次のセクションが含まれています。This tutorial contains the following sections:

必須コンポーネントPrerequisites

このチュートリアルでは、Visual Studio 2012 または Visual Studio 2010 が必要です。This tutorial requires Visual Studio 2012 or Visual Studio 2010. Visual Studio 2010 を使用する場合、プロジェクトで .NET Framework 4.5 ではなく、.NET Framework 4 を使用します。If Visual Studio 2010 is used, the project will use .NET Framework 4 rather than .NET Framework 4.5.

Visual Studio 2012 を使用している場合は、インストールすることをお勧めしますが、 ASP.NET and Web Tools 2012.2 updateします。If you are using Visual Studio 2012, it's recommended that you install the ASP.NET and Web Tools 2012.2 update. この更新プログラムには、発行する、新しい機能の強化などの新機能が含まれていて、新しいテンプレート。This update contains new features such as enhancements to publishing, new functionality, and new templates.

Visual Studio 2010 があれば、以下のことを確認NuGetがインストールされています。If you have Visual Studio 2010, make sure that NuGet is installed.

プロジェクトの作成Create the project

このセクションでは、Visual Studio でプロジェクトを作成します。In this section, we'll create the project in Visual Studio.

  1. ファイルボタンをクリックし新しいプロジェクトします。From the File menu click New Project.

  2. 新しいプロジェクト] ダイアログ ボックスで、展開c# [テンプレート選択とWebします。In the New Project dialog box, expand C# under Templates and select Web.

  3. 選択、空の ASP.NET Web アプリケーション名では、プロジェクト テンプレートは、 MoveShapeDemo、 をクリックOKします。Select the ASP.NET Empty Web Application template, name the project MoveShapeDemo, and click OK.

    新しいプロジェクトを作成します。

SignalR と JQuery.UI NuGet パッケージを追加します。Add the SignalR and JQuery.UI NuGet Packages

プロジェクトに SignalR の機能を追加するには、NuGet パッケージをインストールします。You can add SignalR functionality to a project by installing a NuGet package. このチュートリアルは、図形をドラッグし、アニメーション化を許可する JQuery.UI パッケージを使用してもします。This tutorial will also use the JQuery.UI package for allowing the shape to be dragged and animated.

  1. クリックしてツール |NuGet パッケージ マネージャー |パッケージ マネージャー コンソールします。Click Tools | NuGet Package Manager | Package Manager Console.

  2. パッケージ マネージャーで、次のコマンドを入力します。Enter the following command in the package manager.

    Install-Package Microsoft.AspNet.SignalR -Version 1.1.3
    

    SignalR パッケージは、依存関係として、多くの他の NuGet パッケージをインストールします。The SignalR package installs a number of other NuGet packages as dependencies. インストールが完了するとすべての ASP.NET アプリケーションで SignalR を使用するために必要なサーバーとクライアント コンポーネントがあります。When the installation is finished you have all of the server and client components required to use SignalR in an ASP.NET application.

  3. JQuery と JQuery.UI パッケージをインストールするパッケージ マネージャー コンソールに次のコマンドを入力します。Enter the following command into the package manager console to install the JQuery and JQuery.UI packages.

    Install-Package jQuery.ui.combined
    

ベースのアプリケーションを作成します。Create the base application

このセクションで各マウス移動イベント中に、図形の場所をサーバーに送信するブラウザー アプリケーションを作成します。In this section, we'll create a browser application that sends the location of the shape to the server during each mouse move event. 受信すると、サーバーは、接続されている他のすべてのクライアントにこの情報をブロードキャストします。The server then broadcasts this information to all other connected clients as it is received. 以降のセクションでは、このアプリケーションに拡張します。We'll expand on this application in later sections.

  1. ソリューション エクスプ ローラープロジェクトを右クリックし、選択、追加クラス..クラスの名前MoveShapeHubクリック追加します。In Solution Explorer, right-click on the project and select Add, Class.... Name the class MoveShapeHub and click Add.

  2. 新しいコードを置き換えるMoveShapeHubクラスを次のコード。Replace the code in the new MoveShapeHub class with the following code.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using Microsoft.AspNet.SignalR;
    using Microsoft.AspNet.SignalR.Hubs;
    using Newtonsoft.Json;
    
    namespace MoveShapeDemo
    {
        public class MoveShapeHub : Hub
        {
            public void UpdateModel(ShapeModel clientModel)
            {
                clientModel.LastUpdatedBy = Context.ConnectionId;
                // Update the shape model within our broadcaster
                Clients.AllExcept(clientModel.LastUpdatedBy).updateShape(clientModel);
            }
        }
        public class ShapeModel
        {
            // We declare Left and Top as lowercase with 
            // JsonProperty to sync the client and server models
            [JsonProperty("left")]
            public double Left { get; set; }
    
            [JsonProperty("top")]
            public double Top { get; set; }
    
            // We don't want the client to get the "LastUpdatedBy" property
            [JsonIgnore]
            public string LastUpdatedBy { get; set; }
        }
    }
    

    MoveShapeHub上記のクラスは、SignalR ハブの実装。The MoveShapeHub class above is an implementation of a SignalR hub. SignalR の概要チュートリアルでは、ハブに直接に、クライアントが呼び出すメソッドがあります。As in the Getting Started with SignalR tutorial, the hub has a method that the clients will call directly. この場合、クライアントは新しいを格納するオブジェクトを送信する、サーバーでは、接続されている他のすべてのクライアントにブロードキャストを取得し、図形の X および Y 座標。In this case, the client will send an object containing the new X and Y coordinates of the shape to the server, which then gets broadcasted to all other connected clients. SignalR には、JSON を使用してこのオブジェクトは自動的にシリアル化します。SignalR will automatically serialize this object using JSON.

    クライアントに送信されるオブジェクト (ShapeModel) 図形の位置を格納するメンバーが含まれます。The object that will be sent to the client (ShapeModel) contains members to store the position of the shape. サーバー上のオブジェクトのバージョンも含まれていますを追跡するにはメンバー クライアントのデータが格納される、特定のクライアントで独自のデータが送信されないようにします。The version of the object on the server also contains a member to track which client's data is being stored, so that a given client won't be sent their own data. このメンバーを使用して、JsonIgnoreからシリアル化され、クライアントに送信されるようにする属性。This member uses the JsonIgnore attribute to keep it from being serialized and sent to the client.

  3. 次に、アプリケーションの起動時に、ハブを設定します。Next, we'll set up the hub when the application starts. ソリューション エクスプ ローラープロジェクトを右クリックし、クリックして追加 |グローバル アプリケーション クラスします。In Solution Explorer, right-click the project, then click Add | Global Application Class. 既定の名前をそのまま使用Global をクリックOKします。Accept the default name of Global and click OK.

    グローバル アプリケーション クラスを追加します。

  4. 次の追加using、提供された後のステートメントを使用してGlobal.asax.cs クラス内のステートメント。Add the following using statement after the provided using statements in the Global.asax.cs class.

    using System.Web.Routing;
    
  5. 次のコードの行を追加、 Application_Start SignalR の既定のルートを登録するグローバル クラスのメソッド。Add the following line of code in the Application_Start method of the Global class to register the default route for SignalR.

    RouteTable.Routes.MapHubs();
    

    Global.asax ファイルは、次のようになります。Your global.asax file should look like the following:

    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 MoveShapeDemo
    {
        public class Global : System.Web.HttpApplication
        {
            protected void Application_Start(object sender, EventArgs e)
            {
                RouteTable.Routes.MapHubs();
            }
        }
    }
    
  6. 次に、クライアントを追加します。Next, we'll add the client. ソリューション エクスプ ローラープロジェクトを右クリックし、クリックして追加 |新しい項目のします。In Solution Explorer, right-click the project, then click Add | New Item. 新しい項目の追加ダイアログ ボックスで、 Html ページします。In the Add New Item dialog, select Html Page. ページに、適切な名前を付けます (などDefault.html) をクリック追加します。Give the page an appropriate name (like Default.html) and click Add.

  7. ソリューション エクスプ ローラーで作成したページを右クリックし、をクリックしてスタート ページとして設定します。In Solution Explorer, right-click the page you just created and click Set as Start Page.

  8. HTML ページの既定のコードを次のコード スニペットに置き換えます。Replace the default code in the HTML page with the following code snippet.

    Note

    Scripts フォルダーにプロジェクトに追加のパッケージの一致の下、スクリプトが参照を確認します。Verify that the script references below match the packages added to your project in the Scripts folder. Visual Studio 2010 では、JQuery、および SignalR プロジェクトに追加のバージョンには 次のバージョン番号が一致しません。In Visual Studio 2010, the version of JQuery and SignalR added to the project may not match the version numbers below.

    <!DOCTYPE html>
    <html>
    <head>
        <title>SignalR MoveShape Demo</title>
        <style>
            #shape {
                width: 100px;
                height: 100px;
                background-color: #FF0000;
            }
        </style>
    </head>
    <body>
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery-ui-1.10.2.js"></script>
    <script src="Scripts/jquery.signalR-1.0.1.js"></script>
    <script src="/signalr/hubs"></script>
    <script>
     $(function () {
                var moveShapeHub = $.connection.moveShapeHub,
                $shape = $("#shape"),
    
                shapeModel = {
                    left: 0,
                    top: 0
                };
    
                moveShapeHub.client.updateShape = function (model) {
                    shapeModel = model;
                    $shape.css({ left: model.left, top: model.top });
                };
    
                $.connection.hub.start().done(function () {
                    $shape.draggable({
                        drag: function () {
                            shapeModel = $shape.offset();
                            moveShapeHub.server.updateModel(shapeModel);
                        }
                    });
                });
            });
    </script>
    
        <div id="shape" />
    </body>
    </html>
    

    上の HTML および JavaScript コード図形と呼ばれる赤い Div を作成し、jQuery ライブラリを使用して、図形のドラッグ動作を有効にし、図形の使用drag図形の位置をサーバーに送信するイベントです。The above HTML and JavaScript code creates a red Div called Shape, enables the shape's dragging behavior using the jQuery library, and uses the shape's drag event to send the shape's position to the server.

  9. F5 キーを押してアプリケーションを起動します。Start the application by pressing F5. ページの URL をコピーして、2 番目のブラウザー ウィンドウに貼り付けます。Copy the page's URL, and paste it into a second browser window. ブラウザー ウィンドウのいずれかで、図形をドラッグします。別のブラウザー ウィンドウ内の図形を移動する必要があります。Drag the shape in one of the browser windows; the shape in the other browser window should move.

    アプリケーション ウィンドウ

クライアントのループを追加します。Add the client loop

すべてのマウス移動イベントに図形の位置を送信すると、ネットワーク トラフィック量が不要なを作成するため、クライアントからメッセージを調整する必要があります。Since sending the location of the shape on every mouse move event will create an unnecessary amount of network traffic, the messages from the client need to be throttled. 使用して、javascriptsetInterval固定の率でサーバーに新しい位置情報を送信するループを設定する関数。We'll use the javascript setInterval function to set up a loop that sends new position information to the server at a fixed rate. このループは非常に基本的な「ゲーム ループ」を繰り返し呼び出された関数でドライブのすべてのゲームやその他のシミュレーションの機能を表したものです。This loop is a very basic representation of a "game loop", a repeatedly called function that drives all of the functionality of a game or other simulation.

  1. 次のコード スニペットを一致するように HTML ページ内のクライアント コードを更新します。Update the client code in the HTML page to match the following code snippet.

    <!DOCTYPE html>
    <html>
    <head>
        <title>SignalR MoveShape Demo</title>
        <style>
            #shape {
                width: 100px;
                height: 100px;
                background-color: #FF0000;
            }
        </style>
    
    </head>
    <body>
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery-ui-1.10.2.js"></script>
    <script src="Scripts/jquery.signalR-1.0.1.js"></script>
    <script src="/signalr/hubs"></script>
    <script>
            $(function () {
                var moveShapeHub = $.connection.moveShapeHub,
                    $shape = $("#shape"),
                    // Send a maximum of 10 messages per second 
                    // (mouse movements trigger a lot of messages)
                    messageFrequency = 10, 
                    // Determine how often to send messages in
                    // time to abide by the messageFrequency
                    updateRate = 1000 / messageFrequency, 
                    shapeModel = {
                        left: 0,
                        top: 0
                    },
                    moved = false;
    
                moveShapeHub.client.updateShape = function (model) {
                    shapeModel = model;
                    $shape.css({ left: model.left, top: model.top });
                };
    
                $.connection.hub.start().done(function () {
                    $shape.draggable({
                        drag: function () {
                            shapeModel = $shape.offset();
                            moved = true;
                        }
                    });
    
                    // Start the client side server update interval
                    setInterval(updateServerModel, updateRate);
                });
    
                function updateServerModel() {
                    // Only update server if we have a new movement
                    if (moved) {
                        moveShapeHub.server.updateModel(shapeModel);
                        moved = false;
                    }
                }
            });
    </script>
    
        <div id="shape" />
    </body>
    </html>
    

    上記の更新プログラムの追加、 updateServerModel 、固定周波数に呼び出される関数。The above update adds the updateServerModel function, which gets called on a fixed frequency. この関数は、位置データをサーバーに送信されるたびに、movedフラグは、送信する新しい位置データがあることを示します。This function sends the position data to the server whenever the moved flag indicates that there is new position data to send.

  2. F5 キーを押してアプリケーションを起動します。Start the application by pressing F5. ページの URL をコピーして、2 番目のブラウザー ウィンドウに貼り付けます。Copy the page's URL, and paste it into a second browser window. ブラウザー ウィンドウのいずれかで、図形をドラッグします。別のブラウザー ウィンドウ内の図形を移動する必要があります。Drag the shape in one of the browser windows; the shape in the other browser window should move. サーバーに送信するメッセージの数は制限されますので、アニメーションは、前のセクションのようにスムーズ表示されません。Since the number of messages that get sent to the server will be throttled, the animation will not appear as smooth as in the previous section.

    アプリケーション ウィンドウ

サーバー ループを追加します。Add the server loop

現在のアプリケーションで、サーバーからクライアントに送信されるメッセージは受信するときに多くの場合、移動します。In the current application, messages sent from the server to the client go out as often as they are received. クライアントで発生していたように、同様の問題を表示しますメッセージは、必要なものと、接続が溢れて結果としてより多くの場合、送信できます。This presents a similar problem as was seen on the client; messages can be sent more often than they are needed, and the connection could become flooded as a result. このセクションでは、送信メッセージのレートを調整するタイマーを実装するためにサーバーを更新する方法について説明します。This section describes how to update the server to implement a timer that throttles the rate of the outgoing messages.

  1. 内容を置き換えるMoveShapeHub.cs次のコード スニペットを使用します。Replace the contents of MoveShapeHub.cs with the following code snippet.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    using System.Threading;
    using Microsoft.AspNet.SignalR;
    
    using Newtonsoft.Json;
    
    namespace MoveShapeDemo
    {
        public class Broadcaster
        {
            private readonly static Lazy<Broadcaster> _instance = 
                new Lazy<Broadcaster>(() => new Broadcaster());
            // We're going to broadcast to all clients a maximum of 25 times per second
            private readonly TimeSpan BroadcastInterval = 
                TimeSpan.FromMilliseconds(40); 
            private readonly IHubContext _hubContext;
            private Timer _broadcastLoop;
            private ShapeModel _model;
            private bool _modelUpdated;
    
            public Broadcaster()
            {
                // Save our hub context so we can easily use it 
                // to send to its connected clients
                _hubContext = GlobalHost.ConnectionManager.GetHubContext<MoveShapeHub>();
    
                _model = new ShapeModel();
                _modelUpdated = false;
    
                // Start the broadcast loop
                _broadcastLoop = new Timer(
                    BroadcastShape, 
                    null, 
                    BroadcastInterval, 
                    BroadcastInterval);
            }
    
            public void BroadcastShape(object state)
            {
                // No need to send anything if our model hasn't changed
                if (_modelUpdated)
                {
                    // This is how we can access the Clients property 
                    // in a static hub method or outside of the hub entirely
                    _hubContext.Clients.AllExcept(_model.LastUpdatedBy).updateShape(_model);
                    _modelUpdated = false;
                }
            }
    
            public void UpdateShape(ShapeModel clientModel)
            {
                _model = clientModel;
                _modelUpdated = true;
            }
    
            public static Broadcaster Instance
            {
                get
                {
                    return _instance.Value;
                }
            }
        }
        
        public class MoveShapeHub : Hub
        {
            // Is set via the constructor on each creation
            private Broadcaster _broadcaster;
    
            public MoveShapeHub()
                : this(Broadcaster.Instance)
            {
            }
    
            public MoveShapeHub(Broadcaster broadcaster)
            {
                _broadcaster = broadcaster;
            }
    
            public void UpdateModel(ShapeModel clientModel)
            {
                clientModel.LastUpdatedBy = Context.ConnectionId;
                // Update the shape model within our broadcaster
                _broadcaster.UpdateShape(clientModel);
            }
        }
        public class ShapeModel
        {
            // We declare Left and Top as lowercase with 
            // JsonProperty to sync the client and server models
            [JsonProperty("left")]
            public double Left { get; set; }
    
            [JsonProperty("top")]
            public double Top { get; set; }
    
            // We don't want the client to get the "LastUpdatedBy" property
            [JsonIgnore]
            public string LastUpdatedBy { get; set; }
        }
        
    }
    

    上記のコードを追加するクライアントの展開、Broadcasterクラスは、調整、送信メッセージを使用して、 Timer .NET framework からクラス。The above code expands the client to add the Broadcaster class, which throttles the outgoing messages using the Timer class from the .NET framework.

    ハブ自体は一時的なので (必要なたびに)、作成、Broadcasterはシングルトンとして作成されます。Since the hub itself is transitory (it is created every time it is needed), the Broadcaster will be created as a singleton. (.NET 4 で導入) 遅延初期化を使用して、作成を遅らせる必要になるまでは、タイマーを開始する前に、ハブの最初のインスタンスが完全に作成されたことを確認します。Lazy initialization (introduced in .NET 4) is used to defer its creation until it is needed, ensuring that the first hub instance is completely created before the timer is started.

    クライアントの呼び出しUpdateShape関数は、ハブからは移動し、UpdateModelメソッド、ことがすぐに着信メッセージを受信するたびに呼び出されないようにします。The call to the clients' UpdateShape function is then moved out of the hub's UpdateModel method, so that it is no longer called immediately whenever incoming messages are received. 25 の呼び出し、1 秒あたりのレートで、クライアントにメッセージの送信される代わりに、によって管理される、_broadcastLoop内からタイマー、Broadcasterクラス。Instead, the messages to the clients will be sent at a rate of 25 calls per second, managed by the _broadcastLoop timer from within the Broadcaster class.

    ハブから直接、クライアント メソッドを呼び出すことではなく、最後に、Broadcasterクラスは、現在の作業ハブへの参照を取得する必要があります (_hubContext) を使用して、GlobalHostします。Lastly, instead of calling the client method from the hub directly, the Broadcaster class needs to obtain a reference to the currently operating hub (_hubContext) using the GlobalHost.

  2. F5 キーを押してアプリケーションを起動します。Start the application by pressing F5. ページの URL をコピーして、2 番目のブラウザー ウィンドウに貼り付けます。Copy the page's URL, and paste it into a second browser window. ブラウザー ウィンドウのいずれかで、図形をドラッグします。別のブラウザー ウィンドウ内の図形を移動する必要があります。Drag the shape in one of the browser windows; the shape in the other browser window should move. 前のセクションからブラウザーで表示される相違点されませんが、クライアントに送信するメッセージの数は制限されます。There will not be a visible difference in the browser from the previous section, but the number of messages that get sent to the client will be throttled.

    アプリケーション ウィンドウ

クライアントで滑らかなアニメーションを追加します。Add smooth animation on the client

アプリケーションがほぼ完全には、1 つ以上向上、クライアント上の図形の動きにサーバー メッセージへの応答での移動時にすることもできます。The application is almost complete, but we could make one more improvement, in the motion of the shape on the client as it is moved in response to server messages. JQuery UI ライブラリの使用、サーバーで指定された新しい場所に図形の位置を設定するのではなくanimateの現在および新しい位置の間でスムーズに図形を移動する関数。Rather than setting the position of the shape to the new location given by the server, we'll use the JQuery UI library's animate function to move the shape smoothly between its current and new position.

  1. クライアントの更新updateShapeを検索するメソッドなどの次の強調表示されたコード。Update the client's updateShape method to look like the highlighted code below:

    <!DOCTYPE html>
    <html>
    <head>
        <title>SignalR MoveShape Demo</title>
        <style>
            #shape {
                width: 100px;
                height: 100px;
                background-color: #FF0000;
            }
        </style>
    
    </head>
    <body>
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery-ui-1.10.2.js"></script>
    <script src="Scripts/jquery.signalR-1.0.1.js"></script>
    <script src="/signalr/hubs"></script>
    <script>
            $(function () {
                var moveShapeHub = $.connection.moveShapeHub,
                    $shape = $("#shape"),
                    // Send a maximum of 10 messages per second 
                    // (mouse movements trigger a lot of messages)
                    messageFrequency = 10, 
                    // Determine how often to send messages in
                    // time to abide by the messageFrequency
                    updateRate = 1000 / messageFrequency, 
                    shapeModel = {
                        left: 0,
                        top: 0
                    },
                    moved = false;
    
                 moveShapeHub.client.updateShape = function (model) {
                     shapeModel = model;
                     // Gradually move the shape towards the new location (interpolate)
                     // The updateRate is used as the duration because by the time 
                     // we get to the next location we want to be at the "last" location
                     // We also clear the animation queue so that we start a new 
                     // animation and don't lag behind.
                     $shape.animate(shapeModel, { duration: updateRate, queue: false });
                };
    
                $.connection.hub.start().done(function () {
                    $shape.draggable({
                        drag: function () {
                            shapeModel = $shape.offset();
                            moved = true;
                        }
                    });
    
                    // Start the client side server update interval
                    setInterval(updateServerModel, updateRate);
                });
    
                function updateServerModel() {
                    // Only update server if we have a new movement
                    if (moved) {
                        moveShapeHub.server.updateModel(shapeModel);
                        moved = false;
                    }
                }
            });
    </script>
    
        <div id="shape" />
    </body>
    </html>
    

    上記のコードでは、(この例では、100 ミリ秒) では、アニメーションの間隔の過程で、サーバーで指定された新しい 1 つに、古い場所から図形を移動します。The above code moves the shape from the old location to the new one given by the server over the course of the animation interval (in this case, 100 milliseconds). 新しいアニメーションが開始される前に、図形で実行されている任意の前のアニメーションがクリアされます。Any previous animation running on the shape is cleared before the new animation starts.

  2. F5 キーを押してアプリケーションを起動します。Start the application by pressing F5. ページの URL をコピーして、2 番目のブラウザー ウィンドウに貼り付けます。Copy the page's URL, and paste it into a second browser window. ブラウザー ウィンドウのいずれかで、図形をドラッグします。別のブラウザー ウィンドウ内の図形を移動する必要があります。Drag the shape in one of the browser windows; the shape in the other browser window should move. その他のウィンドウで、図形の移動には、その動きが受信メッセージごとに 1 回設定されているのではなく、時間に補間と小さいぎくしゃくが表示されます。The movement of the shape in the other window should appear less jerky as its movement is interpolated over time rather than being set once per incoming message.

    アプリケーション ウィンドウ

以降の手順Further Steps

このチュートリアルでは、クライアントとサーバー間の頻度の高いメッセージを送信する SignalR アプリケーションをプログラミングする方法を学習できました。In this tutorial, you've learned how to program a SignalR application that sends high-frequency messages between clients and servers. この通信パラダイムはなど、オンライン ゲームとその他のシミュレーションを開発するために役立ちますSignalR を使って作成された ShootR ゲームします。This communication paradigm is useful for developing online games and other simulations, such as the ShootR game created with SignalR.

このチュートリアルで作成した完全なアプリケーションをからダウンロードできますコード ギャラリーします。The complete application created in this tutorial can be downloaded from Code Gallery.

SignalR 開発の概念に関する詳細については、SignalR のソース コードおよびリソースは、次のサイトを参照してください。To learn more about SignalR development concepts, visit the following sites for SignalR source code and resources: