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:
Was ist Socket.io?
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.
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.jsDer 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>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.
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.
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.
, 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
Was ist mit Sicherheit?
Schlussfolgerung
Der Code
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.
.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
