Les plats clés

• L'auteur a démontré comment utiliser un appareil Android pour envoyer des instructions distantes à une page Web en direct, en utilisant l'exemple de contr?ler à distance une présentation HTML.
• La pile technologique utilisée comprend un appareil Android, sur {x} app, node.js, express, socket.io, deck.js et heroku.
• Socket.io, une bibliothèque JavaScript, permet une communication en temps réel entre les serveurs et les clients, ce qui est crucial pour la réponse en temps réel aux signaux d'un appareil Android.
• L'application ON {x}, qui a une API JavaScript, permet le contr?le d'un appareil Android et une réponse à des événements tels que les messages texte entrants, l'emplacement GPS, la durée de vie de la batterie, etc. Ceci a été utilisé pour envoyer des demandes de serveur lorsque des coups de pouce se produisent.
• L'auteur avertit que la méthode n'est pas sécurisée et recommande d'ajouter une couche de sécurité pour quelque chose de trop générique.

J'avais perdu mon téléphone. Je l'ai laissé sur un canapé dans un centre commercial et je suis retourné pour le retrouver. Quelqu'un avait re?u un nouveau téléphone via l'art horrible de voler. J'ai envoyé du code JavaScript à distance à mon téléphone sur le Web qui m'a envoyé les coordonnées de l'appareil chaque fois que je l'ai envoyé par SMS. Je l'ai suivi dans un restaurant Sizzler jusqu'à ce qu'ils éteignent le téléphone et qu'il ait disparu pour toujours. Je me suis acheté un nouveau téléphone mais j'ai vu un nouveau potentiel dans une application puissante que j'avais à peine utilisée jusqu'à ce que ce point appelle {x}.

Dans cet article, je partagerai une utilisation très différente de l'application par rapport à l'histoire d'horreur de mon téléphone perdu. Je voudrais vous montrer comment vous pouvez utiliser votre appareil Android pour envoyer des instructions distantes à une page Web en direct. J'utiliserai l'exemple de la télécommande d'une présentation HTML, mais les concepts peuvent être étendus pour faire n'importe quel nombre de choses intéressantes.

Nous utiliserons les bits de technologie suivants:

• un périphérique Android
• sur {x}
• node.js
• Express
• socket.io
• deck.js
• HEROKU

Si vous n'avez pas de téléphone Android, ne vous inquiétez pas! Vous pouvez théoriquement utiliser tout autre appareil qui peut faire des appels HTTP pour fonctionner le même type de n?ud / socket.io Sorcery que nous allons décha?ner. Cet article suppose que le lecteur a une certaine connaissance de Node.js et JavaScript, mais le code source est fourni pour votre référence.

Qu'est-ce que Socket.io?

Avant d'y arriver trop loin, je vais expliquer ce que fait Socket.io, car il appara?tra dans les extraits d'extraits de code suivants. Socket.io est une bibliothèque JavaScript permettant une communication en temps réel entre les serveurs et les clients. Il vous permet de définir des événements sur le serveur et le client. Par exemple, io.sockets.emit ('Eventthathappened') crée un nouvel événement auquel l'application peut réagir. Pour réagir à l'événement, configurez simplement un gestionnaire d'événements comme celui-ci - socket.on ('eventthathappened', function () {}).

Un programme de chat est un exemple courant Socket.io Application. Le serveur écoute les messages entrants de tous les clients et les affiche instantanément sur tous les clients exécutant l'application de chat. Nous l'utiliserons pour répondre instantanément aux signaux d'un appareil Android pendant que la page est en hausse.

Configuration du serveur

La structure du répertoire de cette démo est illustrée à la figure suivante. Tout le code c?té serveur est stocké dans le fichier JavaScript principal, index.js. Les HTML, CSS et JS frontaux sont stockés dans le dossier public.

Le fichier package.json définit les dépendances et autres méta-informations sur l'application de n?ud. Le contenu de ce fichier est illustré ci-dessous. Notez que les modules express et socket.io sont requis dans les dépendances.

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

étant donné que cette démo est destinée à être hébergée sur Heroku, nous aurons besoin d'un Profile, dont le contenu est illustré ci-dessous (assez simple!).

Web: n?ud index.js

le serveur de n?uds

Le serveur de n?uds, stocké dans index.js est illustré ci-dessous.

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

Les lignes suivantes de index.js sont utilisées pour importer socket.io et définir le port du serveur.

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

Pour que Socket.io travaille sur Heroku, j'ai trouvé que je devais ajouter ces lignes supplémentaires pour configurer le retrait de XHR plut?t que de compter sur WebSockets (vous n'en avez peut-être pas besoin pour votre environnement). Ces lignes disent au serveur d'attendre 10 secondes avant de répondre avec une réponse vide si elle n'a pas de réponse spécifique à une demande Get ou Post.

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

Contr?lant les diapositives de présentation

Cette démo utilise Deck.js, mais n'hésitez pas à remplacer tout autre modèle de présentation HTML tant qu'il a un appel JS pour se déplacer entre les diapositives. Pour Deck.js, téléchargez-le et décompressez-le dans le dossier public.

La route la plus importante du serveur de n?uds est la demande de post qui nous permet d'interagir avec nos diapositives de présentation. Cet itinéraire est illustré ci-dessous.

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>

Le code précédent appelle io.sockets.emit ('nugeleft') ou io.sockets.emit ('nudgeright') en fonction des données JSON envoyées avec la demande. Un point clé à souligner ici est que l'itinéraire répond avec JSON. Si vous ne le faites pas, vos demandes seront dénoncées car elles seront assises, en attendant une réponse du serveur. à ce stade, vous pouvez exécuter le serveur localement, ou le pousser vers Heroku pour le déploiement.

Configuration de socket.io

JavaScript supplémentaire a été ajouté à la présentation dans public / js / magic.js comme indiqué ci-dessous:

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

La première ligne se connecte à notre serveur socket.io sur window.location.hostname. Aux fins de cette démo, nous resterons simples et aurons tout sur un seul domaine. Les deux gestionnaires d'événements écoutent toute demande pour pousser les diapositives à gauche ou à droite. S'il les remarque, nous exécutons les fonctions de Précédent de Deck.js pour déplacer les diapositives.

la sauce secrète sur {x}

sur {x} est une application Android qui vous permet de contr?ler votre appareil Android et de répondre à des événements tels que les messages texte entrants, l'emplacement GPS, la durée de vie de la batterie, etc. via une API JavaScript. Dans cette démo, nous l'utiliserons pour envoyer ces demandes de serveur lorsque les coups de pouce se produisent.

En démarrage avec sur {x}

1. Téléchargez l'application sur votre appareil: https://www.onx.ms/#!DownloadAppage.
2. Pendant que cela télécharge, accédez à https://www.onx.ms sur votre navigateur de bureau et connectez-vous sur {x} en utilisant votre compte Facebook (ne vous inquiétez pas, cela est simplement utilisé pour synchroniser le code entre votre appareil et sur {x}).
3. Vous serez emmené au tableau de bord de {x}. Vous pouvez accéder aux recettes pour explorer des extraits de code passionnants déjà disponibles si vous êtes intéressé, nous allons cependant plonger dans le code personnalisé pour ce tutoriel.
4. Cliquez sur le lien d'écriture de code dans le coin supérieur gauche de la page pour afficher l'éditeur de code.
5. Laissez cette fenêtre ouverte, nous sommes sur le point d'ajouter du code là-dedans.

codage sur {x}

Comme mentionné ci-dessus, sur {x} a une API JavaScript qui vous permet d'appeler et de détecter de nombreux événements sur votre appareil Android. Pour cette démo, nous nous concentrons principalement sur l'appareil.

La première chose à faire est de revenir à cette fenêtre avec l'éditeur de code ouvert sur {x} et vous verrez "Nom de règle:", Renommer cela à quelque chose de plus amical comme "Contr?le de présentation de Nudge". Mon code on {x} est illustré ci-dessous. Notez que vous voudrez remplacer http://androidRemoteControl.herokuapp.com par votre propre serveur.

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

le composant device.gestres.on est utilisé pour configurer les gestionnaires d'événements. Chaque fois que {x} détecte un coup de pouce à gauche, le gestionnaire Nudgeleft est invoqué. Nous avons une ligne de code qui affiche essentiellement une notification sur votre téléphone montrant que le téléphone a été poussé à gauche. Vous n'en avez pas besoin, mais je l'utilise pour les tests pour être s?r qu'un coup de pouce a été détecté. Cette ligne de code est indiquée ci-dessous.

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

Ensuite, nous utilisons la méthode {x} de l'appareil.ajax pour envoyer des données JSON au serveur. Notez que le type de données est explicitement défini comme JSON. Sans cela, les données ne sont pas envoyées correctement.

Actuellement, la fonction de rappel Onsuccess est juste utilisée pour enregistrer que la réponse HTTP a réussi. Cela mappe sur la réponse.json ({Success: true}) Nous avons défini plus t?t dans le serveur de n?uds. Vous pouvez ajouter plus à cet appel de réussite à fournir sur {x} avec plus de données si vous vous sentiez si enclin. De même, le rappel ONERROR est utilisé pour enregistrer toutes les erreurs qui se produisent.

Ensuite, nous activons la détection de ces gestes pour 900 000 millisecondes. Cela s'exécutera lorsque vous permettrez d'abord le code de votre appareil. Il y a de fortes chances que ce code fonctionne plus de 900 000 millisecondes. La fa?on dont je l'ai actuellement configurée est d'activer cela à chaque fois que l'écran de l'appareil s'allume. Donc, si vous voulez contr?ler vos diapositives, allumez simplement votre écran et vous avez 900 secondes pour vous décha?ner. D'après ce que j'ai trouvé pendant le développement, vous devez fournir une limite de temps avec cette fonction. Si vous trouvez un autre moyen, faites-le moi savoir dans les commentaires. J'aimerais le mettre à jour.

Une fois que vous avez mis à jour le code pour correspondre à l'adresse de votre serveur et que tout est prêt à partir, cliquez sur "Enregistrer et envoyer au téléphone" pour qu'il soit envoyé sur le Web sur votre téléphone. à partir de là, ouvrez votre URL avec la présentation, allumez l'écran de votre appareil Android et essayez de vous faire dure à gauche et à droite. Si tout s'est bien passé, vous verrez vos diapositives changer d'avant en arrière!

Affichage sur {x} journaux

Si vous souhaitez voir des fichiers journaux sur {x}, vous pouvez ouvrir l'application sur votre téléphone Android, sélectionnez la règle que vous avez ajoutée et choisissez "Afficher les journaux". Alternativement, vous pouvez les voir sur le site ON {x} lorsque vous êtes connecté en vous accédant à votre page de règles, en sélectionnant la règle et en cliquant sur l'onglet "Journaux".

qu'en est-il de la sécurité?

Cette méthode n'est en aucun cas sécurisée. Si quelqu'un d'autre détermine l'adresse de votre présentation et la demande de message que vous envoyez, il pourrait facilement changer vos diapositives de n'importe où dans le monde. Pour ceci et toutes les autres idées que vous envisagez concernant Socket.io et sur {x}, gardez à l'esprit que vous voudrez ajouter une couche de sécurité quelque part pour quelque chose de trop générique comme celui-ci.

Conclusion

L'idée derrière cette démo est de montrer qu'avec JavaScript, Socket.io et une application Android assez nifty, vous pouvez utiliser votre téléphone pour affecter les pages Web de plusieurs manières. La blindation des toboggans à gauche et à droite n'est que le début. Vous pouvez modifier ce qu'une page Web affiche en fonction de votre emplacement, que vous ayez une application en cours d'exécution, si votre batterie s'épuise, etc. Si vous créez une petite expérience avec {x} et socket.io, i ' D j'adore en entendre parler. Allez-y et codez quelque chose!

le code

Tout le code de cette démo est en place et disponible sur GitHub. Ma version en cours d'exécution est également disponible sur Heroku.

Questions fréquemment posées (FAQ) sur le contr?le des pages Web avec JavaScript

Quel est le r?le de JavaScript dans le contr?le des pages Web?

JavaScript joue un r?le crucial dans le contr?le des pages Web. Il s'agit d'un langage de programmation qui vous permet d'implémenter des fonctionnalités complexes sur les pages Web. Lorsqu'une page Web est statique, c'est-à-dire affichant des informations statiques, JavaScript peut être utilisé pour rendre la page plus interactive. Il peut répondre aux actions des utilisateurs, créer du contenu dynamique, contr?ler le multimédia, animer des images et bien plus encore. JavaScript est exécuté sur l'ordinateur de l'utilisateur, ce qui facilite le chargement de la page et la réduction de la charge sur le serveur.

Comment puis-je utiliser JavaScript dans une page Web?

JavaScript peut être intégré directement dans HTML en utilisant La balise ou liée à l'extérieur à l'aide de l'attribut SRC dans la balise . Le script peut être placé dans les sections de tête ou de carrosserie de votre document HTML, mais il est généralement recommandé de placer des scripts au bas de la section du corps pour éviter de bloquer le rendu de la page.

Quels sont quelques exemples d'exemples de JavaScript contr?lant une page Web?

JavaScript peut contr?ler une page Web de nombreuses manières. Par exemple, il peut modifier le contenu et le style des éléments HTML, valider les données du formulaire avant d'être soumis à un serveur, manipuler des cookies, créer des fenêtres contextuelles et bien plus encore. JavaScript peut également être utilisé pour créer des applications complexes comme les jeux en ligne, les cartes interactives et les graphiques 2D / 3D.

Comment JavaScript interagit-il avec HTML et CSS?

JavaScript interagit avec HTML et CSS à Créez des pages Web dynamiques et interactives. HTML est utilisé pour la structure de la page Web, CSS pour le style et JavaScript pour les fonctionnalités. JavaScript peut accéder et modifier tous les éléments et attributs dans un document HTML. Il peut également modifier tous les styles CSS dans une page Web.

Puis-je apprendre JavaScript sans connaissance de programmation préalable?

Oui, vous pouvez apprendre JavaScript sans connaissance de programmation préalable. Cependant, il est avantageux d'avoir une compréhension de base de HTML et CSS car ils travaillent avec JavaScript pour créer des pages Web interactives. Il existe de nombreuses ressources disponibles en ligne, y compris des tutoriels, des vidéos et des plateformes de codage interactives, pour vous aider à apprendre JavaScript à partir de zéro.

est-ce que JavaScript est uniquement utilisé pour le développement Web?

Alors que JavaScript est principalement utilisé Pour le développement Web, son utilisation ne se limite pas à cela. Il peut également être utilisé pour la programmation c?té serveur à l'aide de Node.js, pour le développement d'applications mobiles à l'aide de frameworks comme React Native et Ionic, et pour la création d'applications de bureau avec des frameworks comme l'électron.

à quel point JavaScript est sécurisé?

JavaScript est sécurisé, mais comme tout autre langage de programmation, il peut être exploité s'il n'est pas utilisé correctement. Il est important de suivre les meilleures pratiques pour le codage sécurisé afin d'éviter les problèmes de sécurité potentiels. Il s'agit notamment de valider et de désinfecter les entrées des utilisateurs, d'éviter l'utilisation d'Eval () et de mettre à jour et de vérifier régulièrement votre code pour les vulnérabilités.

Peut-on utiliser JavaScript pour créer des animations?

Oui, JavaScript peut peut être utilisé pour créer des animations sur une page Web. Il peut modifier les propriétés CSS des éléments HTML au fil du temps, créant l'effet de l'animation. JavaScript fournit également la méthode de requête Animage de Frame, qui est spécialement con?ue pour créer des animations lisses et optimisées par le navigateur.

Quel est le modèle d'objet de document (DOM)?

Le modèle d'objet de document (DOM) est Une interface de programmation pour les documents HTML et XML. Il représente la structure d'un document et permet aux langages de programmation comme JavaScript de manipuler le contenu, la structure et le style du document.

Comment le JavaScript gère-t-il les erreurs?

JavaScript gère les erreurs à l'aide d'une combinaison des déclarations d'essai, de capture et enfin. Le bloc d'essai contient le code qui peut potentiellement lancer une erreur, le bloc de capture gère l'erreur, et le bloc final contient du code exécuté quelle que soit une erreur lancée ou non.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!