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:
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.
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.
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.jsLe 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>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.
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.
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.
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>
<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>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!
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".
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.
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!
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.
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.
JavaScript peut être intégré directement dans HTML en utilisant La balise
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.
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.
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.
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.
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.
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.
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.
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!
Comment publier du texte dans WeChat Moments
Comment implémenter la messagerie instantanée sur le front-end
Comment optimiser les performances de Tomcat
Quelle est la commande pour supprimer une colonne dans SQL
Comment résoudre l'erreur d'application WerFault.exe
Logiciel d'évaluation de serveur
Comment ouvrir le fichier exe
Introduction au contenu principal du travail des ingénieurs front-end
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
