Membuat bateri menggunakan Node.js: Pelanggan

Takeaways Key

• Artikel ini menerangkan cara membina bahagian klien untuk perkhidmatan visualisasi bateri menggunakan Node.js, yang mengemas kini status bateri secara tetap tanpa memuatkan semula halaman. Pelanggan boleh menjeda atau menyambung semula kemas kini untuk mengelakkan beban sistem apabila maklumat tidak diperlukan.
• Reka bentuk reaktif dan rangka kerja deklaratif digunakan untuk mengemas kini model objek dokumen (DOM) secara automatik dan cekap sebagai tindak balas kepada perubahan data. Ini dicapai menggunakan ractive.js, perpustakaan yang mengikat data ke elemen DOM dan mengemas kini DOM setiap kali perubahan data.
• Penulis menunjukkan cara menggunakan ractive.js untuk membuat visualisasi bateri, termasuk menyediakan mekanisme untuk menjeda/menyambung semula kemas kini, dan secara asynchronous mengambil data dari perkhidmatan REST.
Artikel ini menyimpulkan dengan panggilan untuk meneroka alat dan konsep yang dibincangkan, seperti menubuhkan pelayan HTTP menggunakan node.js, API RESTFUL, menjalankan arahan terminal OS pada pelayan node.js, dan asas -asas kerangka deklaratif dan ractive.js.
Di bahagian pertama siri mini ini, kami membincangkan butiran perkhidmatan yang kami bina dan apa yang akan anda pelajari. Kami kemudian meliputi mengapa kami memerlukan pelayan dan mengapa saya memilih untuk membuat perkhidmatan yang tenang. Semasa membincangkan cara membangunkan pelayan, saya mengambil kesempatan untuk membincangkan bagaimana anda dapat mengenal pasti sistem operasi semasa dan juga cara menggunakan Node.js untuk menjalankan arahan di atasnya. Dalam bahagian kedua dan terakhir siri ini, anda akan mengetahui cara membina bahagian klien untuk membentangkan maklumat kepada pengguna dengan cara yang baik. Untuk mencapai matlamat ini, kita harus mengemas kini status bateri setiap x minit (atau saat), tanpa memuat semula halaman. Lebih -lebih lagi, kita sepatutnya dapat menjeda/meneruskan kemas kini, untuk mengelakkan banjir sistem kita apabila kita tidak memerlukan maklumat, atau bahkan ketika kita tidak melihat halaman tersebut. Untuk melakukan itu, kita akan:

Jadual panggilan Ajax ke perkhidmatan backend kami sepanjang selang waktu yang tetap;
Gunakan rangka kerja deklaratif yang mengemas kini DOM secara automatik dan cekap sebagai tindak balas kepada perubahan data;
Gunakan beberapa fungsi utiliti jQuery untuk menjadikan kehidupan kita lebih mudah;
Gunakan beberapa imej yang bagus dan CSS untuk membuat visual papan pemuka menarik (sebagai bonus!).

Reka bentuk reaktif

Membincangkan panggilan Ajax dan asynchronous pastinya keluar dari skop artikel ini (saya akan menyediakan beberapa pautan berguna pada akhir jawatan). Untuk tujuan kami, kami juga boleh merawatnya sebagai kotak hitam yang membolehkan kami meminta pelayan untuk beberapa data, dan melaksanakan beberapa tindakan sebaik sahaja data dihantar kembali. Mari kita ambil satu minit, sebaliknya, untuk membincangkan reka bentuk reaktif dan kerangka deklaratif. Halaman HTML secara lalai entiti statik. Ini bermakna bahawa untuk halaman HTML tulen kandungan yang ditunjukkan pada halaman tetap sama setiap kali ia diberikan dalam penyemak imbas. Walau bagaimanapun, kita tahu bahawa dengan menggunakan JavaScript dan mungkin beberapa perpustakaan templating seperti misai kita boleh mengemas kini mereka secara dinamik. Terdapat banyak perpustakaan yang membantu pemaju mengikat data ke nod DOM. Kebanyakan mereka menggunakan JavaScript untuk menggambarkan unsur -unsur DOM yang mana data harus diterjemahkan, dan memerlukan kemas kini ke halaman untuk dicetuskan secara manual (melalui JavaScript). Oleh itu, kita akhirnya bergantung kepada logik aplikasi untuk menentukan apabila visualisasi perlu dikemas kini dan perubahan yang harus dibuat sebagai tindak balas kepada perubahan data. Rangka kerja deklaratif mengikat data ke elemen DOM, dan secara automatik mengemas kini DOM, setiap kali data berubah. Pengikatan ini juga disediakan menggunakan templat dalam persembahan (markup HTML) dan bukannya dalam JavaScript. Nilai tambah rangka kerja ini dapat dikenalpasti dalam beberapa perkara utama:

• mereka menguatkuasakan tahap pemisahan yang lebih tinggi antara kandungan dan persembahan. Ini dicapai dengan membiarkan anda menentukan dalam lapisan persembahan yang mengikat data, pengendali acara dan juga struktur pandangan (seperti objek berulang dan komposit, contohnya jadual);
• Mereka menyediakan cara mudah untuk memastikan model data anda dan persembahan anda disegerakkan;
• mereka biasanya melakukannya dengan cara yang sangat berkesan, memastikan hanya reflow subset minimum mungkin pokok Dom anda. Sehubungan itu, perlu diingat bahawa reflowing dan decainting biasanya kesesakan untuk aplikasi penyemak imbas sisi pelanggan.

ractive.js

Untuk ractive.js, perpustakaan yang akan kita gunakan, penyegerakan antara data dan DOM diperolehi melalui objek kontena . Perpustakaan membuat objek yang membungkus data. Objek ini mempunyai akses kepada data, jadi setiap kali anda menetapkan atau mendapatkan apa -apa harta, perpustakaan dapat menangkap tindakan anda dan menyiarkannya secara dalaman kepada semua pelanggan.

Hands-on

Sekarang kita telah melihat apa yang Ractive.js berguna, sudah tiba masanya untuk menambah template Raktif pertama kami ke halaman kami. Untuk melakukan itu, anda boleh menambah tag skrip dengan ID pilihan anda di mana -mana di dalam . Saya cadangkan anda memilih ID dengan bijak kerana kami memerlukannya kemudian. Kami juga perlu menambah atribut Type = 'Text/Ractive':

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span><span></span>></span></span>

type = 'text/ractive' Sebenarnya tidak masuk akal untuk penyemak imbas anda kerana ia akan mengabaikan skrip melainkan anda menambah skrip Ractive ke halaman anda juga:

<span><span><span><script> src<span >='http://cdn.ractivejs.org/latest/ractive.js'</script></span>></span><span><span></span>></span></span>

Sekarang, di dalam skrip Raktif anda boleh menambah tag HTML dan pembolehubah templat dan syarat/gelung. Ractive.js akan menjaga menilai segala -galanya di dalam kumpulan {{}}.

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span>
</span></span><span><span>    <span>{{#batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><div class="battery-div">
<span><span>        <span><div class="battery-shell">
<span><span>          <span><div class="battery-percent-text">{{batteryPercent.toFixed(1) + '%'}}</div>
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span><div class="battery-level">
<span><span>          <span><div class="battery-mask" style="width:{{(100 - batteryPercent) + '%'}};">
<span><span>          <span></span></span></span>
</div>                
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span>{{#batteryCharging}}
</span></span></span><span><span>          <span><div class="battery-plug" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryCharging}}
</span></span></span><span><span>        <span>{{#batteryPercent </span></span><span><span>          <span><div class="battery-warning" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryLife}}                
</span></span></span><span><span>      <span></span></span></span></span>
</div>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>        <span><span class="key">Battery state:</span> <span class="value {{batteryStateClass(batteryState)}}">{{batteryState}}</span>
</span></span></span><span><span>        <span><br>
</span></span></span><span><span>        <span>{{#batteryLife}}
</span></span></span><span><span>          <span><span class="key">Time to empty:</span> <span class="value {{batteryLifeClass(batteryPercent)}}">{{batteryLife}}</span>
</span></span></span><span><span>        <span>{{/batteryLife}}                  
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span>    <span>{{^batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span>LOADING...
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span></span><span><span></span>></span></span>

Dalam contoh di atas, anda dapat melihat:

• pembolehubah: {{BatteryState}}
• Conditionals: {{#BatteryState}}
• Fungsi Invocations: {{BatteryStateClass (BatteryState)}}

Untuk mempunyai perkara -perkara ini, kita perlu menambah beberapa pengikatan dalam JavaScript. Untuk berbuat demikian, kita perlu membuat objek ractive.js baru:

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span><span></span>></span></span>

Pilihan yang kami lalui kepada pembina adalah sangat penting. Pertama, El perlu memadankan id elemen DOM di mana ractive.js akan menjadikan templat. Dalam kes ini, kita perlu menambah div ke halaman html:

<span><span><span><script> src<span >='http://cdn.ractivejs.org/latest/ractive.js'</script></span>></span><span><span></span>></span></span>

Titik di mana anda memasukkan perkara ini. Ia akan menjadi elemen ibu bapa untuk semua elemen yang diberikan oleh sistem templating ractive.js. Parameter penting kedua yang anda perlu berhati -hati adalah templat. Nilainya perlu dipadankan dengan ID skrip teks/raktif pada halaman anda. Akhirnya, kami menyerahkan kepada data objek yang kekunci adalah nama pembolehubah yang kami rujuk dalam templat kami, atau fungsi yang kami panggil. Dengan ractive.js, kita juga boleh menentukan peristiwa tersuai yang mana perpustakaan akan bertindak balas:

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span>
</span></span><span><span>    <span>{{#batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><div class="battery-div">
<span><span>        <span><div class="battery-shell">
<span><span>          <span><div class="battery-percent-text">{{batteryPercent.toFixed(1) + '%'}}</div>
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span><div class="battery-level">
<span><span>          <span><div class="battery-mask" style="width:{{(100 - batteryPercent) + '%'}};">
<span><span>          <span></span></span></span>
</div>                
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span>{{#batteryCharging}}
</span></span></span><span><span>          <span><div class="battery-plug" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryCharging}}
</span></span></span><span><span>        <span>{{#batteryPercent </span></span><span><span>          <span><div class="battery-warning" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryLife}}                
</span></span></span><span><span>      <span></span></span></span></span>
</div>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>        <span><span class="key">Battery state:</span> <span class="value {{batteryStateClass(batteryState)}}">{{batteryState}}</span>
</span></span></span><span><span>        <span><br>
</span></span></span><span><span>        <span>{{#batteryLife}}
</span></span></span><span><span>          <span><span class="key">Time to empty:</span> <span class="value {{batteryLifeClass(batteryPercent)}}">{{batteryLife}}</span>
</span></span></span><span><span>        <span>{{/batteryLife}}                  
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span>    <span>{{^batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span>LOADING...
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span></span><span><span></span>></span></span>

Dalam beberapa baris, kami telah menyediakan satu mekanisme untuk menjeda/menyambung semula kemas kini kami. Walau bagaimanapun, kita masih perlu menentukan updateBatteryStatus () fungsi.

asynchronously mengambil data

Seperti yang dijanjikan, di sini ia adalah fungsi yang menjaga mendapatkan data dari perkhidmatan REST kami. Dengan menggunakan objek tertunda jQuery, kami menyediakan panggilan balik untuk dipanggil sebaik sahaja beberapa data diterima dari pelayan. Oleh kerana kami juga menggunakan ractive.js di dalam panggilan balik ini, kami tidak perlu melalui logik bagaimana kami mengemas kini lapisan persembahan. Malah, kami hanya mengemas kini nilai pembolehubah yang digunakan dalam skrip templat, dan ractive.js akan menjaga segala -galanya. Apa yang baru saya nyatakan dilaksanakan oleh kod yang dilaporkan di bawah:

ractive <span>= new Ractive({
</span>    <span>el: 'panels',
</span>    <span>template: '#meterVizTemplate',
</span>    <span>data: {
</span>        <span>// Percentage at which the battery goes to 'red' zone (export for Ractive templates)
</span>        <span>batteryRedThreshold: BATTERY_RED_THRESHOLD,
</span>        <span>// Percentage at which the battery enters 'yellow' zone (export for Ractive templates)
</span>        <span>batteryYellowThreshold: BATTERY_YELLOW_THRESHOLD,
</span>        <span>// The capacity of the battery, in percentage. Initially empty
</span>        <span>batteryPercent: NaN,
</span>        <span>// How much more time can the battery last?
</span>        <span>batteryLife: "",
</span>        <span>// True  the update daemon for the battery has been paused
</span>        <span>batteryPaused: false,
</span>        <span>// True  the update daemon for the battery has reported an error at its last try
</span>        <span>batteryUpdateError: false,
</span>        <span>// Is the battery connected to power?
</span>        <span>batteryCharging: false,
</span>        <span>batteryStateClass: function (state) {
</span>            <span>return state === 'discharging' ? BATTERY_RED_CLASS : BATTERY_GREEN_CLASS;
</span>        <span>},
</span>        <span>batteryLifeClass: function (percent) {
</span>            <span>return percent         <span>}
</span>    <span>}
</span><span>});</span></span>

meletakkan semuanya bersama

Sudah tentu, ada lebih banyak pendawaian untuk membuat semua ini berfungsi bersama -sama. Kami melangkau sama sekali reka bentuk papan pemuka. Itu akhirnya terpulang kepada anda, apabila anda mendapat cara untuk membuatnya berfungsi dengan sistem templating! Sebagai contoh, betapa sejuknya jika kita boleh mempunyai peratusan caj yang ditunjukkan sebagai teks dan visual dengan beberapa penunjuk kuasa yang sejuk, menggunakan imej dan animasi? Dengan ractive.js, tidak begitu sukar! Lihatlah hasil akhir: Jika anda ingin memeriksa kod tersebut, anda boleh sekali lagi menemuinya di GitHub.

KESIMPULAN Papan pemuka bateri multi-platform kami harus bersedia untuk pergi sekarang. Tetapi ini sepatutnya menjadi titik permulaan dan bukannya hasil akhir, dan perkara -perkara penting yang saya harap anda belajar sepanjang jalan adalah:

bagaimana untuk menyediakan pelayan http menggunakan node.js
RESTFUL API
Cara menjalankan arahan terminal OS pada pelayan node.js
Asas kerangka deklaratif dan raktif.js khususnya

Jika anda ingin membawanya ke peringkat seterusnya, nasihat saya adalah untuk mula bereksperimen pada alat ini dan menggali jaring untuk memperdalam pengetahuan dalam bidang ini. Sekiranya anda ingin memperdalam topik yang diliputi dalam artikel ini, saya sangat mencadangkan anda melihat sumber -sumber yang baik ini:

• gaya seni bina dan reka bentuk arkitek perisian berasaskan rangkaian
• Garis Panduan untuk Membuat API RESTful
• Apakah kelebihan/kelemahan menggunakan API REST atas perpustakaan asli?
• Corak kaedah template
• Permintaan Asynchronous dalam JavaScript
• Crockford on JavaScript - Episod IV: The Metamorphosis of Ajax - Wawasan Hebat, seperti biasa, ditambah dengan cerita super lucu mengenai asal -usul istilah Ajax, sebagai bonus!
• jQuery $ .getjson method
• tutorial ractiveJS

Soalan Lazim (Soalan Lazim) Mengenai Mewujudkan Visualisasi Bateri Menggunakan Node.js Client

Bagaimana saya boleh mendapatkan status bateri menggunakan javascript?

Untuk mendapatkan status bateri menggunakan JavaScript, anda boleh menggunakan API Status Bateri. API ini memberikan maklumat mengenai tahap caj bateri sistem dan membolehkan anda dimaklumkan oleh peristiwa yang dihantar apabila tahap bateri atau perubahan status pengecasan. Berikut adalah contoh mudah cara menggunakannya:

navigator.getBattery (). Kemudian (fungsi (bateri) { console.log ("Tahap bateri:" bateri.level*100 "%" );
});
Kod ini akan log paras bateri semasa ke konsol.

Apakah navigator.getBattery?

Kaedah Navigator.GetBattery adalah sebahagian daripada API Status Bateri. Ia mengembalikan janji yang menyelesaikan objek BatteryManager, yang memberikan maklumat mengenai tahap caj bateri sistem dan membolehkan anda dimaklumkan oleh peristiwa yang dihantar apabila tahap bateri atau perubahan status pengecasan. Data status bateri?

Untuk memvisualisasikan data status bateri, anda boleh menggunakan mana -mana perpustakaan carta JavaScript, seperti carta.js atau d3.js. Perpustakaan ini membolehkan anda membuat pelbagai jenis carta dan graf dari data anda. Anda juga boleh menggunakan HTML dan CSS untuk membuat bar mudah atau carta pai.

Bolehkah saya mendapatkan status bateri pada semua peranti? tidak semua. Ia juga perlu diperhatikan bahawa sesetengah peranti, seperti komputer desktop, mungkin tidak memberikan maklumat status bateri yang tepat atau tepat.

Bagaimana saya boleh mengendalikan perubahan status bateri?

Anda boleh mengendalikan perubahan status bateri dengan menambahkan pendengar acara ke objek BatteryManager. API Status Bateri menyediakan beberapa peristiwa, seperti 'Pengedar', 'LevelChange', 'ChargingTimeChange', dan 'DischargingTimeChange'. Berikut adalah contoh cara menggunakan peristiwa -peristiwa ini:

navigator.getBattery (). Kemudian (fungsi (bateri) {
battery.addeventListener ('levelChange', function () {
konsol. log ("Tahap bateri:" Battery.level*100 "%"); }); Tahap ke konsol Apabila paras bateri berubah.

Bagaimana saya boleh menggunakan node.js untuk mendapatkan status bateri? status. Walau bagaimanapun, anda boleh menggunakan proses kanak -kanak untuk melaksanakan arahan sistem yang mendapat status bateri, dan kemudian menghuraikan output. Perintah khusus bergantung kepada sistem operasi anda.

Bolehkah saya mendapatkan status bateri tanpa kebenaran pengguna? Walau bagaimanapun, ia selalu menjadi amalan yang baik untuk memberitahu pengguna anda jika anda mengumpul data mengenai sistem mereka. oleh API status bateri adalah nombor antara 0.0 dan 1.0, mewakili paras bateri semasa sebagai sebahagian kecil daripada cas penuh. Ketepatan nilai ini bergantung pada peranti dan baterinya.

Bolehkah saya mendapatkan status bateri dalam pekerja web? Walau bagaimanapun, perlu diingat bahawa tidak semua pelayar menyokong pekerja web, dan tidak semua pelayar yang menyokong pekerja web menyokong API status bateri dalam pekerja web.

Jika API status bateri tidak disokong, tidak banyak yang boleh anda lakukan untuk mendapatkan status bateri. Anda boleh menggunakan pengesanan ciri untuk memeriksa sama ada API disokong dan menyediakan fungsi alternatif atau mesej kepada pengguna jika tidak.

Atas ialah kandungan terperinci Membuat bateri menggunakan Node.js: Pelanggan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!