リアルタイムのサービス監視パネルを構築します！
サービス監視パネルには、リアルタイムで実際のデータが表示されます。これは、ほぼリアルタイムで非同期の非ブロッキング方法でサーバーとマイクロサービスで何が起こっているかを示します。
ここをクリックして、完全なクライアントの例を表示します。
d3.jsを使用してデータを視覚化し、JavaScriptでデータを説明してください！ 
このコースを見るこのコースは、ここでサーバーのデモンストレーションを紹介します。
AngularJSフレームワークと多くのクールなリアルタイムチャートと多くのリアルタイムデータを使用して、この監視パネルの簡略化されたバージョンを構築します。また、.NET 4.5のSignalRおよびWeb APIライブラリを使用してサービスを構築します。
Angularはここに.NETを追加し、サーバー側のコードをコンパクトで管理しやすく、テスト可能に保つことができます。サーバー側のコードは、その利点を活用するためにのみ使用されます - 重い処理を実行します。
サーバー側
コアコンテンツ
設定を開始
プロジェクトを作成するツールに応じて、お気に入りのテキストエディターとプレーンフォルダー、およびVisual Studioを使用して作成する方法について説明します。
プレーンテキストファイルを使用してフォルダーとファイル構造は次のとおりです
<code>root
app (Angular应用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>jQuery（リンクを選択します「圧縮生産をダウンロードjQuery 2.1.1」）
jQuery-2.1.1.min.js
bootstrap.min.css
その後、プロジェクトを右クリックして、Nugetパッケージの管理に移動し、jQuery、Angularjs、Bootstrap、D3、Signalr JavaScriptクライアントを検索してダウンロードします。
これらをダウンロードしてインストールした後、スクリプトとコンテンツフォルダーに表示されるはずです。また、インストールされているNugetパッケージの下で、次のことがわかります。
アプリケーションを書きましょう
今、いくつかのコードを書く準備ができました。
注意すべきことがいくつかあります。まず、すべての依存関係を追加して、それらがロードされるようにしました。次に、まだ存在しない新しいファイル（アプリフォルダー内のすべてのファイル）を参照します。これらのファイルを次に書きます。
アプリフォルダーに移動して、app.jsファイルを作成しましょう。これは非常に単純なファイルです。
<!DOCTYPE html> <html> <head> <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" /> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> </head> <body ng-app="angularServiceDashboard"> </body> </html>
<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ファイルになります。これはアプリフォルダーに送られます。
<!DOCTYPE html> <html> <head> <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" /> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> </head> <body ng-app="angularServiceDashboard"> </body> </html>
このコードは一見すると少し圧倒されるかもしれませんが、コントローラーを構築するときにそれをよりよく理解することができます。それが行うのは、バックエンドSignalRサーバーのURLおよびSignalRセンター名を取得することだけです。 （SignalRでは、同じサーバー内の複数のハブを使用してデータをプッシュできます。）
さらに、このコードにより、SignalRサーバー（他の場所にあるボックスにある）がONメソッドを介してアプリケーションを呼び出すことができます。アプリケーションは、Invokeメソッドを介してSignalRサーバー内の関数を呼び出すことができます。
次に、サービスからデータを範囲にバインドするコントローラーが必要です。アプリフォルダーにcontrollers.jsという名前のファイルを作成しましょう。
このコントローラーはここで何かをします。 Angular Serviceオブジェクトを作成し、サーバーがコントローラーに何かを呼び出すようにコールバック関数にバインドします。
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');サーバーが私たちを呼び戻すたびに、サーバーによって返されるJSONアレイを反復することがわかります。次に、パフォーマンスタイプごとにスイッチステートメントがあります。次に、RAMを設定してから、戻って残りを埋めます。
私たちの指示に関しては、実際に私たちには1つのエポックチャートが必要です。 index.htmlスタブファイルで参照したNg-Epoch.jsというオープンソースディレクティブを使用します。
これらすべてのチャートをさまざまな手順に分割し、いくつかのテンプレートを使用してUIルーターを使用できますが、このチュートリアルを簡単にするために、すべてのビューをindex.htmlファイルに配置します。
index.htmlファイルにビューを追加しましょう。ボディタグの下に次のコンテンツを追加することでこれを行うことができます。
これにより、サーバーがRAMデータを押し戻すことができる場所が作成されます。データは最初にサービスを入力し、次にコントローラーを入力し、最後にビューを入力します。
'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;
}]);
次に、いくつかのチャートを追加しましょう。これはまさに私たちが本当にやりたいことです。 Epoch.jsタイムラインにタイムスタンプという名前の変数を追加します。また、Chartentryというアレイを追加します。これをEpoch.ngディレクティブにバインドします。
<code>root
app (Angular应用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>次に、Switchステートメントにデータをマップし、残りの必要なEpoch.jsデータ項目を追加しましょう。もちろん、それをさらに分割することができます（たとえば、より多くの機能やフィルターを使用して）が、このチュートリアルを簡単にするために、シンプルに保ちます。
<!DOCTYPE html> <html> <head> <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" /> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> </head> <body ng-app="angularServiceDashboard"> </body> </html>
私たちのコントローラーはより完全に見えます。範囲にRealtimeareafeeedを追加しました。これは、NG-Epochの指令を通じてビューにバインドし、範囲にエリアアックスを追加して、エリアグラフのレイアウトを決定しました。
次に、index.htmlにディレクティブを追加し、着信CPU値データを表示しましょう。
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');それを使用して、チャートがリアルタイムで表示されるのを見る必要があります：
ここで、多数のデータポイントをこのチャートに接続し、N3-PIEフレームワークから別のチャートを追加しましょう（パイチャートが気に入らないため！）。 
N3-PIEフレームワークからパイチャートを追加するには、コントローラーに次のことを追加するだけです。
もちろん、この値はSignalRサーバーによって更新されます。これは、コントローラーの完全なコードで確認できます。
'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;
}]);画面に次のデータが表示されるはずです。 AngularがSignalRに非常に簡単に接続できることがわかりました。AngularJSサービスまたは工場にエンドポイントを挿入するだけです。 Angularjs Factoryは、SignalRと通信するカプセル化メカニズムです。 「結合」後、AngularJと.NETが完全に一緒に機能することを誰が知っていますか？
サーバーのコアアスペクト
バックエンドでのこの通信を許可する.NETコードを導入します。 （こちらからソースコードを見つけることができます。）
実行後、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（）またはスタートアップクラスのどこかでバックグラウンドスレッドを開始することです。
<!DOCTYPE html> <html> <head> <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" /> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> </head> <body ng-app="angularServiceDashboard"> </body> </html>
バックグラウンドスレッドを開始するコードの2行（推測したように）は、PerformanceEngineをインスタンス化し、Onperformancemonitor（）を呼び出します。
今、私はあなたが私がサーバーからデータをランダム化していると思うかもしれないことを知っています。それが事実です。ただし、実際のメトリックをプッシュするには、System.DiagnosticsライブラリとWindowsが提供するPerformanceCounterを使用してください。私はそれをシンプルにしようとしていますが、これはコードがどのように見えるかです：
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');Angularを介してSignalRデータを使用する方法を学び、そのデータをAngular側のリアルタイムチャートフレームワークに接続しました。
クライアントの最終バージョンのデモがここに表示され、そこからコードを取得できます。
サーバーの最終バージョンのデモがここに表示され、ここからコードを取得できます。
このウォークスルーを楽しんでいただければ幸いです。似たようなことを試したことがあるなら、コメントでお知らせください！
SignalRの接続エラーを処理する方法は？
はい、SignalRは、AjaxとWebSocketsをサポートするJavaScriptフレームワークで使用できます。これには、React、Vue.js、Angularなどの一般的なフレームワークが含まれます。 ProjectにSignalR JavaScriptライブラリを含めて、他のJavaScriptアプリケーションと同じように中心的な接続を作成する必要があります。
私の信号アプリケーションを保護する方法は？
SignalRの切断に対処する方法は？
non.netサーバーでSignalRを使用できますか？
私のsignalRアプリケーションをテストする方法は？
モバイルアプリでSignalRを使用できますか？
私のsignalアプリケーションを拡張する方法は？
以上がAngularJSを使用してリアルタイムSignalRダッシュボードを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
