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!