Bina panel pemantauan perkhidmatan masa nyata!
Panel pemantauan perkhidmatan kami akan memaparkan data sebenar dalam masa nyata. Ia akan menunjukkan kepada kita apa yang sedang berlaku pada pelayan dan microservices dalam cara yang hampir masa, tidak segerak, tidak menyekat.
Klik di sini untuk melihat contoh klien penuh.
Watch menggunakan D3.js untuk memvisualisasikan data dan menerangkan data anda dalam JavaScript! 
Tonton kursus ini, tonton kursus ini mempamerkan demonstrasi pelayan di sini.
Kami akan menggunakan kerangka AngularJS dan banyak carta masa nyata yang sejuk dan banyak data masa nyata untuk membina versi mudah panel pemantauan ini. Kami juga akan membina perkhidmatan kami menggunakan Perpustakaan API SignalR dan Web .NET 4.5.
AngularJS menguatkuasakan amalan pembangunan aplikasi yang baik dari kotak. Segala -galanya disuntik, yang bermaksud kebergantungan rendah gandingan. Di samping itu, sudut mempunyai pemisahan yang baik antara pandangan, model dan pengawal.
Angular menambah .NET di sini, membolehkan kod sisi pelayan disimpan padat, boleh diurus dan boleh diuji. Kod sisi pelayan hanya digunakan untuk memanfaatkan kelebihannya - untuk menjalankan pemprosesan berat.
Menggunakan SignalR dengan API Web .NET 4.5 sangat serupa dengan menggunakan node.js dengan socket.io dan membolehkan jenis yang tidak menyekat, push asynchronous dari pelayan ke klien langganan. SignalR menggunakan websockets di bahagian bawah, tetapi kerana ia abstrak komunikasi, ketika berjalan di dalam Angular ia jatuh kembali ke mana -mana teknologi yang disokong oleh pelayar klien. (Sebagai contoh, untuk penyemak imbas yang lebih tua, ia mungkin akan kembali ke pengundian panjang.)
Di samping itu, dengan keajaiban tag dinamik dan json.net, rangka kerja .NET menganggap JavaScript sebagai warganegara kelas pertama. Malah, menggunakan API Web dan Teknologi SignalR melalui JavaScript biasanya lebih mudah daripada melalui pelanggan NET Native kerana mereka dibina dengan JavaScript dalam fikiran.
Semua kod AngularJS yang digunakan dalam tutorial ini boleh didapati di sini.
Saya akan merangkumi cara menciptanya menggunakan editor teks kegemaran anda dan folder biasa serta Visual Studio, bergantung kepada alat yang membuat projek.
folder dan struktur fail adalah seperti berikut:
<code>root
app (Angular应用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>anda perlu memuat turun fail berikut:
Dalam folder skrip kami, kami perlukan:
dalam folder kandungan kami:
Jika anda fikir fail teks terlalu mudah, sangat mudah untuk ditubuhkan melalui Visual Studio.
Sediakan aplikasi web kosong dengan pergi ke fail -& gt;
Kemudian klik kanan pada projek itu, pergi ke pakej Urus NuGet, cari dan muat turun jQuery, AngularJS, bootstrap, D3 dan SignalR JavaScript pelanggan.
Selepas memuat turun dan memasang ini, anda harus melihatnya dalam folder skrip dan kandungan. Juga, di bawah pakej NUGET yang dipasang, anda akan melihat perkara berikut:
Akhirnya, NuGet tidak mengandungi perpustakaan carta Epoch, Ng-Epoch, dan N3, jadi anda perlu menambahnya secara manual. Hanya ikuti langkah -langkah yang terperinci di bahagian sebelumnya untuk mendapatkan perpustakaan ini.
mari kita tulis aplikasi kami
Pertama, mari buat fail asas index.html kami, yang akan memegang kod JavaScript sudut kami.
Terdapat beberapa perkara untuk memberi perhatian kepada. Pertama, kami menambah semua kebergantungan supaya mereka memuatkan. Kedua, kami merujuk beberapa fail baru yang belum wujud (semua fail dalam folder aplikasi). Kami akan menulis fail ini seterusnya.
<!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>
Mari pergi ke folder aplikasi kami dan buat fail App.js kami. Ini adalah fail yang sangat mudah.
<code>root
app (Angular应用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>Fail ini melakukan beberapa perkara untuk kami. Ia menubuhkan Modul Permohonan Utama AngularServiceDashboard dan menyuntik dua rujukan luaran-ng.epoch (yang merupakan Arahan Angular Epoch.js kami) dan N3-Pie-Chart (yang merupakan struktur yang dibuat untuk perpustakaan carta sudut sudut).
Jika anda perasan, kami juga menyuntik nilai ke dalam BackendServerUrl, yang tentunya dihoskan di tempat lain, dan kami merancang untuk menggunakannya di sini.
Mari buat kelas kilang perkhidmatan yang akan mengikat ke URL pelayan. Ini akan menjadi fail perkhidmatan.js yang dirujuk dalam HTML kami, yang akan pergi ke folder aplikasi:
<!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>
Kod ini menggunakan mod langganan yang popular di sini) dan merangkumi semua komunikasi dengan isyarat aplikasi kami dengan menggunakan kilang sudut.
Kod ini mungkin kelihatan sedikit menggembirakan pada pandangan pertama, tetapi anda akan memahaminya dengan lebih baik apabila kita membina pengawal. Apa yang dilakukannya ialah mendapatkan URL dan SIGNALR Center Nama pelayan SignalR Backend. (Dalam SignalR, anda boleh menggunakan pelbagai hab di pelayan yang sama untuk menolak data.)
Di samping itu, kod ini membolehkan pelayan SignalR (terletak di beberapa kotak di tempat lain) untuk memanggil aplikasi kami melalui kaedah ON. Ia membolehkan aplikasi kami memanggil fungsi di dalam pelayan SignalR melalui kaedah Invoke.
Seterusnya, kami memerlukan pengawal kami, yang akan mengikat data kami dari perkhidmatan ke skop kami. Mari buat fail bernama Controllers.js dalam folder aplikasi kami.
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');Pengawal ini melakukan sesuatu di sini. Ia mewujudkan objek perkhidmatan sudut kami dan mengikatnya ke fungsi panggil balik supaya pelayan memanggil sesuatu dalam pengawal kami.
anda akan melihat bahawa setiap kali pelayan memanggil kami kembali, kami akan melangkah ke atas array JSON yang dikembalikan oleh pelayan. Kemudian kami mempunyai pernyataan suis untuk setiap jenis prestasi. Sekarang kita akan menetapkan RAM dan kemudian kembali dan mengisi yang lain.
Bagi arahan kami, kami sebenarnya hanya memerlukan satu carta Epoch untuk kami. Kami akan menggunakan arahan sumber terbuka yang dipanggil ng-epoch.js yang telah kami rujuk dalam fail stub index.html kami.
Kami boleh memecah semua carta ini ke dalam arahan yang berbeza, menggunakan beberapa templat dan menggunakan ui-router, tetapi demi kesederhanaan tutorial ini, kami akan meletakkan semua pandangan dalam fail index.html kami.
Sekarang mari tambahkan pandangan kami ke fail index.html. Kita boleh melakukan ini dengan menambahkan kandungan berikut di bawah tag badan:
'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;
}]);Ini hanya akan membuat lokasi yang membolehkan pelayan menolak data RAM kembali. Data akan memasuki perkhidmatan kami terlebih dahulu, kemudian masukkan pengawal, dan akhirnya masukkan pandangan.
ia sepatutnya kelihatan seperti ini:
Sekarang mari kita tambahkan beberapa carta, yang betul -betul apa yang kita mahu lakukan. Kami akan menambah pembolehubah bernama Timestamp ke garis masa Epoch.js. Kami juga akan menambah array yang dipanggil Chartentry yang kami akan mengikat ke Arahan Epoch.ng kami.
<code>root
app (Angular应用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>maka mari memetakan data dalam pernyataan suis dan tambahkan baki item data Epoch.js yang diperlukan. Sudah tentu, kita boleh memecahkannya lebih jauh (contohnya, menggunakan lebih banyak fungsi dan penapis), tetapi demi kesederhanaan tutorial ini, kita akan tetap mudah.
<!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>
Pengawal kami kelihatan lebih lengkap. Kami telah menambahkan RealTimeareAfeed ke skop, yang kami akan mengikat pandangan kami melalui Arahan NG-EPOCH, dan kami juga telah menambah Areaaxes dalam skop, yang menentukan susun atur graf kawasan.
Sekarang mari tambahkan arahan ke index.html dan paparkan data nilai CPU yang masuk:
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');carta kelas merujuk kepada skema warna D3.js, Chart-Height adalah apa yang anda fikirkan, carta-aliran adalah data yang dikembalikan dari pelayan SignalR.
dengannya, kita harus melihat carta muncul dalam masa nyata:
Sekarang mari kita sambungkan sejumlah besar titik data ke carta ini dan tambahkan carta lain dari kerangka N3-pie (kerana yang tidak suka carta pai!).
Untuk menambah carta pai dari rangka kerja N3-pie, tambahkan yang berikut kepada pengawal kami:
'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;
}]);Sudah tentu, nilai ini akan dikemas kini oleh pelayan SignalR. Anda dapat melihat ini dalam kod lengkap pengawal kami.
kita juga perlu mengambil sedikit masa untuk memikirkan kod penuh pandangan kita.
kita harus melihat data berikut pada skrin:
Kami telah melihat bahawa sudut boleh menyambung ke isyarat dengan mudah - hanya masukkan titik akhir dalam perkhidmatan sudut atau kilang. Kilang AngularJS adalah mekanisme enkapsulasi yang berkomunikasi dengan isyarat. Selepas "menggabungkan", siapa tahu bahawa AngularJS dan .NET akan bekerjasama dengan sempurna?
Saya akan memperkenalkan beberapa kod .NET yang membolehkan komunikasi ini di belakang. (Anda boleh mencari kod sumber di sini.)
Pertama, untuk memulakan kod pelayan bangunan, anda perlu menjalankan SignalR dalam penyelesaian Visual Studio anda. Untuk melakukan ini, ikuti tutorial yang sangat baik di ASP.NET untuk menjalankan penyelesaian SignalR asas. (Ini adalah yang paling mudah.)
Selepas berlari, ubah kelas C# Hub ke yang berikut:
'use strict';
app.controller('PerformanceDataController', ['$scope', 'backendHubProxy',
function ($scope, backendHubProxy) {
console.log('trying to connect to service')
var performanceDataHub = backendHubProxy(backendHubProxy.defaultServer, 'performanceHub');
console.log('connected to service')
$scope.currentRamNumber = 68;
performanceDataHub.on('broadcastPerformance', function (data) {
data.forEach(function (dataItem) {
switch(dataItem.categoryName) {
case 'Processor':
break;
case 'Memory':
$scope.currentRamNumber = dataItem.value;
break;
case 'Network In':
break;
case 'Network Out':
break;
case 'Disk Read Bytes/Sec':
break;
case 'Disk Write Bytes/Sec':
break;
default:
//default code block
break;
}
});
});
}
]);Setelah menukar kelas Hub, Visual Studio akan melaporkan ralat, anda perlu menambah model prestasi (kerana JSON.NET, ia akan secara automatik ditukar kepada JSON apabila pelayan menolak):
<code>root
app (Angular应用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>metadata JSONProperty hanya memberitahu JSON.NET untuk secara automatik menukar nama harta kepada huruf kecil apabila menukar ke JSON untuk model ini. JavaScript suka huruf kecil.
Mari tambahkan kelas PerformanceEngine yang akan mendorong data prestasi sebenar kepada mana -mana klien mendengar melalui SignalR. Enjin menghantar mesej ini kepada mana -mana pelanggan mendengar melalui SignalR melalui benang latar belakang yang tidak segerak.
Oleh kerana panjangnya, anda boleh mencari kod dalam repositori GitHub kami.
Kod ini pada dasarnya menolak satu siri metrik prestasi kepada mana -mana pelanggan yang dilanggan dalam setiap lelaran. Metrik prestasi ini disuntik ke dalam pembina. Kelajuan push dari pelayan ditetapkan pada parameter pembina PollIntervalMillis.
Perhatikan bahawa ini akan berfungsi dengan baik jika anda menggunakan Owin sebagai host diri untuk menjadi tuan rumah SignalR, dan ia harus berfungsi dengan baik jika anda menggunakan benang pekerja web.
Perkara terakhir yang perlu dilakukan adalah memulakan thread latar belakang di suatu tempat di Onstart () atau kelas permulaan perkhidmatan.
<!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>
Dua baris kod yang memulakan thread latar belakang (seperti yang anda fikirkan) adalah di mana kita memberi gambaran prestasi dan panggil OnPerFormancemonitor ().
Sekarang, saya tahu anda mungkin berfikir saya rawak data dari pelayan, yang merupakan fakta. Tetapi untuk menolak metrik sebenar, hanya gunakan perpustakaan System.Diagnostics dan PerformanceCounter yang disediakan oleh Windows. Saya cuba mengekalkannya dengan mudah, tetapi inilah kod yang kelihatan seperti:
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');Kami telah belajar bagaimana menggunakan data SignalR melalui sudut, dan kami telah menyambungkan data tersebut ke rangka kerja carta masa nyata di sisi sudut.
Demo versi akhir klien ditunjukkan di sini, dari mana anda boleh mendapatkan kod tersebut.
Demo versi akhir pelayan ditunjukkan di sini, dan anda boleh mendapatkan kod dari sini.
Saya harap anda menikmati panduan ini. Jika anda telah mencuba sesuatu yang serupa, sila beritahu kami dalam komen!
Menubuhkan SignalR dalam AngularJS melibatkan beberapa langkah. Pertama, anda perlu memasang perpustakaan SignalR menggunakan NUGET atau NPM. Selepas pemasangan, anda boleh membuat pusat SignalR baru pada pelayan. Pusat ini akan bertanggungjawab untuk menghantar dan menerima mesej. Pada pelanggan, anda perlu merujuk perpustakaan JavaScript SignalR dan membuat sambungan ke pusat anda. Anda kemudian boleh memulakan sambungan dan menentukan fungsi yang mengendalikan mesej masuk.
SignalR menyediakan mekanisme terbina dalam untuk mengendalikan kesilapan sambungan. Anda boleh menggunakan fungsi .error () pada sambungan pusat untuk menentukan fungsi panggil balik yang akan dipanggil apabila ralat berlaku. Fungsi panggil balik ini boleh memaparkan mesej ralat kepada pengguna atau cuba menyambung semula ke pusat.
Ya, SignalR boleh digunakan dengan mana -mana rangka kerja JavaScript yang menyokong Ajax dan WebSockets. Ini termasuk kerangka popular seperti React, Vue.js, dan Angular. Anda hanya perlu memasukkan perpustakaan JavaScript SignalR dalam projek anda dan membuat sambungan pusat seperti yang anda lakukan dalam mana -mana aplikasi JavaScript yang lain.
Untuk menghantar mesej dari pelayan ke klien, anda boleh menggunakan harta pelanggan pusat. Harta ini menyediakan kaedah untuk menghantar mesej kepada semua pelanggan yang bersambung, pelanggan tertentu, atau kumpulan klien. Anda boleh menghubungi kaedah ini dari mana-mana bahagian kod pelayan untuk menghantar kemas kini masa nyata kepada pelanggan anda.
SignalR menyediakan beberapa pilihan untuk melindungi aplikasi. Anda boleh menggunakan harta [Authorize] untuk menyekat akses ke kaedah pusat dan pusat anda. Anda juga boleh menentukan pengarang tersuai untuk hab anda menggunakan kaedah Maphubs () dalam fail Global.asax. Di samping itu, anda boleh menggunakan SSL untuk menyulitkan trafik isyarat dan mencegah penyiaran.
SignalR secara automatik mengendalikan pemotongan dan percubaan untuk menyambung semula. Walau bagaimanapun, anda juga boleh mengendalikan pemotongan secara manual menggunakan fungsi .disconnected () pada sambungan pusat. Fungsi ini membolehkan anda menentukan fungsi panggil balik yang akan dipanggil apabila sambungan hilang.
SignalR adalah perpustakaan .NET yang direka untuk digunakan dengan pelayan .NET. Walau bagaimanapun, SignalR boleh digunakan pada pelayan bukan.NET dengan menggunakan perpustakaan WebSocket yang serasi. Anda perlu melaksanakan protokol SignalR pada pelayan dan mengendalikan sambungan dan logik mesej sendiri.
Anda boleh menguji aplikasi SignalR anda menggunakan alat seperti Postman atau Fiddler dan menghantar permintaan HTTP ke pusat anda dan mengesahkan respons. Anda juga boleh menulis ujian unit untuk kaedah pusat dan fungsi pelanggan anda.
Ya, anda boleh menggunakan SignalR dalam aplikasi mudah alih anda. Perpustakaan JavaScript SignalR boleh digunakan dalam aplikasi mudah alih hibrid yang dibina dengan Cordova atau Ionic. Untuk aplikasi mudah alih asli, kedua -dua iOS dan Android menyediakan pelanggan SignalR.
SignalR menyediakan beberapa pilihan untuk melanjutkan permohonan. Anda boleh menggunakan Azure SignalR Service, perkhidmatan yang diuruskan sepenuhnya yang mengendalikan semua sambungan SignalR untuk anda. Anda juga boleh menggunakan backend, yang merupakan lapisan perisian untuk mengedarkan mesej antara pelbagai pelayan.
Atas ialah kandungan terperinci Bina papan pemuka isyarat masa nyata dengan angularjs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
