ホームページ >ウェブフロントエンド >jsチュートリアル >AngularJSを使用してリアルタイムSignalRダッシュボードを構築します

AngularJSを使用してリアルタイムSignalRダッシュボードを構築します

William Shakespeareオリジナル: 2025-02-20 12:45:11821ブラウズ

リアルタイムのサービス監視パネルを構築します！

Build a Real-time SignalR Dashboard with AngularJS サービス監視パネルには、リアルタイムで実際のデータが表示されます。これは、ほぼリアルタイムで非同期の非ブロッキング方法でサーバーとマイクロサービスで何が起こっているかを示します。

ここをクリックして、完全なクライアントの例を表示します。

d3.jsを使用してデータを視覚化し、JavaScriptでデータを説明してください！このコースを見るこのコースは、ここでサーバーのデモンストレーションを紹介します。

AngularJSフレームワークと多くのクールなリアルタイムチャートと多くのリアルタイムデータを使用して、この監視パネルの簡略化されたバージョンを構築します。また、.NET 4.5のSignalRおよびWeb APIライブラリを使用してサービスを構築します。

キーポイント

AngularJSとSignalRを使用して、サーバーとマイクロサービスアクティビティを非同期および非ブロッキングを表示するリアルタイム監視パネルを作成します。
AngularJS、JQuery、Bootstrap、SignalR、D3.JSやEpochなどのさまざまなチャートライブラリを含む依存関係を備えたプレーンテキストファイルまたはVisual Studioでプロジェクトを設定します。
リアルタイムのデータ送信を管理するためのサーバー側にSignalrセンターを実装し、非同期要求を処理する.NETの機能を活用し、クライアントに通知をプッシュする能力。
AngularJSサービスとコントローラーを開発して、SignalRセンターから受信したデータを処理し、サーバーパフォーマンスメトリックの変更を反映するためにUIをリアルタイムで更新します。

技術アーキテクチャ

クライアント

Angularjsは、適切なアプリケーション開発慣行を箱から出して実施します。すべてが注入されます。つまり、依存関係はカップリングが低いことを意味します。さらに、Angularには、ビュー、モデル、コントローラーの間に良好な分離があります。

Angularはここに.NETを追加し、サーバー側のコードをコンパクトで管理しやすく、テスト可能に保つことができます。サーバー側のコードは、その利点を活用するためにのみ使用されます - 重い処理を実行します。

サーバー側

.NET 4.5のWeb APIでSignalRを使用することは、socket.ioを使用してnode.jsを使用することに非常に似ており、サーバーからサブスクリプションクライアントへの同じタイプの非ブロッキング、非同期プッシュを許可します。 Signalrは下部にWebSocketsを使用しますが、通信を抽象化するため、Angular内で実行すると、クライアントブラウザーがサポートするテクノロジーに戻ります。（たとえば、古いブラウザーの場合、それは長い投票に戻る可能性があります。）

さらに、ダイナミックタグとjson.netの魔法により、.NETフレームワークはJavaScriptを一流の市民と見なしています。実際、JavaScriptを使用してWeb APIとSignalRテクノロジーを使用することは、JavaScriptを念頭に置いて構築されているため、ネイティブの.NETクライアントよりも簡単です。

コアコンテンツ

設定を開始

このチュートリアルで使用されているすべてのAngularJSコードは、こちらをご覧ください。

プロジェクトを作成するツールに応じて、お気に入りのテキストエディターとプレーンフォルダー、およびVisual Studioを使用して作成する方法について説明します。

プレーンテキストファイルを使用して

設定

フォルダーとファイル構造は次のとおりです

<code>root
    app     (Angular应用程序特定的JavaScript)
    Content (CSS等)
    Scripts (引用的JavaScript等)
    ...
    index.html</code>

主な依存関係

次のファイルをダウンロードする必要があります

jQuery（リンクを選択します「圧縮生産をダウンロードjQuery 2.1.1」）

AngularJS（大きな「ダウンロード」オプションをクリックして、Angular 1.3の最新バージョンをクリックします）
bootstrap（「bootstrapをダウンロード」オプションをクリックしてください）
signalr（右側の「zipをダウンロード」ボタンをクリックしてください）
d3.js（ページの中央にある「d3.zip」リンクをクリックしてください）
エポック（「v0.6.0 linkをダウンロード」をクリックしてください）
ng-epoch（右側の「zipをダウンロード」ボタンをクリックしてください）
n3-pie（右側の「zipをダウンロード」ボタンをクリックしてください）

が必要です

jQuery-2.1.1.min.js

angular.min.js
bootstrap.min.js
jquery.signalr.min.js
d3.min.js
epoch.min.js
pie-chart.min.js
コンテンツフォルダー：

bootstrap.min.css

設定

テキストファイルが単純すぎると思われる場合は、Visual Studioを介してセットアップするのは非常に簡単です。

ファイルに移動して、新しいWebアプリケーションを設定してください。

その後、プロジェクトを右クリックして、Nugetパッケージの管理に移動し、jQuery、Angularjs、Bootstrap、D3、Signalr JavaScriptクライアントを検索してダウンロードします。

これらをダウンロードしてインストールした後、スクリプトとコンテンツフォルダーに表示されるはずです。また、インストールされているNugetパッケージの下で、次のことがわかります。 Build a Real-time SignalR Dashboard with AngularJS

最後に、Nugetにはエポック、Ng-Epoch、およびN3チャートライブラリが含まれていないため、手動で追加する必要があります。前のセクションで詳述されている手順に従って、これらのライブラリを取得してください。

アプリケーションを書きましょう

Build a Real-time SignalR Dashboard with AngularJS 今、いくつかのコードを書く準備ができました。

最初に、Angular JavaScriptコードを保持するBasic Index.htmlファイルを作成しましょう。

注意すべきことがいくつかあります。まず、すべての依存関係を追加して、それらがロードされるようにしました。次に、まだ存在しない新しいファイル（アプリフォルダー内のすべてのファイル）を参照します。これらのファイルを次に書きます。

アプリフォルダーに移動して、app.jsファイルを作成しましょう。これは非常に単純なファイルです。

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS - SignalR - ServiceDashboard</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css">
  <link rel="stylesheet" href="Content/epoch.min.css">

  
  
  
  

  
  
  
  

  
  
  
  





</code>

<code>root
    app     (Angular应用程序特定的JavaScript)
    Content (CSS等)
    Scripts (引用的JavaScript等)
    ...
    index.html</code>

このファイルは私たちのためにいくつかのことをします。メインアプリケーションモジュールAngularServicedAshboardをセットアップし、2つの外部参照（Ng.Epoch（Epoch.js Angular Directive）とN3-Pie-Chart（Angular Good Chart Library用に作成された構造）を注入します。

気づいた場合は、もちろん他の場所でホストされているバックエンデルバルルに値を注入し、ここで使用する予定です。

サーバーのURLにバインドするサービスファクトリクラスを作成しましょう。これは、htmlで参照されるservices.jsファイルになります。これはアプリフォルダーに送られます。

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS - SignalR - ServiceDashboard</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css">
  <link rel="stylesheet" href="Content/epoch.min.css">

  
  
  
  

  
  
  
  

  
  
  
  





</code>

このコードは、人気のあるオンとオフ（ここでは必要ありません）サブスクリプションモードを使用し、Angular Factoryを使用してアプリケーションのSignalRとのすべての通信をカプセル化します。

このコードは一見すると少し圧倒されるかもしれませんが、コントローラーを構築するときにそれをよりよく理解することができます。それが行うのは、バックエンドSignalRサーバーのURLおよびSignalRセンター名を取得することだけです。（SignalRでは、同じサーバー内の複数のハブを使用してデータをプッシュできます。）

さらに、このコードにより、SignalRサーバー（他の場所にあるボックスにある）がONメソッドを介してアプリケーションを呼び出すことができます。アプリケーションは、Invokeメソッドを介してSignalRサーバー内の関数を呼び出すことができます。

次に、サービスからデータを範囲にバインドするコントローラーが必要です。アプリフォルダーにcontrollers.jsという名前のファイルを作成しましょう。

このコントローラーはここで何かをします。 Angular Serviceオブジェクトを作成し、サーバーがコントローラーに何かを呼び出すようにコールバック関数にバインドします。

<code class="language-javascript">'use strict';

var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</code>

サーバーが私たちを呼び戻すたびに、サーバーによって返されるJSONアレイを反復することがわかります。次に、パフォーマンスタイプごとにスイッチステートメントがあります。次に、RAMを設定してから、戻って残りを埋めます。

私たちの指示に関しては、実際に私たちには1つのエポックチャートが必要です。 index.htmlスタブファイルで参照したNg-Epoch.jsというオープンソースディレクティブを使用します。

これらすべてのチャートをさまざまな手順に分割し、いくつかのテンプレートを使用してUIルーターを使用できますが、このチュートリアルを簡単にするために、すべてのビューをindex.htmlファイルに配置します。

index.htmlファイルにビューを追加しましょう。ボディタグの下に次のコンテンツを追加することでこれを行うことができます。

これにより、サーバーがRAMデータを押し戻すことができる場所が作成されます。データは最初にサービスを入力し、次にコントローラーを入力し、最後にビューを入力します。

<code class="language-javascript">'use strict';

app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl', 
  function ($rootScope, backendServerUrl) {

    function backendFactory(serverUrl, hubName) {
      var connection = $.hubConnection(backendServerUrl);
      var proxy = connection.createHubProxy(hubName);

      connection.start().done(function () { });

      return {
        on: function (eventName, callback) {
              proxy.on(eventName, function (result) {
                $rootScope.$apply(function () {
                  if (callback) {
                    callback(result);
                  }
                 });
               });
             },
        invoke: function (methodName, callback) {
                  proxy.invoke(methodName)
                  .done(function (result) {
                    $rootScope.$apply(function () {
                      if (callback) {
                        callback(result);
                      }
                    });
                  });
                }
      };
    };

    return backendFactory;
}]);</code>

次のように見えるはずです：

Build a Real-time SignalR Dashboard with AngularJS 次に、いくつかのチャートを追加しましょう。これはまさに私たちが本当にやりたいことです。 Epoch.jsタイムラインにタイムスタンプという名前の変数を追加します。また、Chartentryというアレイを追加します。これをEpoch.ngディレクティブにバインドします。

<code>root
    app     (Angular应用程序特定的JavaScript)
    Content (CSS等)
    Scripts (引用的JavaScript等)
    ...
    index.html</code>

次に、Switchステートメントにデータをマップし、残りの必要なEpoch.jsデータ項目を追加しましょう。もちろん、それをさらに分割することができます（たとえば、より多くの機能やフィルターを使用して）が、このチュートリアルを簡単にするために、シンプルに保ちます。

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS - SignalR - ServiceDashboard</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css">
  <link rel="stylesheet" href="Content/epoch.min.css">

  
  
  
  

  
  
  
  

  
  
  
  





</code>

私たちのコントローラーはより完全に見えます。範囲にRealtimeareafeeedを追加しました。これは、NG-Epochの指令を通じてビューにバインドし、範囲にエリアアックスを追加して、エリアグラフのレイアウトを決定しました。

次に、index.htmlにディレクティブを追加し、着信CPU値データを表示しましょう。

<code class="language-javascript">'use strict';

var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</code>

チャートクラスとは、D3.jsの配色を指し、チャートハイトはあなたが推測したものであり、チャートストリームはSignalRサーバーから返されたデータです。

それを使用して、チャートがリアルタイムで表示されるのを見る必要があります：

ここで、多数のデータポイントをこのチャートに接続し、N3-PIEフレームワークから別のチャートを追加しましょう（パイチャートが気に入らないため！）。 Build a Real-time SignalR Dashboard with AngularJS N3-PIEフレームワークからパイチャートを追加するには、コントローラーに次のことを追加するだけです。

もちろん、この値はSignalRサーバーによって更新されます。これは、コントローラーの完全なコードで確認できます。

<code class="language-javascript">'use strict';

app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl', 
  function ($rootScope, backendServerUrl) {

    function backendFactory(serverUrl, hubName) {
      var connection = $.hubConnection(backendServerUrl);
      var proxy = connection.createHubProxy(hubName);

      connection.start().done(function () { });

      return {
        on: function (eventName, callback) {
              proxy.on(eventName, function (result) {
                $rootScope.$apply(function () {
                  if (callback) {
                    callback(result);
                  }
                 });
               });
             },
        invoke: function (methodName, callback) {
                  proxy.invoke(methodName)
                  .done(function (result) {
                    $rootScope.$apply(function () {
                      if (callback) {
                        callback(result);
                      }
                    });
                  });
                }
      };
    };

    return backendFactory;
}]);</code>

また、私たちの見解の完全なコードについて考える時間をとるべきです。

画面に次のデータが表示されるはずです。

AngularがSignalRに非常に簡単に接続できることがわかりました。AngularJSサービスまたは工場にエンドポイントを挿入するだけです。 Angularjs Factoryは、SignalRと通信するカプセル化メカニズムです。「結合」後、AngularJと.NETが完全に一緒に機能することを誰が知っていますか？

サーバーのコアアスペクト

Build a Real-time SignalR Dashboard with AngularJS バックエンドでのこの通信を許可する.NETコードを導入します。（こちらからソースコードを見つけることができます。）

最初に、サーバーコードの構築を開始するには、Visual StudioソリューションでSignalRを実行する必要があります。これを行うには、ASP.NETの優れたチュートリアルに従って、基本的なSignalRソリューションを実行してください。（これが最も簡単です。）

実行後、C＃HUBクラスを次のように変更します。

ハブクラスを変更した後、Visual Studioはエラーを報告します。パフォーマンスモデルを追加する必要があります（json.netのため、サーバーがプッシュされたときに自動的にjsonに変換されます）：

<code>root
    app     (Angular应用程序特定的JavaScript)
    Content (CSS等)
    Scripts (引用的JavaScript等)
    ...
    index.html</code>

JSonProperty Metadataは、このモデルのJSONに変換するときに、Json.netにプロパティ名を小文字に自動的に変換するように指示するだけです。 JavaScriptは小文字が好きです。

signrrを介して実際のパフォーマンスデータをリスニングクライアントにプッシュするperformanceEngineクラスを追加しましょう。エンジンは、非同期背景スレッドを介してSignalRを介してリスニングクライアントにこれらのメッセージを送信します。

その長さのため、GitHubリポジトリにコードを見つけることができます。

このコードは、基本的に、イテレーション中にそれぞれのサブスクライブされたクライアントに一連のパフォーマンスメトリックをプッシュします。これらのパフォーマンスメトリックは、コンストラクターに注入されます。サーバーからのプッシュ速度は、コンストラクターパラメーターPollintervalMillisに設定されています。

これは、signerをホストするために自己ホスティングとしてOWINを使用する場合にうまく機能することに注意してください。また、Webワーカースレッドを使用する場合はうまく機能するはずです。

最後に行うことは、もちろん、サービスのonstart（）またはスタートアップクラスのどこかでバックグラウンドスレッドを開始することです。

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS - SignalR - ServiceDashboard</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css">
  <link rel="stylesheet" href="Content/epoch.min.css">

  
  
  
  

  
  
  
  

  
  
  
  





</code>

バックグラウンドスレッドを開始するコードの2行（推測したように）は、PerformanceEngineをインスタンス化し、Onperformancemonitor（）を呼び出します。

今、私はあなたが私がサーバーからデータをランダム化していると思うかもしれないことを知っています。それが事実です。ただし、実際のメトリックをプッシュするには、System.DiagnosticsライブラリとWindowsが提供するPerformanceCounterを使用してください。私はそれをシンプルにしようとしていますが、これはコードがどのように見えるかです：

<code class="language-javascript">'use strict';

var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</code>

結論

Angularを介してSignalRデータを使用する方法を学び、そのデータをAngular側のリアルタイムチャートフレームワークに接続しました。

クライアントの最終バージョンのデモがここに表示され、そこからコードを取得できます。

Build a Real-time SignalR Dashboard with AngularJS サーバーの最終バージョンのデモがここに表示され、ここからコードを取得できます。

Build a Real-time SignalR Dashboard with AngularJS このウォークスルーを楽しんでいただければ幸いです。似たようなことを試したことがあるなら、コメントでお知らせください！

AngularJSを使用してリアルタイムSignalR監視パネルを構築するための

FAQ（FAQ）

angularjsにSignalRを設定する方法は？

AngularJSのSignalRのセットアップには、いくつかのステップが含まれます。まず、NUGETまたはNPMを使用してSignalRライブラリをインストールする必要があります。インストール後、サーバーに新しいSignalRセンターを作成できます。このセンターは、メッセージの送信と受信を担当します。クライアントでは、SignalR JavaScriptライブラリを参照し、センターへの接続を作成する必要があります。その後、接続を開始し、着信メッセージを処理する関数を定義できます。

SignalRの接続エラーを処理する方法は？

SignalRは、接続エラーを処理するための組み込みメカニズムを提供します。中央接続で.error（）関数を使用して、エラーが発生したときに呼び出されるコールバック関数を定義できます。このコールバック関数は、ユーザーにエラーメッセージを表示するか、センターに再接続しようとすることができます。

他のJavaScriptフレームワークでSignalRを使用できますか？

はい、SignalRは、AjaxとWebSocketsをサポートするJavaScriptフレームワークで使用できます。これには、React、Vue.js、Angularなどの一般的なフレームワークが含まれます。 ProjectにSignalR JavaScriptライブラリを含めて、他のJavaScriptアプリケーションと同じように中心的な接続を作成する必要があります。

サーバーからクライアントにメッセージを送信するには、センターのクライアントプロパティを使用できます。このプロパティは、すべての接続されたクライアント、特定のクライアント、またはクライアントグループにメッセージを送信する方法を提供します。サーバーコードの任意の部分からこれらのメソッドを呼び出して、クライアントにリアルタイムの更新を送信できます。

私の信号アプリケーションを保護する方法は？

Signalrは、アプリケーションを保護するためのいくつかのオプションを提供します。 [Authorize]プロパティを使用して、センターおよびセンターの方法へのアクセスを制限できます。 Global.asaxファイルでMaphubs（）メソッドを使用して、ハブのカスタムオーサイザーを指定することもできます。さらに、SSLを使用してSignalRトラフィックを暗号化し、盗聴を防ぐことができます。

SignalRの切断に対処する方法は？

SignalRは、切断を自動的に処理し、再接続を試みます。ただし、中央接続の.disconnected（）関数を使用して、手動で切断を処理することもできます。この関数を使用すると、接続が失われたときに呼び出されるコールバック関数を定義できます。

non.netサーバーでSignalRを使用できますか？

SignalRは、.NETサーバーで使用するように設計された.NETライブラリです。ただし、互換性のあるWebSocketライブラリを使用して、SignalRを非.NETサーバーで使用できます。サーバーにSignalRプロトコルを実装し、接続とメッセージングロジックを自分で処理する必要があります。

私のsignalRアプリケーションをテストする方法は？

PostmanやFiddlerなどのツールを使用してSignalRアプリケーションをテストし、HTTPリクエストをセンターに送信して応答を確認できます。また、中央の方法やクライアント機能のユニットテストを作成することもできます。

モバイルアプリでSignalRを使用できますか？

はい、モバイルアプリでSignalRを使用できます。 SignalR JavaScriptライブラリは、CordovaまたはIonicで構築されたハイブリッドモバイルアプリケーションで使用できます。ネイティブモバイルアプリの場合、iOSとAndroidの両方がSIGNRクライアントを提供します。

私のsignalアプリケーションを拡張する方法は？

Signalrは、アプリケーションを拡張するためのいくつかのオプションを提供します。 Azure SignalR Serviceを使用できます。これは、すべてのSignalR接続を処理する完全に管理されたサービスです。また、複数のサーバー間でメッセージを配布するためのソフトウェアレイヤーであるバックエンドを使用することもできます。

以上がAngularJSを使用してリアルタイムSignalRダッシュボードを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Onsen UIでCordovaアプリをさらに進めます次の記事：Onsen UIでCordovaアプリをさらに進めます

続きを見る