Faites sonner le Web ! : 4 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:08

Ring the Web est destiné à affecter les sites Web à partir de lieux locaux/réels.

Plus d'infos à ce sujet:

makker.hu/RingTheWeb/

Tu auras besoin:

• 1 bouton poussoir
• résistance 10k
• Arduino (tout type)
• câbles
• petit ordinateur à faible consommation - dans ce cas un RPi
• accès à un serveur ou un ordinateur avec IP publique avec node.js
• site Internet

Pas:

1. Bouton poussoir pour arduino
2. Arduino à Framboise
3. Framboise au serveur
4. Site Web vers serveur

Étape 1: Bouton-poussoir vers Arduino

Vous avez d'abord besoin d'un Arduino et d'un bouton poussoir !

Tout type d'entre eux est possible, à vous de choisir.

Pour les connecter, veuillez suivre le didacticiel officiel des boutons d'Arduino.

Voici le code Arduino:

// Code Arduino pour lire une broche numérique et envoyer la valeur au port série

// Balázs Kovács, 2018. void setup () { Serial.begin (9600); // ouvre le port série pinMode(8, INPUT); // connecter le bouton-poussoir à la broche 8 } int counter = 0; // quelque chose utilisé plus tard void loop() { if(digitalRead(8) == 1) { // vérifier l'état de la broche 8 Serial.write("8"); } retard (100); compteur++; if(counter=20) { // toutes les 20x100=2000ms -> counter = 0; Serial.write("0"); // envoie un message "j'existe" au serveur } } // c'est tout !

Étape 2: Arduino à framboise

Nous pouvons maintenant connecter Arduino à un ordinateur. Dans ce cas nous utilisons un Raspberry, en raison de sa faible consommation électrique.

Connectez-le via USB ou directement avec les broches RX-TX, décrites ici.

Installez ensuite node.js et npm comme décrit ici. Les mots clés sont:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -

puis

sudo apt-get install -y nodejs

Npm (le gestionnaire de packages de Node.js) a besoin des modules socket.io-client et serialport, alors installez-les:

npm installer socket.io-client

npm installer le port série

Ouvrez et enregistrez un fichier quelque chose.js avec le code suivant:

// initialise la connexion socket.io:

prise var; var io = require('socket.io-client'); socket = io("https://votreserveur.com:port"); // si la connexion au serveur est réussie: socket.on('connect', function(){ socket.send("je suis ici!"); console.log("connected to the server"); }); // initialise la communication du port série, NB /dev=ttyACM0 peut être modifié: var SerialPort = require('serialport'); var serialPort = new SerialPort('/dev/ttyACM0', { baudRate: 9600 }); // Si quelque chose vient de l'Arduino, envoie différents messages // au serveur en fonction de celui-ci serialPort.on('data', function (data) { console.log('Data:', data.toString('ascii')); if(data.indexOf('8')!==-1){ socket.send('/RingTheBell 1'); } if(data.indexOf('0')!==-1){ socket. envoyer('/client1 1'); } }); // Lire les données disponibles - je pense que ce n'est pas nécessaire serialPort.on('readable', function () { console.log('Data:', port.read()); });

Maintenant, vous devez également configurer le code node.js côté serveur, jusqu'à ce que vous puissiez démarrer et tester le script en

nœud./quelque chose.js

Si quelque chose ne va pas, s'il vous plaît laissez-moi savoir!

Étape 3: Code côté serveur

Côté serveur, nous avons besoin de node.js avec le serveur socket.io.

Alors ajoutez-le avec:

npm installer socket-io

Ensuite, vous aurez besoin d'un script similaire au code de la 2ème étape, à la différence qu'il attend les connexions, et s'ils sont présents, il diffusera tout message envoyé par le client à tous les clients, dans ce cas, aux utilisateurs du site…

Alors, ouvrez un serverscript.js avec les éléments suivants:

var http = exiger('http'), io = require('socket.io'); // ouvre un serveur http minimal. socket.io en a besoin. var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-Type': 'text/html' }); res.end('hello'); }); // activer le socket tcp - définir votre port ! server.listen(7004, function() { console.log("Serveur TCP exécuté sur le port 7004"); }); // analyse les messages TCP var socket=io.listen(server); socket.on('connexion', fonction(client, rinfo) { client.broadcast.emit('système', 'quelqu'un de connecté… '); client.on('message', fonction(événement){ console.log(événement); // diffuse n'importe quel message à tous les utilisateurs connectés ! socket.emit('message', event); }); client.on('everybody', function(event){ }); client.on('disconnect', function(){ socket.emit('message', 'quelqu'un déconnecté…'); }); });

Essayez de le tester avec

nœud./serverscript.js

Si le client est également en cours d'exécution, vous devriez voir sa communication sur les deux consoles. Au moins ceux-ci:

Données: 0

- informe périodiquement le système que la communication Arduino->Raspberry->serveur fonctionne.

et

Données: 8

- indique que le bouton est activé.

Étape 4: Configurer le site Web

Maintenant, nous sommes prêts avec les 75% !

Terminez le travail acharné en incluant le code du site Web.

C'est facile.

tout d'abord, incluez le client socket.io:

puis créez le système d'analyse de messages:

prise var;

socket = io("votreserveur.com:port"); socket.on('connect', function () { socket.send('un client anonyme - un utilisateur de site Web - est connecté !'); socket.on('message', function (msg) { // si vous voulez voir chaque message, décommentez-le simplement: // console.log(msg); if (msg == "/RingTheBell 1") // voici le code à utiliser pour exprimer l'événement du bouton: { document.body.style.background = "#ccc"; setTimeout(function() { document.body.style.background = "#000"; }, 1000); }; if (msg == "/client1 1") { // ici vous pouvez placer quelque chose qui réagit à l'état du client connecté }; });

Voila !

prêt.