Steuern von Webseiten mit JavaScript und auf {x} - sitepoint

Key Takeaways

• Der Autor hat demonstriert, wie ein Android -Gerät verwendet wird, um Remote -Anweisungen an eine Live -Webseite zu senden, wobei das Beispiel für die Fernsteuerung einer HTML -Präsentation verwendet wird.
• Der verwendete Tech -Stack enthält ein Android -Gerät auf {x} App, Node.js, Express, Socket.io, Deck.js und Heroku.
• socket.io, eine JavaScript-Bibliothek, ermöglicht die Echtzeitkommunikation zwischen Servern und Clients, was für die Echtzeit-Antwort auf Signale eines Android-Geräts von entscheidender Bedeutung ist.
• Die On {x} -App, die eine JavaScript -API verfügt, ermöglicht die Steuerung eines Android -Geräts und die Antwort auf Ereignisse wie eingehende Textnachrichten, GPS -Standort, Akkulaufzeit und mehr. Dies wurde verwendet, um Serveranfragen zu senden, wenn Nudges auftritt.
• Der Autor warnt davor, dass die Methode nicht sicher ist, und empfiehlt, eine Sicherheitsebene für etwas zu allgemeines hinzuzufügen.

Ich hatte mein Telefon verloren. Ich ließ es auf einer Couch in einem Einkaufszentrum und kehrte zurück, um es weg zu finden. Jemand hatte ein neues Telefon über die schreckliche Kunst des Diebstahls geschenkt. Ich habe JavaScript Code remote über das Web an mein Telefon gesendet, das mir jedes Mal die Koordinaten des Geräts geschickt habe, wenn ich es eine SMS geschickt habe. Ich verfolgte es in ein Sizzler -Restaurant, bis sie das Telefon ausgeschaltet haben und es für immer verschwand. Ich kaufte mir ein neues Telefon, sah aber ein neues Potenzial in einer leistungsstarken App, die ich kaum benutzt hatte, bis {x}.

In diesem Artikel werde ich eine ganz andere Verwendung der App als die Horrorgeschichte meines verlorenen Telefons teilen. Ich möchte Ihnen zeigen, wie Sie mit Ihrem Android -Gerät Remote -Anweisungen an eine Live -Webseite senden können. Ich werde das Beispiel einer Fernbedienung einer HTML -Präsentation verwenden, aber die Konzepte können erweitert werden, um eine beliebige Anzahl von interessanten Dingen zu machen.

Wir werden die folgenden Tech -Techs verwenden:

an Android -Geräte
auf {x}
node.js
Express
socket.io
deck.js
Heroku

Wenn Sie kein Android -Telefon haben, mach dir keine Sorgen! Sie können theoretisch jedes andere Gerät verwenden, mit dem HTTP -Anrufe dieselbe Art von Knoten/Socket.io -Zauberei erstellen können, die wir gerade entfesseln werden. In diesem Artikel geht davon aus, dass der Leser einige Kenntnisse über Node.js und JavaScript hat. Der Quellcode wird jedoch für Ihre Referenz bereitgestellt.

Was ist Socket.io?

Bevor wir uns zu weit einlassen, werde ich erklären, was Socket.io tut, wie es in den nächsten paar Code -Snippets erscheinen wird. Socket.io ist eine JavaScript-Bibliothek, die eine Echtzeitkommunikation zwischen Servern und Clients ermöglicht. Sie können Ereignisse sowohl auf dem Server als auch auf dem Client definieren. Zum Beispiel erstellt IO.Sockets.Emit ('eventThathApped') ein neues Ereignis, auf das die Anwendung reagieren kann. Um auf das Ereignis zu reagieren, richten Sie einfach einen solchen Ereignishandler ein - Socket.on ('eventThathApped', function () {}).

Ein Chat -Programm ist eine gemeinsame Beispiel für Socket.io -Anwendung. Der Server hört auf eingehende Nachrichten von Clients zu und zeigt sie sofort auf allen Clients an, die die Chat -App ausführen. Wir werden es verwenden, um auf Signale von einem Android -Gerät sofort zu reagieren, während die Seite abgelaufen ist.

Einrichten des Servers

Die Verzeichnisstruktur dieser Demo ist in der folgenden Abbildung dargestellt. Der gesamte Server -Nebencode wird in der Haupt -JavaScript -Datei index.js gespeichert. Das Front -End -HTML, CSS und JS werden im öffentlichen Ordner gespeichert.

Die Datei package.json definiert die Abhängigkeiten und andere Meta -Informationen zur Knotenanwendung. Der Inhalt dieser Datei ist unten angezeigt. Beachten Sie, dass die Module Express und Socket.io in den Abhängigkeiten erforderlich sind.

<span>{
</span>  <span>"name": "androidremotecontrol",
</span>  <span>"version": "0.0.1",
</span>  <span>"dependencies": {
</span>    <span>"express": "3.1.x",
</span>    <span>"socket.io": "latest"
</span>  <span>},
</span>  <span>"engines": {
</span>    <span>"node": "0.10.x",
</span>    <span>"npm": "1.2.x"
</span>  <span>}
</span><span>}</span>

Da diese Demo auf Heroku gehostet werden soll, brauchen wir eine Procfile, deren Inhalt unten gezeigt ist (ziemlich einfach!).

Web: Node Index.js

Der Knotenserver

Der in index.js gespeicherte Knotenserver ist unten angezeigt.

<span>var http = require('http'),
</span>    express <span>= require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    io <span>= require('socket.io').listen(server),
</span>    port <span>= process.env.PORT || 5000;
</span>
app<span>.use(express.bodyParser());
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendfile('public/index.html');
</span><span>});
</span>
app<span>.post('/nudging', function(request<span>, response</span>) {
</span>  io<span>.sockets.emit('nudge'+ request.body.nudged);
</span>  response<span>.json({success: true});
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendfile('public/' + req.params[0]);
</span><span>});
</span>
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
io<span>.configure(function() {
</span>  io<span>.set('transports', ['xhr-polling']);
</span>  io<span>.set('polling duration', 10);
</span><span>});</span>

Die folgenden Zeilen von Index.js werden verwendet, um Socket.io zu importieren und den Port des Servers festzulegen.

io <span>= require("socket.io").listen(server),
</span>port <span>= process.env.PORT || 5000;</span>

Damit Socket.io an Heroku arbeitet, musste ich diese zusätzlichen Zeilen hinzufügen, um das XHR-Wacken zu konfigurieren, anstatt mich auf Websockets zu verlassen (Sie benötigen diese möglicherweise nicht für Ihre Umgebung). Diese Zeilen fordern den Server an, 10 Sekunden lang zu warten, bevor sie mit einer leeren Antwort beantwortet werden, wenn er keine spezifische Antwort auf eine GET- oder Post -Anforderung gibt.

io<span>.configure(function () {
</span>  io<span>.set("transports", ["xhr-polling"]);
</span>  io<span>.set("polling duration", 10);
</span><span>});</span>

Kontrolle der Präsentationsfolien

Diese Demo verwendet Deck.js, ersetzt jedoch gerne eine andere HTML -Präsentationsvorlage, solange sie einen JS -Aufruf zwischen den Folien hat. Für Deck.js laden Sie es einfach herunter und entpacken Sie es in den öffentlichen Ordner.

Die wichtigste Route auf dem Knotenserver ist die Postanforderung, mit der wir mit unseren Präsentationsfolien interagieren können. Diese Route ist unten gezeigt.

app<span>.post('/nudging', function(request<span>, response</span>) {
</span>  io<span>.sockets.emit('nudge'+ request.body.nudged);
</span>  response<span>.json({success: true});
</span><span>});</span>

Der vorherige Code ruft io.sockets.emit ('nudgeleft') oder io.sockets.emit ('nudgeright') ab, abhängig von den mit der Anfrage gesendeten JSON -Daten. Ein wichtiger Punkt hier ist, dass die Route mit JSON reagiert. Wenn Sie dies nicht tun, werden Ihre Anfragen im Sitzen des Servers einzeitübergreifend auf eine Antwort warten. An diesem Punkt können Sie den Server lokal ausführen oder ihn zur Bereitstellung nach Heroku schieben.

konfigurieren socket.io

Zusätzliches JavaScript wurde zur Präsentation in öffentlich/js/magic.js hinzugefügt, wie unten gezeigt:

<span>(function() {
</span>  <span>var socket = io.connect(window.location.hostname);
</span>
  socket<span>.on('nudgeleft', function() {
</span>    $<span>.deck('next');
</span>  <span>});
</span>
  socket<span>.on('nudgeright', function() {
</span>    $<span>.deck('prev');
</span>  <span>});
</span><span>}());</span>

Die erste Zeile stellt eine Verbindung zu unserem Socket.io -Server unter window.location.hostname her. Für die Zwecke dieser Demo werden wir es einfach halten und alles auf einer Domäne haben. Die beiden Event -Handler hören auf eine Anfrage, um die Folien links oder rechts zu stupsen. Wenn es diese bemerkt, führen wir Deck.js 'vor oder die nächsten Funktionen aus, um die Folien zu verschieben.

Die auf {x} geheime Sauce

auf {x} ist eine Android -Anwendung, mit der Sie Ihr Android -Gerät steuern und auf Ereignisse wie eingehende Textnachrichten, GPS -Standort, Akkulaufzeit und mehr über eine JavaScript -API reagieren können. In dieser Demo werden wir diese Serveranfragen anwenden, wenn Nudges auftritt.

Erste Schritte mit {x}

1. Laden Sie die App auf Ihr Gerät herunter: https://www.onx.ms/#!downloadapppage.
2. Gehen Sie in Ihrem Desktop -Browser zu https://www.onx.ms zu https://www.onx.ms und melden Sie sich mit Ihrem Facebook -Konto an {x} an auf {x}).
3. Sie werden zum Dashboard von {x} gebracht. Sie können zu Rezepten gehen, um aufregende Codeausschnitte zu erkunden, die bereits verfügbar sind, wenn Sie interessiert sind. Wir werden uns jedoch für dieses Tutorial direkt mit benutzerdefinierten Code befassen.
4. Klicken Sie auf den Link Code schreiben in der oberen linken Ecke der Seite, um den Code -Editor aufzurufen.
5. Lassen Sie das Fenster geöffnet, wir werden dort einen Code hinzufügen.

codieren auf {x}

, wie oben erwähnt, hat auf {x} eine JavaScript -API, mit der Sie viele Ereignisse auf Ihrem Android -Gerät anrufen und erkennen können. Für diese Demo konzentrieren wir uns hauptsächlich auf das Gerät.stures.on -Methode.

Das erste, was zu tun ist, ist, mit dem Code -Editor, der in {x} geöffnet ist, zu diesem Fenster zurückzukehren, und Sie werden "Regelname" sehen, dies in etwas freundlicheres wie "Nudge -Präsentationskontrolle" umbenennen. Mein auf {x} Code ist unten angezeigt. Beachten Sie, dass Sie http://androidremotecontrol.herokuapp.com durch Ihren eigenen Server ersetzen möchten.

<span>{
</span>  <span>"name": "androidremotecontrol",
</span>  <span>"version": "0.0.1",
</span>  <span>"dependencies": {
</span>    <span>"express": "3.1.x",
</span>    <span>"socket.io": "latest"
</span>  <span>},
</span>  <span>"engines": {
</span>    <span>"node": "0.10.x",
</span>    <span>"npm": "1.2.x"
</span>  <span>}
</span><span>}</span>

Das Gerät.Ustures.On -Komponente wird zum Einrichten von Ereignishandlern verwendet. Jedes Mal auf {x} erkennt ein NudgeLeft -Handler nach links. Wir haben eine Codezeile, in der im Grunde genommen eine Benachrichtigung auf Ihrem Telefon angezeigt wird, die zeigt, dass das Telefon nach links gestoßen wurde. Sie brauchen das nicht, aber ich benutze es zum Testen, um sicherzustellen, dass ein Schubs festgestellt wurde. Diese Codezeile ist unten angezeigt.

<span>var http = require('http'),
</span>    express <span>= require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    io <span>= require('socket.io').listen(server),
</span>    port <span>= process.env.PORT || 5000;
</span>
app<span>.use(express.bodyParser());
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendfile('public/index.html');
</span><span>});
</span>
app<span>.post('/nudging', function(request<span>, response</span>) {
</span>  io<span>.sockets.emit('nudge'+ request.body.nudged);
</span>  response<span>.json({success: true});
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendfile('public/' + req.params[0]);
</span><span>});
</span>
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
io<span>.configure(function() {
</span>  io<span>.set('transports', ['xhr-polling']);
</span>  io<span>.set('polling duration', 10);
</span><span>});</span>

Als nächstes verwenden wir auf der Methode von {x}. Beachten Sie, dass der Datentyp explizit als JSON definiert ist. Ohne dies werden die Daten nicht ordnungsgemäß gesendet.

Derzeit wird die Onsuccess -Rückruffunktion nur verwendet, um zu protokollieren, dass die HTTP -Antwort erfolgreich war. Dies kartiert auf die Antwort.json ({Erfolg: true}) Wir haben früher auf dem Knotenserver festgelegt. Sie können diesen Erfolgsaufruf mehr hinzufügen, um auf {x} mit mehr Daten bereitzustellen, wenn Sie sich so geneigt haben. In ähnlicher Weise wird der OnError -Rückruf verwendet, um alle aufgetretenen Fehler zu protokollieren.

Als nächstes schalten wir die Erkennung für diese Gesten für 900.000 Millisekunden ein. Dies wird ausgeführt, wenn Sie den Code auf Ihrem Gerät zum ersten Mal aktivieren. Wahrscheinlich möchten Sie, dass dieser Code länger als 900.000 Millisekunden ausgeführt wird. Die Art und Weise, wie ich es derzeit persönlich eingerichtet habe, besteht darin, dies jedes Mal einzuschalten, wenn der Bildschirm des Geräts eingeht. Wenn Sie also Ihre Folien steuern möchten, schalten Sie einfach Ihren Bildschirm ein und Sie haben 900 Sekunden Zeit, um wild zu werden. Nach dem, was ich während der Entwicklung gefunden habe, müssen Sie dieser Funktion eine zeitliche Begrenzung anbieten. Wenn Sie einen anderen Weg finden, lassen Sie es mich bitte in den Kommentaren wissen. Ich würde es gerne aktualisieren.

Sobald Sie den Code so aktualisiert haben, dass er Ihrer Serveradresse entspricht, klicken Sie auf "Speichern und an das Telefon senden", damit sie über das Web an Ihr Telefon gesendet werden. Öffnen Sie von dort aus Ihre URL mit der Präsentation, schalten Sie den Bildschirm Ihres Android -Geräts ein und versuchen Sie nach links und rechts. Wenn alles gut lief, werden Sie sehen, wie Ihre Folien hin und her wechseln!

Anzeigen auf {x} Protokolls

Wenn Sie Protokolldateien für {x} anzeigen möchten, können Sie die App auf Ihrem Android -Telefon öffnen, die von Ihnen hinzugefügte Regel auswählen und "Protokolle anzeigen" auswählen. Alternativ können Sie sie auf der Website auf {x} sehen, wenn Sie angemeldet sind, indem Sie auf die Seite Ihrer Regeln gehen, die Regel auswählen und auf die Registerkarte "Protokolle" klicken.

Was ist mit Sicherheit?

Diese Methode ist in keiner Weise sicher. Wenn jemand anderes die Adresse Ihrer Präsentation und die von Ihnen gesendete Post -Anfrage herausarbeitet, können Sie Ihre Folien einfach von überall auf der ganzen Welt wechseln. Für diese und alle anderen Ideen, die Sie in Bezug auf Socket.io und auf {x} überlegen, denken Sie daran, dass Sie irgendwo eine Sicherheitsebene für etwas zu allgemeines Hinzufügen hinzufügen möchten.

Schlussfolgerung

Die Idee hinter dieser Demo besteht darin, zu zeigen, dass Sie mit JavaScript, Socket.io und einer ziemlich raffinierten Android -App mit Ihrem Telefon die Webseiten auf verschiedene Weise beeinflussen können. Durch die links und rechte Präsentation in Flicking ist nur der Anfang. Sie können ändern, was eine Webseite basierend auf Ihrem Standort anzeigt, unabhängig davon, ob eine App ausgeführt wird, wenn Ihr Akku ausgeht usw. Wenn Sie ein kleines Experiment mit {x} und Socket.io erstellen, i ' Ich liebe es, davon zu hören. Geh hervor und codieren etwas!

Der Code

Der gesamte Code für diese Demo ist auf GitHub erhältlich. Meine laufende Version ist auch auf Heroku verfügbar.

häufig gestellte Fragen (FAQs) zur Steuerung von Webseiten mit JavaScript

Welche Rolle spielt JavaScript bei der Kontrolle von Webseiten? Es handelt sich um eine Programmiersprache, mit der Sie komplexe Funktionen auf Webseiten implementieren können. Wenn eine Webseite statisch ist, d. H. Anhand von statischen Informationen, kann JavaScript verwendet werden, um die Seite interaktiver zu gestalten. Es kann auf Benutzeraktionen reagieren, dynamische Inhalte erstellen, Multimedia steuern, Bilder animieren und vieles mehr. JavaScript wird auf dem Computer des Benutzers ausgeführt, wodurch die Seite schneller geladen wird und die Last auf dem Server reduziert wird. Das -Tag oder verlinkt extern mit dem SRC -Attribut im <script> -Tag. Das Skript kann in den Kopf- oder Körperabschnitten Ihres HTML -Dokuments platziert werden. Es wird jedoch im Allgemeinen empfohlen, Skripte am unteren Rand des Körpers zu platzieren, um zu verhindern, dass das Rendern der Seite blockiert wird. JavaScript steuert eine Webseite? Zum Beispiel kann es den Inhalt und den Stil von HTML-Elementen ändern, Formaten validieren, bevor sie an einen Server übermittelt werden, Cookies manipulieren, Pop-up-Fenster erstellen und vieles mehr. JavaScript kann auch verwendet werden, um komplexe Anwendungen wie Online -Spiele, interaktive Karten und 2D/3D -Grafiken zu erstellen. Erstellen Sie dynamische und interaktive Webseiten. HTML wird für die Struktur der Webseite, CSS für das Styling und JavaScript für die Funktionalität verwendet. JavaScript kann auf alle Elemente und Attribute in einem HTML -Dokument zugreifen und sie ändern. Es kann auch alle CSS -Stile in einer Webseite ändern. </script>

Kann ich JavaScript ohne vorherige Programmierkenntnisse lernen? Es ist jedoch vorteilhaft, ein grundlegendes Verständnis von HTML und CSS zu haben, da sie mit JavaScript zusammenarbeiten, um interaktive Webseiten zu erstellen. Es gibt viele online verfügbare Ressourcen, einschließlich Tutorials, Videos und interaktiven Codierungsplattformen, um JavaScript von Grund auf neu zu lernen.

Wird JavaScript nur für die Webentwicklung verwendet? Für die Webentwicklung ist die Verwendung nicht darauf beschränkt. Es kann auch für die serverseitige Programmierung mithilfe von node.js, für die Entwicklung mobiler Apps mit Frameworks wie React Native und Ionic sowie für das Erstellen von Desktop-Anwendungen mit Frameworks wie Elektronen verwendet werden.

.

.

Wie sicher ist JavaScript? Es ist wichtig, Best Practices für eine sichere Codierung zu befolgen, um potenzielle Sicherheitsprobleme zu verhindern. Dazu gehören die Validierung und Desinfektion der Benutzereingaben, die Vermeidung der Verwendung von Eval () und regelmäßig Aktualisierung und Überprüfung Ihres Code Zum Erstellen von Animationen auf einer Webseite verwendet werden. Es kann die CSS -Eigenschaften von HTML -Elementen im Laufe der Zeit ändern und den Effekt der Animation erzeugen. JavaScript liefert auch die RequestAnimationFrame-Methode, die speziell zum Erstellen von reibungslosen, browseroptimierten Animationen entwickelt wurde. Eine Programmierschnittstelle für HTML- und XML -Dokumente. Es repräsentiert die Struktur eines Dokuments und ermöglicht Programmiersprachen wie JavaScript, den Inhalt, die Struktur und den Stil des Dokuments zu manipulieren. des Versuchs, fangen und schließlich Aussagen. Der Try -Block enthält den Code, der möglicherweise einen Fehler werfen kann, der Fangblock mit dem Fehler umgeht und der schließlich Code enthält, der unabhängig von einem Fehler ausgeführt wird oder nicht.

Das obige ist der detaillierte Inhalt vonSteuern von Webseiten mit JavaScript und auf {x} - sitepoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!