So erstellen Sie ein Wi-Fi-Dashboard mit node.js und ractive.js

Key Takeaways

• Verwenden Sie Node.js, um einen Server zu erstellen, der vorhandene Funktionen auf Wi-Fi-Netzwerkinformationen erweitert, wodurch das Dashboard umfassender wird.
• Implementieren Sie Ractive.js für die Client-Seite, um Echtzeit-Updates und -interaktionen effizienter zu verwalten und die Benutzererfahrung mit dynamischen Inhaltsaktualisierungen zu verbessern.
• Process Wi-Fi-Befehlsausgänge auf dem Server zum Extrahieren und Anzeigen der verfügbaren Netzwerkdetails und Sicherstellen, dass die Daten strukturiert und für die clientseitige Verwendung bereit sind.
• Entwerfen und Verwenden von HTML-Vorlagen mit Ractive.js, um Wi-Fi-Netzwerkdaten anzuzeigen und interaktive und reaktionsschnelle Webelemente zu ermöglichen, die die Navigation und Benutzerfreundlichkeit verbessern.
• Erweitern Sie die Funktionen des Dashboards, indem Sie neue Endpunkte hinzufügen und AJAX -Aufrufe effektiv behandeln, um sicherzustellen, dass das Dashboard skalierbar und wartbar bleibt.

Dieser Artikel wurde von Marc Towler Peer überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, die SitePoint -Inhalte so gut wie möglich gemacht haben! In den letzten Monaten habe ich eine Mini-Serie über Dashboards veröffentlicht. In dem ersten Artikel mit dem Titel "Erstellen eines Akku -Viz mit node.js: Erste Start und Server" habe ich gezeigt, wie Sie einen Node.js -Server erstellen, der den Batteriestatus auf einem Laptop überprüft und einige nützliche Informationen zurückgegeben hat. In der zweiten, deren Titel "Erstellen eines Akkus mit node.js: client" war, habe ich erklärt, wie man eine Webanwendung erstellt, um diese Informationen auf eine schönere und benutzerfreundliche Weise zu visualisieren. In diesem Artikel werden wir auf diesem Dashboard erstellen und Informationen zu verfügbaren Wi-Fi-Netzwerken hinzufügen. Eine Liste der verfügbaren Netzwerke wird mit einer Zusammenfassung der relevantesten Details (Name, Adresse, geschützt vs. offen usw.) und bei Auswahl werden weitere Details des Netzwerks in einem anderen Panel angezeigt. Werfen Sie einen Blick auf unser Ziel: Wenn Sie möchten, können Sie es als Ausgangspunkt betrachten. Ich empfehle Ihnen dringend, es anzupassen, da dies der beste Weg ist, um Ihre Fähigkeiten mit den Technologien zu verbessern, die wir verwenden werden.

Server

Auf der Serverseite werden wir wiederverwenden und erweitern, was wir für den Akku erstellt haben. In diesem Tutorial konzentrieren wir uns auf Ubuntu, aber der Servercode ist so strukturiert, dass Sie nur ein paar Adapter schreiben müssen, um Mac- oder Windows -Maschinen zu unterstützen.

Bash -Befehl

Zu Beginn erweitern wir die ursprüngliche Konfigurationsmethode, indem wir Befehle und Rückrufe für den neuen Endpunkt hinzufügen. Es waren einige Umbenennen erforderlich, um Zusammenstöße mit Befehlen für das Batterie -Widget zu vermeiden.

<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>

Ausgabe des Verarbeitungsbefehls

Die Art und Weise, wie wir die Befehlsausgabe verarbeiten, ähnelt wirklich dem, was wir bereits für den Akku getan haben. Wir gehen die Ausgangslinie nach Leitung durch und verarbeiten sie, um aus unseren Messwerten aussagekräftige Parameter zu extrahieren. Aber in diesem Fall erhalten wir Lesungen über eine Liste von Elementen, nicht über eine einzige! Wir müssen also identifizieren, wann ein neues Element tatsächlich in der Ausgabe startet, und für jedes Element ein neues Objekt erstellen. Anschließend filtern wir gültige Zeilen und fügen die Eigenschaften hinzu, die wir in unserem aktuellen Element lesen.

<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>

Bevor Sie detailliert sehen, was im Inneren processWifilinLinux passiert, lassen Sie mich einige Punkte hervorheben:

• Da wir unserem Hash nur dann eine Zelle hinzufügen, wenn die Beschreibung des nächsten Starts beginnt, würden wir sonst die endgültige If -Anweisung verpassen (um das letzte Netzwerk in der Ausgabe zu erfassen).
Der obige Code geht davon aus, dass zwei Zellen nicht denselben Namen teilen können. Dies ist eine angemessene Annahme, da Netzwerke nicht mit ihrem Namen indiziert werden (diese Informationen werden vom Feld ESSID erfasst). Sie werden aufgelistet und haben eine progressive Kennung
• "Cell 0x" zugewiesen.
• Das Letzte, was wir vor dem Speichern von Eigenschaften tun, ist ein Aufruf von MapWiKeysforlinux und in diesem Fall einfach die Tasten unverändert zurückgeben.

Sogar die Funktion, die jede Zeile verarbeitet, ist dem, was wir für den Akku erstellt haben Die verbleibenden Linien haben sie einfach geteilt und das Schlüsselwertpaar angemessen gespeichert.

<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>

Diese Diskussion ist die perfekte Chance, Ihnen einen ordentlichen Trick zu zeigen, den ich kürzlich von einem anderen Ingenieur "ausgeliehen" habe. Dadurch können wir eine Switch -Anweisung anstelle einer Kette von If -Elsen verwenden.

Endpunkt

Das Hinzufügen des neuen Endpunkts zu unserem Server ist dank des HHTP -Moduls von Node und den Helfermethoden, die wir im vorherigen Tutorial erstellt haben, trivial. Wir müssen nur den regulären Ausdruck für die Pfade definieren, auf die wir antworten möchten, und dem Server -Rückruf eine IF -Anweisung hinzufügen, die auf eingehenden Anforderungen ausgelöst wird:

<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>

Zu diesem Zeitpunkt müssen wir nur einen Rückruf erstellen, der den Befehl ausführt, seine Ausgabe transformiert und schließlich das JSON -Ergebnis an den Client sendet, der in die von HTTP.CreateServer bereitgestellte HTTP -Antwort eingewickelt ist.

<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>

Beachten Sie für den letzten Schritt, dass wir die Onsuccess -Funktion wiederverwendet haben, die wir für den Batterieendpunkt bequem definiert hatten (gleiche Sache für den Onerror -Handler).

Client

Lassen Sie mich Ihnen nun den lustigsten Teil dieses Beispiels vorstellen. Wir werden massiv ractive.js für den Web -Client verwenden. Es handelt oder Lenker). Die Spannung der Vorlagen (sogar mehr als AngularJs, viel mehr als Reakt aktualisiert, wenn sich die Daten ändern. Wir werden unser Dashboard zwei Panels hinzufügen:

• Eine für die Liste der Netzwerke in unserer Umgebung (Zeigt eine kurze Zusammenfassung für jedes Element an).
• Ein anderer, der erst dann angezeigt wird, sobald ein Netzwerk ausgewählt ist, und detaillierte Informationen für diese Wi-Fi-Verbindung anzeigt.

Vorlage

Beginnen wir zunächst die HTML -Vorlagen, um unsere Daten anzuzeigen, und dann werden wir sehen, wie die Daten des Servers an sie binden.

Wi-Fi-Liste

Die komplexeste Vorlage, die wir benötigen, ist die Liste der verfügbaren Netzwerke. Das erste Dutzend Zeilen definiert nur das Containerfeld und verwenden die Bindung von Ractive.js, um eine Symbolwarnung von Serverfehlern und eine Schaltfläche zum Pause/Lebenslauf -Serverabfragen zu zeigen:

<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>

Der Doppelstache {{}}, wie in Schnurrbart und Lenker, Marker für dynamisch injizierte Inhalte. Ractive.js ermöglicht es uns, Ausdrücke zu verwenden und Funktionen in den Klammern auszuführen, solange diese Funktionen und die verwendeten Daten global verfügbar sind (z. Vorlage. Das Ergebnis des Ausdrucks in den Klammern wird entkommen, daher wird es einfacher Text sein. Aber manchmal müssen Sie möglicherweise nur wenige HTML -Zeilen zu Ihren Elementen hinzufügen. Es gibt eine alternative Möglichkeit, dies zu tun, aber wenn Sie wirklich glauben, dass Sie es brauchen, können Sie den Triple-Stache {{{}}} verwenden. Die Verwendung von Triple-Stache ist sicher, da die Skripte entkommen und nicht ausgeführt werden, aber langsamer als Doppelstachen. Sie sollten also versuchen, es so weit wie möglich zu vermeiden.
Der zweite Teil der Vorlage ist viel interessanter. Wir iterieren durch die Liste der Netzwerke mit {{#wifinetworks: num}}Erfassen des Index jedes Elements in der Num -Variablen. Für jedes Element in der Liste fügen wir einen Rückrufklick (siehe unten) hinzu und zeigen eine Zusammenfassung der Werte an. Beachten Sie, wie Abschluss -Tags nicht mit den Eröffnungs -Tags -Text übereinstimmen müssen:

<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>

Das Öffnen ist ein If -Tag, dessen Zustand eine Funktion ist, die es seltsam machen würde, es im Schluss noch einmal zu laufen. So können wir eine aussagekräftige Nachricht verwenden, um die beiden Tags zu kombinieren, nur um Willens willen.

Ausgewählte Wi-Fi-Details

<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>

Das Panel für die Details des Netzwerks ist recht einfach: Wir zeigen es nur, wenn wir dem Feld SelectedNetwork in unserem raktiven Objekt einen Wert zugewiesen haben. Anschließend zeigen wir den Namen des Netzwerks (das ESSID-Feld) und alle Schlüsselwertpaare, die wir vom Server erhalten haben. Dies soll die niedrigstmögliche Kopplung erhalten, aber Sie können sie natürlich ändern, um einige Informationen hervorzuheben oder sie auf sinnvollere Weise anzuzeigen.

JavaScript

Wir werden einen Polling -Daemon einrichten, der den Server in bestimmten Zeiten asynchron abfragt. Jeder AJAX-Anruf enthält die aktualisierte Liste der Wi-Fi-Netzwerke. Alles, was wir tun müssen, wenn wir eine JSON -Antwort vom Server erhalten, ist zu bestätigen, dass wir eine erfolgreiche Antwort erhalten und die Felder aktualisieren, in denen wir die Liste der Netzwerke im raktiven Objekt speichern.

Setup

Wie wir im vorherigen Artikel gezeigt haben, müssen wir nur ein neues raktives Objekt erstellen, sie mit der ID der Vorlage (#meterviztemplate unten) und den Zieldomelementen, d. H. Der Knoten Das wird das Elternteil der Vorlage im DOM -Baum (Panels unten). Dann müssen wir nur alle Objekte oder Werte hinzufügen, die wir in der Vorlage als Felder von Ractive.data verwenden möchten. Dies kann bei der Initialisierung (wie unten) oder später unter Verwendung von Ractive.set () erfolgen.

<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

Wir werden den gleichen Mechanismus für den Daemon verwenden und den Server wie für den Akku pausieren/neu starten. Aus Gründen der Kürze werden wir es hier nicht wiederholen, aber wenn Sie dieses Thema vertiefen möchten, können Sie sich diesen Artikel oder das Github -Repository ansehen.

ajax ruft

auf Das einzige, was unser neuer Daemon tut, ist, einen Ajax -Anruf zu tätigen und dann unsere Daten im Falle eines Erfolgs oder der Feldsignal -Netzwerkprobleme im Falle von Fehlern zu aktualisieren.

<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>

Wir sollten auch überprüfen, ob die von uns erhaltene JSON -Datei gut formatiert ist. Wir müssen uns keine Sorgen um die Skriptinjektion machen, da Ractive.js bereits den Feldwerten entgeht, bevor sie sie zum DOM hinzufügen. Es ist erwähnenswert, dass die oben verwendete JQuery.getJson () -Methode, die eine Abkürzung für die $ .ajax () -Methode wäre, sicher ist, solange: 1. Sie geben nicht die Zeichenfolge 'Callback =' in Ihre URL ein (die es ermöglichen würde, dass der JSON -Code ausgeführt wird).
2. Sie können dem Server, den Sie anrufen, vertrauen. Da wir keinen von Benutzer bereitgestellten Inhalten für die URL verwenden, würde man denken, dass dies kein Problem sein sollte. Wenn unser Server jedoch kompromittiert werden würde, hätten wir kein Hindernis, um uns vor injiziertem Code zu schützen. Wenn ein expliziter "Datentyp" -Header nicht festgelegt ist, wird JQuery versucht, den Inhalt der Antwort aus der Antwort zu erraten, und eine Antwort von einem böswilligen Server kann JavaScript -Code enthalten. Obwohl diese Möglichkeit nicht so häufig ist, können wir sie nicht vollständig ausschließen. Aus diesem Grund ist es keine schlechte Idee, eine zusätzliche Schutzebene zum Preis von etwas mehr Schreibart hinzuzufügen.

Aktualisieren des Dashboard

Das relevanteste Add-On für diesen Schritt ist, dass wir auf Klicks auf die Liste antworten und Details für das ausgewählte Netzwerk anzeigen:

<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>

Zu diesem Zweck definieren wir einen ad-hoc -Event-Handler. Wie oben erwähnt, wird es aufgerufen, wenn wir auf einen beliebigen Listeneintrag klicken, und dann wird das mit dem Klick zugeordnete Ereignis Informationen über das ausgewählte Netzwerk selbst enthält. Wenn wir nun nicht ractive.js verwenden würden, müssen wir nur JQuery verwenden, wir müssten: rufen Sie eine Methode auf, die die ID des ausgewählten Netzwerks annehmen würde.

• Verwenden Sie es, um das Netzwerkobjekt für diese ID zu finden (wahrscheinlich in einem Wörterbuch gespeichert);
• Finden Sie das DOM -Element für das "ausgewählte Netzwerkbereich";
• Entfernen Sie den alten DOM-Baum im Feld und erstellen Sie iterativ eine neue Liste, in der die Schlüsselwerte Assoziationen angezeigt werden. Mischen Sie viele HTML-Zeichenfolgen in unserem JavaScript-Code.
• Ractive.js wird sich für uns um all dies kümmern, und es wird es besser machen als wir (im Durchschnitt) und nur den kleinstmöglichen DOM -Subtree ändern. Zunächst wird das an den On-Click-Handler gesendete Ereignisobjekt über ein Kontextfeld verfügen, das die an das DOM-Element gebundenen Daten enthält. Mit anderen Worten, wir erhalten das Netzwerkdatenobjekt „kostenlos“. Sobald wir das haben, müssen wir es nur verwenden, um unser raktives Objekt zu aktualisieren, das bereits an die Vorlage gebunden ist. Ractive.js 'Engine erstellt den Rest, aktualisiert das DOM und zeigt die Änderungen an.
Schlussfolgerungen

Fertig! Wir haben unser Dashboard "Pimped". Wie ich in der Einführung sagte, ist dies nur ein Ausgangspunkt.

Wenn Sie nachgefolgt sind, sollten Sie jetzt in der Lage sein, Listen komplexer Elemente anzunehmen, die Elementauswahl zu handhaben und sicher mit dem Server zu kommunizieren. Sie können diese Fähigkeiten für eine Reihe anderer Aufgaben nutzen und nicht unbedingt mit der Anzeige von Statistiken für Ihren Laptop einbeziehen. Von der Anzeige einer Liste von Restaurants rund um den Benutzer bis hin zur Aufzählung von Haushaltsgeräten können Sie über eine Weboberfläche oder Ihr Handy kontrollieren. Die Wahl liegt bei Ihnen und es gibt keine Begrenzung. Wenn Sie die in diesem Artikel behandelten Themen vertiefen möchten, empfehle ich Ihnen, sich diese guten Ressourcen anzusehen:

Erstellen eines Akku -Vizs mit node.js: Erste Schritte und Server

• Interaktives Tutorial über Ractive.js
• jQuery $ .getJson -Methode
• Diskussion über Stackoverflow über jQuery.get () Methode

häufig gestellte Fragen (FAQs) zum Erstellen eines Wi-Fi-Dashboards

Was sind die Voraussetzungen für den Bau eines Wi-Fi-Dashboards? Auf Ihrem Computer müssen Sie auch Node.js und NPM (Node Package Manager) installiert haben. Wenn Sie diese nicht installiert haben, können Sie sie von der offiziellen Node.js -Website herunterladen. Darüber hinaus benötigen Sie einen Texteditor, um Ihren Code zu schreiben. Sie können einen Texteditor Ihrer Wahl verwenden, aber einige beliebte umfassen Visual Studio-Code, Atom und Sublime Text.

Wie kann ich das Knoten-WiFi-Modul installieren? Das Node-Wifi-Modul mit NPM, der ein Paketmanager für node.js. Öffnen Sie Ihr Terminal oder die Eingabeaufforderung und navigieren Sie zum Verzeichnis, in dem Sie das Modul installieren möchten. Führen Sie dann den Befehl „NPM an, Knoten-WiFi“ aus. Dadurch wird das Knoten-WIFI-Modul in Ihrem aktuellen Verzeichnis heruntergeladen und installiert. Eine "Verbindungs" -Funktion, mit der Sie eine Verbindung zu einem Wi-Fi-Netzwerk herstellen können. Sie müssen ein Objekt an diese Funktion übergeben, das die SSID und das Kennwort des Netzwerks enthält. Hier ist ein Beispiel:

var wifi = required ('node-wifi'); {

if (err) {

console.log (err);

}

console.log ('erfolgreich mit dem Netzwerk verbunden'); > Wie kann ich nach verfügbaren Wi-Fi-Netzwerken scannen? Diese Funktion gibt eine Reihe von Netzwerken zurück. Jedes Netzwerk ist ein Objekt, das Informationen wie SSID, Signalstärke und Sicherheitstyp enthält. Hier ist ein Beispiel:

var wifi = require ('node-wifi'); (err);
}
console.log (netzwerke); Das WiFi-Modul bietet eine "Trennung" -Funktion, mit der Sie die Verbindung von einem Wi-Fi-Netzwerk trennen können. Sie müssen keine Argumente an diese Funktion übergeben. Hier ist ein Beispiel:

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

Wie kann ich den aktuellen Wi-Fi-Status erhalten? Diese Funktion gibt eine Reihe von Netzwerken zurück, an die der Computer derzeit angeschlossen ist. Hier ist ein Beispiel:

var wifi = require ('node-wifi'); (err); -WIFI -Modul folgt dem Standard -Node.js -Fehlerbehandlungsmuster. Alle Funktionen nehmen einen Rückruf als das letzte Argument ab. Dieser Rückruf ist eine Funktion, die zwei Argumente nimmt: ein Fehlerobjekt und das Ergebnis. Wenn ein Fehler auftritt, enthält das Fehlerobjekt Informationen über den Fehler. Andernfalls ist das Fehlerobjekt null und das Ergebnis enthält das Ergebnis des Vorgangs. Das Knoten-WiFi-Modul ist so konzipiert, dass sie unter Windows, MacOS und Linux funktionieren. Die Funktionalität kann jedoch zwischen verschiedenen Betriebssystemen aufgrund von Unterschieden in der Verwaltung von Wi-Fi-Netzwerken geringfügig variieren. Ja, Sie können das Node-WiFi-Modul mit anderen Node.js-Modulen verwenden. Sie können es beispielsweise mit dem Express-Modul verwenden, um einen Webserver zu erstellen, auf dem die verfügbaren Wi-Fi-Netzwerke angezeigt werden. -WIFI-Modul ist ein Open-Source-Projekt, und Beiträge sind willkommen. Sie können einen Beitrag leisten, indem Sie Fehler melden, neue Funktionen vorschlagen, die Dokumentation verbessern oder Code schreiben. Um einen Beitrag zu leisten, können Sie das Projekt auf GitHub aufgeben, Ihre Änderungen vornehmen und dann eine Pull -Anfrage einreichen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Wi-Fi-Dashboard mit node.js und ractive.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!