Cara Membina Papan Pemuka Wi-Fi Menggunakan Node.js dan Ractive.js

Takeaways Key

• Gunakan node.js untuk membina pelayan yang memanjangkan fungsi sedia ada untuk memasukkan maklumat rangkaian Wi-Fi, menjadikan papan pemuka lebih komprehensif.
• Melaksanakan ractive.js untuk pihak klien untuk menguruskan kemas kini dan interaksi masa nyata dengan lebih cekap, meningkatkan pengalaman pengguna dengan kemas kini kandungan dinamik.
• Proses output arahan Wi-Fi pada pelayan untuk mengekstrak dan memaparkan butiran rangkaian yang tersedia, memastikan data berstruktur dan siap untuk kegunaan klien.
• Reka bentuk dan gunakan templat HTML dengan ractive.js untuk memaparkan data rangkaian Wi-Fi, membolehkan unsur-unsur web interaktif dan responsif yang meningkatkan navigasi dan kebolehgunaan.
• memperluaskan keupayaan papan pemuka dengan menambahkan titik akhir baru dan mengendalikan panggilan Ajax dengan berkesan, memastikan papan pemuka tetap berskala dan dikekalkan.

Artikel ini dikaji semula oleh Marc Towler. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik! Dalam beberapa bulan yang lalu, saya telah menerbitkan siri mini mengenai papan pemuka. Dalam artikel pertama bertajuk "Mencipta Bateri Viz Menggunakan Node.js: Bermula dan Pelayan", saya telah menunjukkan cara membuat pelayan Node.js yang memeriksa status bateri pada komputer riba dan mengembalikan beberapa maklumat berguna. Pada yang kedua, tajuknya adalah "Membuat bateri menggunakan Node.js: Client", saya telah menjelaskan cara membina aplikasi web untuk memvisualisasikan maklumat tersebut dengan cara yang lebih baik dan mesra pengguna. Dalam artikel ini, kami akan membina papan pemuka itu dan menambah maklumat mengenai rangkaian Wi-Fi yang ada. Senarai rangkaian yang ada akan ditunjukkan dengan ringkasan butiran yang paling relevan (nama, alamat, dilindungi vs terbuka, dan sebagainya) dan apabila pemilihan, butiran lanjut rangkaian akan muncul di panel lain. Mengintip matlamat kami: Jika anda mahu, anda boleh menganggapnya sebagai titik permulaan. Saya sangat mencadangkan anda untuk menyesuaikannya kerana ini adalah cara terbaik untuk meningkatkan kemahiran anda dengan teknologi yang akan kami gunakan.

Server

Di sisi pelayan, kami akan menggunakan semula dan memperluaskan apa yang telah kami buat untuk bateri itu. Dalam tutorial ini, kami akan memberi tumpuan kepada Ubuntu tetapi kod pelayan disusun sedemikian rupa sehingga anda perlu menulis hanya beberapa penyesuai untuk menyokong mesin Mac atau Windows.

Bash Command Untuk memulakan, kami melanjutkan kaedah konfigurasi asal dengan menambahkan arahan dan panggilan balik untuk titik akhir baru. Sesetengah penamaan semula telah diperlukan untuk mencegah pertempuran dengan arahan untuk widget bateri.

<span>function switchConfigForCurrentOS () {
</span>      <span>switch(process.platform) {
</span>        <span>case 'linux':
</span>          <span>return {
</span>            <span>batteryCommand: 'upower -i /org/freedesktop/UPower/devices/battery_BAT0 | grep -E "state|time to empty|to full|percentage"',
</span>            <span>batteryProcessFunction: processBatteryStdoutForLinux,
</span>            <span>wifiCommand: 'iwlist wlan0 scanning | egrep "Cell |Address|Channel|Frequency|Encryption|Quality|Signal level|Last beacon|Mode|Group Cipher|Pairwise Ciphers|Authentication Suites|ESSID"',
</span>            <span>wifiProcessFunction: processWifiStdoutForLinux
</span>          <span>};
</span>        <span>case 'darwin': //MAc OsX
</span>        <span>...
</span>      <span>}
</span>    <span>}</span>

Pemprosesan Output Perintah Cara kami memproses output arahan adalah sama dengan apa yang telah kami lakukan untuk bateri. Kami melalui baris output mengikut baris dan memprosesnya untuk mengekstrak parameter yang bermakna dari bacaan kami. Tetapi dalam kes ini kita mendapat bacaan mengenai senarai item, bukan satu pun! Oleh itu, kita perlu mengenal pasti apabila item baru sebenarnya bermula dalam output, dan buat objek baru untuk setiap item. Kemudian kami akan menapis garisan yang sah, menambah sifat yang kami baca ke item semasa kami.

Sebelum melihat secara terperinci apa yang berlaku di dalam ProcessWifilineForLinux, izinkan saya menyerlahkan beberapa mata:

<span>function processWifiStdoutForLinux(stdout) {
</span>      <span>var networks = {};
</span>      <span>var net_cell = "";
</span>      <span>var cell = {};
</span>
      stdout<span>.split('\n').map(trimParam).forEach(function (line) {
</span>        <span>if (line.length > 0) {
</span>          <span>//check if the line starts a new cell
</span>          <span>if (stringStartsWith(line, NET_CELL_PREFIX)) {
</span>            <span>if (net_cell.length > 0) {
</span>              networks<span>[net_cell] = mapWifiKeysForLinux(cell);
</span>            <span>}
</span>            cell <span>= {};
</span>            line <span>= line.split("-");
</span>            net_cell <span>= line[0].trim();
</span>            line <span>= line[1];
</span>          <span>}
</span>          <span>//Either way, now we are sure we have a non empty line with (at least one) key-value pair
</span>          <span>//       and that cell has been properly initialized
</span>          <span>processWifiLineForLinux(cell, line);
</span>        <span>}
</span>
      <span>});
</span>      <span>if (net_cell.length > 0) {
</span>        networks<span>[net_cell] = mapWifiKeysForLinux(cell);
</span>      <span>}
</span>      <span>return networks;
</span>    <span>}</span>

Oleh kerana kami menambah sel ke hash kami hanya apabila keterangan yang akan datang bermula, kami akan terlepas pernyataan akhir jika (untuk menangkap rangkaian terakhir dalam output).

• Kod di atas mengandaikan bahawa dua sel tidak dapat berkongsi nama yang sama. Ini adalah andaian yang munasabah kerana rangkaian tidak diindeks oleh nama mereka (maklumat itu ditangkap oleh medan Essid). Mereka disenaraikan dan diberikan pengenal progresif
"sel 0x"
• .
• Perkara terakhir yang kita lakukan sebelum menyimpan sifat adalah panggilan ke MapWifikeySforLinux dan dalam kes ini mereka hanya mengembalikan kunci yang tidak berubah.

Malah fungsi yang memproses setiap baris sangat serupa dengan apa yang telah kami buat untuk bateri: kerana setiap baris memegang nama medan dan nilainya, kami terlebih dahulu memeriksa kes kelebihan yang perlu ditangani dengan cara yang istimewa, dan untuk Baki baris kami hanya memisahkannya dan menyimpan pasangan nilai kunci dengan sewajarnya.

<span>function switchConfigForCurrentOS () {
</span>      <span>switch(process.platform) {
</span>        <span>case 'linux':
</span>          <span>return {
</span>            <span>batteryCommand: 'upower -i /org/freedesktop/UPower/devices/battery_BAT0 | grep -E "state|time to empty|to full|percentage"',
</span>            <span>batteryProcessFunction: processBatteryStdoutForLinux,
</span>            <span>wifiCommand: 'iwlist wlan0 scanning | egrep "Cell |Address|Channel|Frequency|Encryption|Quality|Signal level|Last beacon|Mode|Group Cipher|Pairwise Ciphers|Authentication Suites|ESSID"',
</span>            <span>wifiProcessFunction: processWifiStdoutForLinux
</span>          <span>};
</span>        <span>case 'darwin': //MAc OsX
</span>        <span>...
</span>      <span>}
</span>    <span>}</span>

Perbincangan ini adalah peluang yang sempurna untuk menunjukkan kepada anda helah yang kemas yang baru -baru ini saya "dipinjam" dari seorang jurutera. Ia akan membolehkan kami menggunakan pernyataan suis dan bukan rantaian IF -Esses.

endpoint

Menambah titik akhir baru ke pelayan kami adalah remeh terima kasih kepada modul HHTP Node dan kaedah penolong yang telah kami buat dalam tutorial sebelumnya. Kami hanya perlu menentukan ekspresi biasa untuk laluan yang ingin kami jawab, dan menambah pernyataan IF ke panggilan balik pelayan, yang dicetuskan pada permintaan masuk:

<span>function processWifiStdoutForLinux(stdout) {
</span>      <span>var networks = {};
</span>      <span>var net_cell = "";
</span>      <span>var cell = {};
</span>
      stdout<span>.split('\n').map(trimParam).forEach(function (line) {
</span>        <span>if (line.length > 0) {
</span>          <span>//check if the line starts a new cell
</span>          <span>if (stringStartsWith(line, NET_CELL_PREFIX)) {
</span>            <span>if (net_cell.length > 0) {
</span>              networks<span>[net_cell] = mapWifiKeysForLinux(cell);
</span>            <span>}
</span>            cell <span>= {};
</span>            line <span>= line.split("-");
</span>            net_cell <span>= line[0].trim();
</span>            line <span>= line[1];
</span>          <span>}
</span>          <span>//Either way, now we are sure we have a non empty line with (at least one) key-value pair
</span>          <span>//       and that cell has been properly initialized
</span>          <span>processWifiLineForLinux(cell, line);
</span>        <span>}
</span>
      <span>});
</span>      <span>if (net_cell.length > 0) {
</span>        networks<span>[net_cell] = mapWifiKeysForLinux(cell);
</span>      <span>}
</span>      <span>return networks;
</span>    <span>}</span>

Pada ketika ini semua yang perlu kita lakukan hanyalah membuat panggilan balik yang akan menjalankan arahan, mengubah outputnya dan akhirnya menghantar hasil JSON kepada pelanggan, dibungkus dengan respons HTTP yang disediakan oleh http.createeserver.

<span>function processWifiLineForLinux(cell<span>, line</span>) {
</span>      <span>var key;
</span>      <span>var val;
</span>
      line <span>= line.trim();
</span>      <span>if (line.length > 0) {
</span>
        <span>switch (true) {
</span>        <span>case stringStartsWith(line, NET_ADDRESS_PREFIX):
</span>          line <span>= line.split(':');
</span>          line<span>.splice(0, 1);
</span>          <span>//INVARIANT: Address in the format Address: DC:0B:1A:47:BA:07
</span>          <span>if (line.length > 0) {
</span>            cell<span>[NET_ADDRESS_PREFIX] = line.join(":");
</span>          <span>}
</span>          <span>break;
</span>        <span>case stringStartsWith(line, NET_QUALITY_PREFIX):
</span>          <span>//INVARIANT: this line must have a similar format: Quality=41/70  Signal level=-69 dBm
</span>          line <span>= line.split(NET_SIGNAL_PREFIX);
</span>          cell<span>[NET_QUALITY_PREFIX] = line[0].split("=")[1].trim();
</span>          <span>if (line.length > 1) {
</span>            cell<span>[NET_SIGNAL_PREFIX] = line[1].split("=")[1].trim();
</span>          <span>}
</span>          <span>break;
</span>        <span>case stringStartsWith(line, NET_EXTRA_PREFIX):
</span>          <span>//INVARIANT: this line must have a similar format: Extra: Last beacon: 1020ms ago
</span>          line <span>= line.split(":");
</span>          <span>//we can ignore the prefix of the string
</span>          <span>if (line.length > 2) {
</span>            cell<span>[line[1].trim()] = line[2].trim();
</span>          <span>}
</span>          <span>break;
</span>        <span>default:
</span>          <span>//INVARIANT: the field must be formatted as "key : value"
</span>          line <span>= line.split(":");
</span>          <span>if (line.length > 1) {
</span>            <span>//Just stores the key-value association, so that coupling with client is reduced to the min:
</span>            <span>//values will be examined only on the client side
</span>            cell<span>[line[0].trim()] = line[1].trim();
</span>          <span>}
</span>        <span>}
</span>      <span>}
</span>      <span>return cell;
</span>    <span>}</span>

Untuk langkah terakhir, perhatikan bahawa kami menggunakan semula fungsi onsuccess yang kami telah dengan mudah ditakrifkan untuk titik akhir bateri (perkara yang sama untuk pengendali onerror).

pelanggan

Sekarang, izinkan saya memperkenalkan anda bahagian paling lucu dari contoh ini. Kami akan menggunakan secara besar -besaran ractive.js untuk klien web. Ia adalah rangka kerja yang ringan dan kuat yang menggabungkan pengikatan dua hala (gaya AngularJS) dengan templat HTML (seperti misai atau hendal). Tekanan pada templat (bahkan lebih daripada angularjs, cara lebih daripada bertindak balas), sememangnya salah satu ciri -ciri raktif.js, bersama -sama dengan prestasi yang pantas, hasil daripada enjin pintar yang selalu mengira unsur -unsur dom yang paling kecil disegarkan apabila data berubah. Kami akan menambah dua panel ke papan pemuka kami:

• satu untuk senarai rangkaian di persekitaran kami (menunjukkan ringkasan ringkas untuk setiap item).
• Satu lagi yang hanya muncul sekali rangkaian dipilih dan memaparkan maklumat terperinci untuk sambungan Wi-Fi itu.

template

Mari kita mulakan dengan membincangkan templat HTML untuk memaparkan data kami, dan kemudian kita akan melihat bagaimana untuk mengikat data pelayan kepada mereka.

senarai Wi-Fi

Templat yang paling kompleks yang kita perlukan adalah yang menunjukkan senarai rangkaian yang ada. Dozen garis pertama hanya menentukan panel kontena, dan gunakan pengikatan ractive.js untuk menunjukkan peringatan ikon mengenai kesilapan pelayan, dan butang untuk menjeda/menyambung semula pengundian pelayan:

<span>var server = http.createServer(function (request<span>, response</span>) {
</span>      <span>var requestUrl = request.url;
</span>      <span>var filePath = BASE_URL + requestUrl;
</span>
      <span>if (requestUrl === '/' || requestUrl === '') {
</span>        response<span>.writeHead(301,
</span>          <span>{
</span>            <span>Location: BASE_URL + 'public/demo.html'
</span>          <span>});
</span>        response<span>.end();
</span>      <span>} else if (RE_BATTERY.test(requestUrl)) {
</span>        <span>getBatteryStatus(response, onBatteryInfo, onError);
</span>      <span>} else if (RE_NETWORKS.test(requestUrl)) {
</span>        <span>getWifiStatus(response, onWifiInfo, onError);
</span>      <span>}  
</span>
      <span>...
</span>
    <span>}</span>

The double-stache {{}}, seperti dalam misai dan hendal, adalah penanda untuk kandungan yang disuntik secara dinamik. Ractive.js membolehkan kami menggunakan ekspresi dan menjalankan fungsi di dalam kurungan, selagi fungsi -fungsi tersebut dan data yang digunakan secara global tersedia (math.round, contohnya) atau telah ditambah ke medan data objek JavaScript yang terikat pada templat. Hasil ekspresi di dalam kurungan akan melarikan diri, jadi ia akan menjadi teks biasa. Tetapi kadang -kadang anda mungkin perlu menambah beberapa baris HTML ke unsur -unsur anda. Terdapat cara alternatif untuk melakukannya, tetapi jika anda benar-benar fikir anda memerlukannya, anda boleh menggunakan triple-stache {{{}}}. Menggunakan triple-stache adalah selamat kerana skrip akan melarikan diri dan tidak dilaksanakan, tetapi ia lebih perlahan daripada sisa dua kali, jadi anda harus cuba mengelakkannya sebanyak mungkin.
Bahagian kedua templat adalah lebih menarik. Kami melangkah melalui senarai rangkaian dengan {{#wifinetworks: num}}, menangkap indeks setiap item dalam pembolehubah NUM. Untuk setiap item dalam senarai, kami menambah klik pengendalian panggilan balik (lihat di bawah) dan tunjukkan ringkasan nilainya. Perhatikan bagaimana tag penutup tidak perlu dipadankan dengan tag pembukaan Teks:

<span>function switchConfigForCurrentOS () {
</span>      <span>switch(process.platform) {
</span>        <span>case 'linux':
</span>          <span>return {
</span>            <span>batteryCommand: 'upower -i /org/freedesktop/UPower/devices/battery_BAT0 | grep -E "state|time to empty|to full|percentage"',
</span>            <span>batteryProcessFunction: processBatteryStdoutForLinux,
</span>            <span>wifiCommand: 'iwlist wlan0 scanning | egrep "Cell |Address|Channel|Frequency|Encryption|Quality|Signal level|Last beacon|Mode|Group Cipher|Pairwise Ciphers|Authentication Suites|ESSID"',
</span>            <span>wifiProcessFunction: processWifiStdoutForLinux
</span>          <span>};
</span>        <span>case 'darwin': //MAc OsX
</span>        <span>...
</span>      <span>}
</span>    <span>}</span>

Pembukaan adalah jika tag yang keadaannya adalah fungsi, yang akan menjadikannya pelik berlari lagi dalam penutupan. Oleh itu, kita boleh menggunakan mesej yang bermakna untuk memasangkan kedua -dua tag, hanya untuk penyelenggaraan.

Butiran Wi-Fi terpilih

<span>function processWifiStdoutForLinux(stdout) {
</span>      <span>var networks = {};
</span>      <span>var net_cell = "";
</span>      <span>var cell = {};
</span>
      stdout<span>.split('\n').map(trimParam).forEach(function (line) {
</span>        <span>if (line.length > 0) {
</span>          <span>//check if the line starts a new cell
</span>          <span>if (stringStartsWith(line, NET_CELL_PREFIX)) {
</span>            <span>if (net_cell.length > 0) {
</span>              networks<span>[net_cell] = mapWifiKeysForLinux(cell);
</span>            <span>}
</span>            cell <span>= {};
</span>            line <span>= line.split("-");
</span>            net_cell <span>= line[0].trim();
</span>            line <span>= line[1];
</span>          <span>}
</span>          <span>//Either way, now we are sure we have a non empty line with (at least one) key-value pair
</span>          <span>//       and that cell has been properly initialized
</span>          <span>processWifiLineForLinux(cell, line);
</span>        <span>}
</span>
      <span>});
</span>      <span>if (net_cell.length > 0) {
</span>        networks<span>[net_cell] = mapWifiKeysForLinux(cell);
</span>      <span>}
</span>      <span>return networks;
</span>    <span>}</span>

Panel untuk butiran rangkaian agak mudah: kami hanya menunjukkannya jika kami telah memberikan nilai kepada medan terpilihNetwork dalam objek Ractive kami. Kemudian kami menunjukkan nama rangkaian (medan Essid), dan memaparkan semua pasangan nilai utama yang kami terima dari pelayan. Ini bertujuan untuk mendapatkan gandingan yang paling rendah, tetapi sudah tentu anda boleh mengubahnya untuk menyerlahkan beberapa maklumat atau memaparkannya dengan cara yang lebih bermakna.

JavaScript

Kami akan menyiapkan daemon mengundi yang secara asynchronously menanyakan pelayan pada selang waktu yang diberikan. Setiap panggilan AJAX akan menyediakan senarai rangkaian Wi-Fi yang dikemas kini. Apa yang perlu kita lakukan apabila kami menerima respons JSON dari pelayan, adalah untuk mengakui kami menerima respons yang berjaya dan mengemas kini medan di mana kami menyimpan senarai rangkaian di dalam objek RACTIVE.

persediaan

Seperti yang telah kami tunjukkan dalam artikel sebelumnya, untuk mengikat template ke beberapa data, kita hanya perlu membuat objek raktif baru, mengikatnya dengan id templat (#MetervizTemplate di bawah), dan elemen sasaran, iaitu nod itu akan menjadi ibu bapa templat di pokok dom (panel di bawah). Kemudian kita hanya perlu menambah semua objek atau nilai yang kita mahu gunakan dalam templat sebagai medan ractive.data. Ini boleh dilakukan pada permulaan (seperti di bawah) atau kemudian, menggunakan ractive.set ().

<span>function processWifiLineForLinux(cell<span>, line</span>) {
</span>      <span>var key;
</span>      <span>var val;
</span>
      line <span>= line.trim();
</span>      <span>if (line.length > 0) {
</span>
        <span>switch (true) {
</span>        <span>case stringStartsWith(line, NET_ADDRESS_PREFIX):
</span>          line <span>= line.split(':');
</span>          line<span>.splice(0, 1);
</span>          <span>//INVARIANT: Address in the format Address: DC:0B:1A:47:BA:07
</span>          <span>if (line.length > 0) {
</span>            cell<span>[NET_ADDRESS_PREFIX] = line.join(":");
</span>          <span>}
</span>          <span>break;
</span>        <span>case stringStartsWith(line, NET_QUALITY_PREFIX):
</span>          <span>//INVARIANT: this line must have a similar format: Quality=41/70  Signal level=-69 dBm
</span>          line <span>= line.split(NET_SIGNAL_PREFIX);
</span>          cell<span>[NET_QUALITY_PREFIX] = line[0].split("=")[1].trim();
</span>          <span>if (line.length > 1) {
</span>            cell<span>[NET_SIGNAL_PREFIX] = line[1].split("=")[1].trim();
</span>          <span>}
</span>          <span>break;
</span>        <span>case stringStartsWith(line, NET_EXTRA_PREFIX):
</span>          <span>//INVARIANT: this line must have a similar format: Extra: Last beacon: 1020ms ago
</span>          line <span>= line.split(":");
</span>          <span>//we can ignore the prefix of the string
</span>          <span>if (line.length > 2) {
</span>            cell<span>[line[1].trim()] = line[2].trim();
</span>          <span>}
</span>          <span>break;
</span>        <span>default:
</span>          <span>//INVARIANT: the field must be formatted as "key : value"
</span>          line <span>= line.split(":");
</span>          <span>if (line.length > 1) {
</span>            <span>//Just stores the key-value association, so that coupling with client is reduced to the min:
</span>            <span>//values will be examined only on the client side
</span>            cell<span>[line[0].trim()] = line[1].trim();
</span>          <span>}
</span>        <span>}
</span>      <span>}
</span>      <span>return cell;
</span>    <span>}</span>

daemons

Kami akan menggunakan mekanisme yang sama untuk daemon dan untuk menjeda/memulakan semula pertanyaan pelayan seperti yang kami lakukan untuk bateri. Demi keringkasan kita tidak akan mengulanginya di sini, tetapi jika anda ingin memperdalam topik ini, anda boleh melihat artikel ini atau repositori GitHub.

panggilan Ajax

Satu -satunya perkara yang dilakukan oleh daemon baru kami, adalah membuat panggilan Ajax dan kemudian mengemas kini data kami dalam hal kejayaan atau masalah rangkaian isyarat medan, dalam hal kesilapan.

<span>var server = http.createServer(function (request<span>, response</span>) {
</span>      <span>var requestUrl = request.url;
</span>      <span>var filePath = BASE_URL + requestUrl;
</span>
      <span>if (requestUrl === '/' || requestUrl === '') {
</span>        response<span>.writeHead(301,
</span>          <span>{
</span>            <span>Location: BASE_URL + 'public/demo.html'
</span>          <span>});
</span>        response<span>.end();
</span>      <span>} else if (RE_BATTERY.test(requestUrl)) {
</span>        <span>getBatteryStatus(response, onBatteryInfo, onError);
</span>      <span>} else if (RE_NETWORKS.test(requestUrl)) {
</span>        <span>getWifiStatus(response, onWifiInfo, onError);
</span>      <span>}  
</span>
      <span>...
</span>
    <span>}</span>

Kami juga harus memeriksa bahawa fail JSON yang kami dapati diformat dengan baik. Kami tidak perlu bimbang tentang suntikan skrip, kerana ractive.js sudah melepaskan nilai medan sebelum menambahkannya ke DOM. Perlu diingat bahawa kaedah jQuery.getjson (), yang akan menjadi jalan pintas untuk kaedah $ .ajax () yang digunakan di atas, selamat selama: 1. Anda tidak memasukkan 'callback =' rentetan dalam URL anda (yang membolehkan kod JSON dilaksanakan).
2. Anda boleh mempercayai pelayan yang anda panggil. Oleh kerana kami tidak menggunakan pengguna yang disediakan kandungan untuk URL, seseorang akan berfikir bahawa ia tidak sepatutnya menjadi kebimbangan. Walau bagaimanapun, jika pelayan kami dikompromikan, maka kami tidak akan mempunyai halangan untuk melindungi kami daripada kod yang disuntik. Jika tajuk 'Datatype' yang jelas tidak ditetapkan, maka JQuery akan cuba meneka kandungan dari respons, dan respons dari pelayan yang berniat jahat mungkin mengandungi kod JavaScript. Walaupun kemungkinan ini tidak begitu biasa, kita tidak dapat memerintah sepenuhnya. Atas sebab ini, ia bukan idea yang buruk menambah lapisan perlindungan tambahan pada harga sedikit lebih menaip.

Mengemas kini papan pemuka

Tambahan yang paling relevan untuk langkah ini ialah kami bertindak balas terhadap klik pada senarai dan tunjukkan butiran untuk rangkaian yang dipilih:

<span>function switchConfigForCurrentOS () {
</span>      <span>switch(process.platform) {
</span>        <span>case 'linux':
</span>          <span>return {
</span>            <span>batteryCommand: 'upower -i /org/freedesktop/UPower/devices/battery_BAT0 | grep -E "state|time to empty|to full|percentage"',
</span>            <span>batteryProcessFunction: processBatteryStdoutForLinux,
</span>            <span>wifiCommand: 'iwlist wlan0 scanning | egrep "Cell |Address|Channel|Frequency|Encryption|Quality|Signal level|Last beacon|Mode|Group Cipher|Pairwise Ciphers|Authentication Suites|ESSID"',
</span>            <span>wifiProcessFunction: processWifiStdoutForLinux
</span>          <span>};
</span>        <span>case 'darwin': //MAc OsX
</span>        <span>...
</span>      <span>}
</span>    <span>}</span>

Untuk melakukan ini, kami mentakrifkan pengendali acara hoc . Seperti yang disebutkan di atas, ia akan dipanggil apabila kita mengklik mana -mana entri senarai, dan kemudian acara yang berkaitan dengan klik akan membawa maklumat mengenai rangkaian yang dipilih itu sendiri. Sekarang, jika kita tidak menggunakan ractive.js, katakan kita hanya menggunakan jQuery, kita perlu:

panggil kaedah yang akan mengambil ID rangkaian yang dipilih;
Gunakannya untuk mencari objek rangkaian untuk ID itu (mungkin disimpan dalam kamus);
Cari elemen DOM untuk "Panel Rangkaian yang Dipilih";
Keluarkan pokok dom lama di dalam panel dan secara berulang buat senarai baru yang memaparkan persatuan nilai utama, mencampurkan banyak rentetan HTML di dalam kod JavaScript kami.
Ractive.js akan menjaga semua ini untuk kita, dan ia akan melakukannya dengan lebih baik daripada yang kita akan (secara purata), mengubah subtree DOM yang paling kecil sahaja. Pertama, objek acara yang dihantar ke pengendali klik pada klik akan mempunyai medan konteks yang mengandungi data yang terikat pada elemen DOM. Dengan kata lain, kami mendapat objek data rangkaian "secara percuma". Sebaik sahaja kita mempunyai itu, satu -satunya perkara yang perlu kita lakukan ialah menggunakannya untuk mengemas kini objek Raktif kita, sudah terikat pada templat. Enjin ractive.js akan melakukan yang lain, mengemas kini DOM dan memaparkan perubahan.

KESIMPULAN Selesai! Kami mempunyai papan pemuka kami "pimped". Seperti yang saya katakan dalam pengenalan, ini hanya titik permulaan.

Sekiranya anda telah mengikuti, anda kini dapat memaparkan senarai item kompleks dengan mudah, mengendalikan pemilihan item, dan berkomunikasi dengan selamat ke pelayan. Anda boleh menggunakan kemahiran ini untuk beberapa tugas lain, tidak semestinya melibatkan paparan statistik untuk komputer riba anda. Dari menunjukkan senarai restoran di sekitar pengguna untuk menghitung peralatan rumah, anda boleh mengawal semua melalui antara muka web atau telefon bimbit anda. Pilihannya adalah milik anda, dan tidak ada had. Sekiranya anda ingin memperdalam topik yang diliputi dalam artikel ini, saya cadangkan anda melihat sumber -sumber yang baik ini:

Membuat bateri menggunakan node.js: Bermula dan pelayan

• tutorial interaktif mengenai ractive.js
• jQuery $ .getjson method
• Perbincangan mengenai StackOverflow mengenai kaedah jQuery.get ()

Soalan Lazim (Soalan Lazim) dalam Membina Papan Pemuka Wi-Fi

Apakah prasyarat untuk membina papan pemuka Wi-Fi? Anda juga perlu mempunyai Node.js dan NPM (Pengurus Pakej Node) yang dipasang pada komputer anda. Jika anda tidak memasangnya, anda boleh memuat turunnya dari laman web rasmi Node.js. Di samping itu, anda memerlukan editor teks untuk menulis kod anda. Anda boleh menggunakan mana-mana editor teks pilihan anda, tetapi beberapa yang popular termasuk kod studio visual, atom, dan teks luhur.

Bagaimana saya boleh memasang modul node-wifi? Modul node-wifi menggunakan NPM, yang merupakan pengurus pakej untuk Node.js. Buka terminal anda atau command prompt dan navigasi ke direktori di mana anda ingin memasang modul. Kemudian, jalankan perintah 'NPM Pasang Node-Wifi'. Ini akan memuat turun dan memasang modul nod-wifi dalam direktori semasa anda.

Bagaimana saya boleh menyambung ke rangkaian Wi-Fi menggunakan modul node-wifi? Fungsi 'Sambung' yang boleh anda gunakan untuk menyambung ke rangkaian Wi-Fi. Anda perlu lulus objek ke fungsi ini yang mengandungi SSID dan kata laluan rangkaian. Berikut adalah contoh:

var wifi = memerlukan ('node-wifi');

wifi.connect ({ssid: 'nama rangkaian anda', kata laluan: 'kata laluan anda', fungsi (err) { if (err) { console.log (err); }

console.log ('berjaya disambungkan ke rangkaian');

});

Bagaimanakah saya boleh mengimbas rangkaian Wi-Fi yang tersedia? Fungsi ini mengembalikan pelbagai rangkaian. Setiap rangkaian adalah objek yang mengandungi maklumat seperti SSID, kekuatan isyarat, dan jenis keselamatan. Berikut adalah contoh:

var wifi = memerlukan ('node-wifi');
wifi.scan (fungsi (err, rangkaian) { if (err) { console.log (err);
}
console.log (rangkaian);
var wifi = memerlukan ('node-wifi');

wifi.disconnect (fungsi (err) { if (err) { console.log (err ); } console.log ('berjaya diputuskan dari rangkaian'); });

Bagaimana saya boleh mendapatkan status Wi-Fi semasa?

Modul Node-WiFi menyediakan fungsi 'getCurrentConnections' yang boleh anda gunakan untuk mendapatkan status Wi-Fi semasa. Fungsi ini mengembalikan pelbagai rangkaian bahawa komputer sedang disambungkan ke. Berikut adalah contoh:

var wifi = memerlukan ('node-wifi');
wifi.getCurrentConnections (fungsi (err, currentConnections) { if (err) {
console.log (err);
console.log (currentConnections);
); -Wifi Modul mengikuti corak pengendalian ralat Node.js standard. Semua fungsi mengambil panggilan balik sebagai hujah terakhir. Panggilan balik ini adalah fungsi yang mengambil dua argumen: objek ralat dan hasilnya. Jika ralat berlaku, objek ralat akan mengandungi maklumat mengenai ralat. Jika tidak, objek ralat akan menjadi batal dan hasilnya akan mengandungi hasil operasi. Modul nod-wifi direka untuk berfungsi pada Windows, MacOS, dan Linux. Walau bagaimanapun, fungsi mungkin berbeza-beza antara sistem operasi yang berbeza kerana perbezaan dalam cara mereka menguruskan rangkaian Wi-Fi. Ya, anda boleh menggunakan modul nod-wifi dengan modul Node.js lain. Sebagai contoh, anda boleh menggunakannya dengan modul Express untuk membuat pelayan web yang memaparkan rangkaian Wi-Fi yang tersedia. -Wifi Modul adalah projek sumber terbuka, dan sumbangan adalah dialu-alukan. Anda boleh menyumbang dengan melaporkan pepijat, mencadangkan ciri -ciri baru, meningkatkan dokumentasi, atau kod menulis. Untuk menyumbang, anda boleh menjalin projek di GitHub, membuat perubahan anda, dan kemudian mengemukakan permintaan tarik.

Atas ialah kandungan terperinci Cara Membina Papan Pemuka Wi-Fi Menggunakan Node.js dan Ractive.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!