チュートリアル: SignalR 2 使用頻度の高いリアルタイム アプリを作成します。Tutorial: Create high-frequency real-time app with SignalR 2

このチュートリアルでは、ASP.NET SignalR 2 を使用して、頻度の高いメッセージング機能を提供する web アプリケーションを作成する方法を示します。This tutorial shows how to create a web application that uses ASP.NET SignalR 2 to provide high-frequency messaging functionality. この場合は、「頻度の高いメッセージング」は、サーバーは、固定の率での更新を送信します。In this case, "high-frequency messaging" means the server sends updates at a fixed rate. 1 秒間に最大 10 個のメッセージを送信するとします。You send up to 10 messages a second.

アプリケーションを作成するには、ユーザーがドラッグできるシェイプが表示されます。The application you create displays a shape that users can drag. サーバーは、時間指定の更新プログラムを使用して、ドラッグした図形の位置に一致するように接続されているすべてのブラウザーでの図形の位置を更新します。The server updates the position of the shape in all connected browsers 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.

このチュートリアルでは、次の作業を行いました。In this tutorial, you:

  • プロジェクトを設定します。Set up the project
  • ベースのアプリケーションを作成します。Create the base application
  • アプリの開始時に、ハブにマップします。Map to the hub when app starts
  • クライアントを追加します。Add the client
  • アプリを実行するRun the app
  • クライアントのループを追加します。Add the client loop
  • サーバー ループを追加します。Add the server loop
  • 滑らかなアニメーションを追加します。Add smooth animation

Warning

このドキュメントは SignalR の最新バージョンはありません。This documentation isn't for the latest version of SignalR. 見てASP.NET Core SignalRします。Take a look at ASP.NET Core SignalR.

必須コンポーネントPrerequisites

プロジェクトを設定します。Set up the project

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

このセクションでは、Visual Studio 2017 を使用して、空の ASP.NET Web アプリケーションを作成し、SignalR と jQuery.UI ライブラリを追加する方法を示します。This section shows how to use Visual Studio 2017 to create an empty ASP.NET Web Application and add the SignalR and jQuery.UI libraries.

  1. Visual Studio で ASP.NET Web アプリケーションを作成します。In Visual Studio, create an ASP.NET Web Application.

    Web を作成します。

  2. 新しい ASP.NET Web アプリケーション - MoveShapeDemo ウィンドウのままにを選択し、選択OKIn the New ASP.NET Web Application - MoveShapeDemo window, leave Empty selected and select OK.

  3. ソリューション エクスプ ローラープロジェクトを右クリックし、選択、追加 > 新しい項目のします。In Solution Explorer, right-click the project and select Add > New Item.

  4. 新しい項目の追加 - MoveShapeDemoインストール済み > Visual C# > Web > SignalR選びSignalR ハブ クラス (v2) します。In Add New Item - MoveShapeDemo, select Installed > Visual C# > Web > SignalR and then select SignalR Hub Class (v2).

  5. クラスの名前MoveShapeHubし、プロジェクトに追加します。Name the class MoveShapeHub and add it to the project.

    この手順で作成、 MoveShapeHub.csクラス ファイル。This step creates the MoveShapeHub.cs class file. 同時に、一連のスクリプト ファイルとプロジェクトに SignalR をサポートするアセンブリ参照を追加します。Simultaneously, it adds a set of script files and assembly references that support SignalR to the project.

  6. 選択ツール > NuGet パッケージ マネージャー > パッケージ マネージャー コンソールします。Select Tools > NuGet Package Manager > Package Manager Console.

  7. パッケージ マネージャー コンソール、このコマンドを実行します。In Package Manager Console, run this command:

    Install-Package jQuery.UI.Combined
    

    コマンドは、jQuery UI ライブラリをインストールします。The command installs the jQuery UI library. これを使用して、図形をアニメーション化します。You use it to animate the shape.

  8. ソリューション エクスプ ローラースクリプトを展開します。In Solution Explorer, expand the Scripts node.

    スクリプト ライブラリの参照

    JQuery や jQueryUI、SignalR のスクリプト ライブラリは、プロジェクトに表示されます。Script libraries for jQuery, jQueryUI, and SignalR are visible in the project.

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

このセクションでは、ブラウザー アプリケーションを作成します。In this section, you create a browser application. アプリは、各マウス移動イベント中に、図形の場所をサーバーに送信します。The app sends the location of the shape to the server during each mouse move event. サーバーは、リアルタイムで接続されているその他のすべてのクライアントにこの情報をブロードキャストします。The server broadcasts this information to all other connected clients in real time. 以降のセクションでは、このアプリケーションの詳細について説明します。You learn more about this application in later sections.

  1. 開く、 MoveShapeHub.csファイル。Open the MoveShapeHub.cs file.

  2. コードに置き換えます、 MoveShapeHub.csこのコード ファイル。Replace the code in the MoveShapeHub.cs file with this code:

    using Microsoft.AspNet.SignalR;
    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; }
        }
    }
    
  3. ファイルを保存します。Save the file.

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

アプリの送信、ShapeModelクライアント オブジェクトです。The app sends the ShapeModel object to the client. 図形の位置を格納するメンバーが存在します。It has members to store the position of the shape. サーバー上のオブジェクトのバージョンには、どのクライアントのデータが格納されるを追跡するにはメンバーもあります。The version of the object on the server also has a member to track which client's data is being stored. このオブジェクトは、サーバーがそれ自体へのクライアントのデータを送信することを防ぎます。This object prevents the server from sending a client's data back to itself. このメンバーを使用して、JsonIgnoreからデータをシリアル化して、それをクライアントに送信するアプリケーションを保持する属性。This member uses the JsonIgnore attribute to keep the application from serializing the data and sending it back to the client.

アプリの開始時に、ハブにマップします。Map to the hub when app starts

次に、設定、ハブへのマッピングをアプリケーションの起動時にします。Next, you set up mapping to the hub when the application starts. SignalR 2 で OWIN startup クラスを追加するマッピングを作成します。In SignalR 2, adding an OWIN startup class creates the mapping.

  1. ソリューション エクスプ ローラープロジェクトを右クリックし、選択、追加 > 新しい項目のします。In Solution Explorer, right-click the project and select Add > New Item.

  2. 新しい項目の追加 - MoveShapeDemo選択インストール済み > Visual C# > Webし選択OWIN Startup クラスします。In Add New Item - MoveShapeDemo select Installed > Visual C# > Web and then select OWIN Startup Class.

  3. クラスの名前スタートアップ選択とOKします。Name the class Startup and select OK.

  4. 既定のコードを置き換える、 Startup.csこのコード ファイル。Replace the default code in the Startup.cs file with this code:

    using Microsoft.Owin;
    using Owin;
    
    [assembly: OwinStartup(typeof(MoveShapeDemo.Startup))]
    namespace MoveShapeDemo
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                // Any connection or hub wire up and configuration should go here
                app.MapSignalR();
            }
        }
    }
    

OWIN スタートアップ クラスの呼び出しMapSignalR、アプリが実行される場合、Configurationメソッド。The OWIN startup class calls MapSignalR when the app executes the Configuration method. OWIN のスタートアップにクラス処理を使用してアプリを追加、OwinStartupアセンブリ属性。The app adds the class to OWIN's startup process using the OwinStartup assembly attribute.

クライアントを追加します。Add the client

クライアントの HTML ページを追加します。Add the HTML page for the client.

  1. ソリューション エクスプ ローラープロジェクトを右クリックし、選択、追加 > HTML ページします。In Solution Explorer, right-click the project and select Add > HTML Page.

  2. ページの名前を付けます既定選択 [ok]Name the page Default and select OK.

  3. ソリューション エクスプ ローラー、右クリックDefault.html選択とスタート ページとして設定します。In Solution Explorer, right-click Default.html and select Set as Start Page.

  4. 既定のコードを置き換える、 Default.htmlこのコード ファイル。Replace the default code in the Default.html file with this code:

    <!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.10.2.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.1.0.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>
    
  5. ソリューション エクスプ ローラー、展開スクリプトします。In Solution Explorer, expand Scripts.

    JQuery と SignalR 用のスクリプト ライブラリは、プロジェクトに表示されます。Script libraries for jQuery and SignalR are visible in the project.

    Important

    パッケージ マネージャーは、以降のバージョンの SignalR スクリプトをインストールします。The package manager installs a later version of the SignalR scripts.

  6. プロジェクト内のスクリプト ファイルのバージョンに対応するコード ブロック内のスクリプト参照を更新します。Update the script references in the code block to correspond to the versions of the script files in the project.

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

アプリを実行するRun the app

アプリを実行する se'e に作動します。You can run the app to se`e it work. ブラウザー ウィンドウを囲む、図形をドラッグすると、図形にも、他のブラウザーで移動します。When you drag the shape around a browser window, the shape moves in the other browsers too.

  1. ツールバーで、有効にするスクリプトのデバッグし、アプリケーションをデバッグ モードで実行する [再生] ボタンを選択します。In the toolbar, turn on Script Debugging and then select the play button to run the application in Debug mode.

    ユーザー モードをデバッグし、[再生] を選択のスクリーン ショット。

    右上隅の赤色の図形と、ブラウザー ウィンドウが開きます。A browser window opens with the red shape in the upper-right corner.

  2. ページの URL をコピーします。Copy the page's URL.

  3. 別のブラウザーを開き、アドレス バーに URL を貼り付けます。Open another browser and paste the URL into the address bar.

  4. ブラウザー ウィンドウのいずれかで、図形をドラッグします。Drag the shape in one of the browser windows. 別のブラウザー ウィンドウ内の図形に従います。The shape in the other browser window follows.

アプリケーションの中にこのメソッドを使用して関数は推奨されるプログラミング モデル。While the application functions using this method, it's not a recommended programming model. メッセージの送信先の数に上限はありません。There's no upper limit to the number of messages getting sent. その結果、クライアントとサーバー メッセージを使用した負荷がかかって取得おり、パフォーマンスが低下します。As a result, the clients and server get overwhelmed with messages and performance degrades. また、アプリでは、クライアントの不整合なアニメーションを表示します。Also, the app displays a disjointed animation on the client. このぎくしゃくしたアニメーションは、各メソッドによって、図形が瞬時に移動するために発生します。This jerky animation happens because the shape moves instantly by each method. 図形は、それぞれの新しい場所にスムーズに移動しますを用意することをお勧めします。It's better if the shape moves smoothly to each new location. 次に、こうした問題を修正する方法について説明します。Next, you learn how to fix those issues.

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

すべてのマウス移動イベントに図形の位置を送信するには、ネットワーク トラフィック量が不要なが作成されます。Sending the location of the shape on every mouse move event creates an unnecessary amount of network traffic. アプリは、クライアントからメッセージを抑制する必要があります。The app needs to throttle the messages from the client.

Javascript を使用して、setInterval固定の率でサーバーに新しい位置情報を送信するループを設定する関数。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 basic representation of a "game loop." ゲームのすべての機能を駆動する繰り返し呼び出された関数になります。It's a repeatedly called function that drives all the functionality of a game.

  1. クライアント コードに置き換えます、 Default.htmlこのコード ファイル。Replace the client code in the Default.html file with this code:

    <!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.10.2.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.1.0.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>
    

    Important

    もう一度スクリプト参照を交換する必要があります。You have to replace the script references again. これらは、プロジェクト内のスクリプトのバージョンと一致する必要があります。They must match the versions of the scripts in the project.

    この新しいコードを追加、updateServerModel関数。This new code adds the updateServerModel function. 固定の頻度にこれが呼び出されます。It gets called on a fixed frequency. 関数は、位置データをサーバーに送信するたびに、movedフラグは、送信する新しい位置データがあることを示します。The function sends the position data to the server whenever the moved flag indicates that there's new position data to send.

  2. アプリケーションを起動する再生ボタンを選択します。Select the play button to start the application

  3. ページの URL をコピーします。Copy the page's URL.

  4. 別のブラウザーを開き、アドレス バーに URL を貼り付けます。Open another browser and paste the URL into the address bar.

  5. ブラウザー ウィンドウのいずれかで、図形をドラッグします。Drag the shape in one of the browser windows. 別のブラウザー ウィンドウ内の図形に従います。The shape in the other browser window follows.

アプリは、アニメーションをスムーズに表示されません、サーバーに送信するメッセージの数を調整するため最初でした。Since the app throttles the number of messages that get sent to the server, the animation won't appear as smooth did at first.

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

現在のアプリケーションで、サーバーからクライアントに送信されるメッセージは受信しているときに多くの場合、移動します。In the current application, messages sent from the server to the client go out as often as they're received. このネットワーク トラフィックは、クライアントでわかるとおり、同様の問題を表示します。This network traffic presents a similar problem as we see on the client.

アプリでは、必要なときよりもより多くの場合、メッセージを送信できます。The app can send messages more often than they're needed. 接続は、その結果大量に送られたなります。The connection can become flooded as a result. このセクションでは、送信メッセージのレートを調整するタイマーを追加するサーバーを更新する方法について説明します。This section describes how to update the server to add a timer that throttles the rate of the outgoing messages.

  1. 内容を置き換えるMoveShapeHub.cs次のコードで。Replace the contents of MoveShapeHub.cs with this code:

    using System;
    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; }
        }
        
    }
    
  2. アプリケーションを起動する再生ボタンを選択します。Select the play button to start the application.

  3. ページの URL をコピーします。Copy the page's URL.

  4. 別のブラウザーを開き、アドレス バーに URL を貼り付けます。Open another browser and paste the URL into the address bar.

  5. ブラウザー ウィンドウのいずれかで、図形をドラッグします。Drag the shape in one of the browser windows.

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

については、ハブ自体が一時的なものであることをお勧めします。It's good to learn that the hub itself is transitory. これが必要になるたびに作成されます。It's created every time it's needed. したがって、アプリを作成し、Broadcasterをシングルトンとして。So the app creates the Broadcaster as a singleton. 遅延初期化を遅延を使用して、Broadcasterの作成が必要になるまでです。It uses lazy initialization to defer the Broadcaster's creation until it's needed. 確実にタイマーを開始する前にこと、アプリが最初のハブ インスタンスを完全に作成します。That guarantees that the app creates the first hub instance completely before starting the timer.

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

ハブから直接、クライアント メソッドを呼び出すことではなく、最後に、Broadcasterクラスは、現在オペレーティング システムへの参照を取得する必要がある_hubContextハブ。Lastly, instead of calling the client method from the hub directly, the Broadcaster class needs to get a reference to the currently operating _hubContext hub. 参照を取得、GlobalHostします。It gets the reference with the GlobalHost.

滑らかなアニメーションを追加します。Add smooth animation

アプリケーションが終了間近には、1 つ以上の向上することもできます。The application is almost finished, but we could make one more improvement. アプリは、クライアント上のサーバー メッセージに応答して、図形を移動します。The app moves the shape on the client in response to server messages. サーバーで指定された新しい場所に図形の位置を設定する代わりに、JQuery UI ライブラリを使用して、animate関数。Instead of setting the position of the shape to the new location given by the server, use the JQuery UI library's animate function. 現在および新しい位置の間に滑らかに図形を移動できます。It can move the shape smoothly between its current and new position.

  1. クライアントの更新updateShapeメソッドで、 Default.htmlファイルを強調表示されたコードのようになります。Update the client's updateShape method in the Default.html file to look like the highlighted code:

    <!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.10.2.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.1.0.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>
    
  2. アプリケーションを起動する再生ボタンを選択します。Select the play button to start the application.

  3. ページの URL をコピーします。Copy the page's URL.

  4. 別のブラウザーを開き、アドレス バーに URL を貼り付けます。Open another browser and paste the URL into the address bar.

  5. ブラウザー ウィンドウのいずれかで、図形をドラッグします。Drag the shape in one of the browser windows.

他のウィンドウで、図形の移動が小さい画像が表示されます。The movement of the shape in the other window appears less jerky. アプリでは、受信メッセージごとに 1 回設定されているのではなく、時間経由でその動きを補間します。The app interpolates its movement over time rather than being set once per incoming message.

このコードは、元の場所を新しい図形を移動します。This code moves the shape from the old location to the new one. サーバーは、アニメーションの間隔の過程で、図形の位置を示します。The server gives the position of the shape over the course of the animation interval. この場合、100 ミリ秒です。In this case, that's 100 milliseconds. アプリでは、新しいアニメーションが開始される前に、図形の実行の前のアニメーションをクリアします。The app clears any previous animation running on the shape before the new animation starts.

コードを取得するGet the code

完成したプロジェクトのダウンロードDownload Completed Project

その他の技術情報Additional resources

学習した通信パラダイムはこのようなオンライン ゲームとその他のシミュレーションを開発するために便利ですSignalR を使って作成された ShootR ゲームします。The communication paradigm you just learned about is useful for developing online games and other simulations, like the ShootR game created with SignalR.

詳細については、SignalR は、次のリソースを参照してください。For more about SignalR, see the following resources:

次の手順Next steps

このチュートリアルでは、次の作業を行いました。In this tutorial, you:

  • プロジェクトを設定します。Set up the project
  • ベースのアプリケーションの作成Created the base application
  • アプリの起動時に、ハブにマップMapped to the hub when app starts
  • クライアントの追加Added the client
  • アプリの実行Ran the app
  • クライアントのループの追加Added the client loop
  • サーバー ループの追加Added the server loop
  • 滑らかなアニメーションを追加しましたAdded smooth animation

ASP.NET SignalR 2 を使用してサーバー ブロードキャストの機能を提供する web アプリケーションを作成する方法については、次の記事に進んでください。Advance to the next article to learn how to create a web application that uses ASP.NET SignalR 2 to provide server broadcast functionality.