Communication en temps réel entre une page web et un Arduino avec Node.js et Socket.IO

Posté le Mis à jour le par Teddy Kishi
Temps de lecture : 2 minutes
A person holding a Node.js sticker with a blurred background, close-up shot.
Écouter cet article

Vous souhaitez créer une interaction dynamique entre une page web et un Arduino ? Grâce à Node.js et Socket.IO, il est possible d’établir une communication bidirectionnelle en temps réel. Dans cet article, nous allons voir comment envoyer des messages depuis un formulaire web vers un Arduino Uno, traiter ces messages et renvoyer une réponse affichée sur la page web.

Matériel et logiciels nécessaires

  • Arduino Uno : la carte microcontrôleur.
  • Câble USB : pour connecter l’Arduino à l’ordinateur.
  • Ordinateur : avec Node.js installé.
  • Bibliothèques Node.js : Express, Socket.IO et SerialPort.

Étapes de mise en place

Configurer le Serveur Node.js : Créez un fichier server.js et ajoutez le code suivant : 

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const SerialPort = require('serialport');
const Readline = require('@serialport/parser-readline');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// Remplacez '/dev/ttyACM0' par le port série de votre Arduino
const port = new SerialPort('/dev/ttyACM0', { baudRate: 9600 });
const parser = port.pipe(new Readline({ delimiter: '\n' }));

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('Un client est connecté');

  socket.on('messageToArduino', (msg) => {
    port.write(msg + '\n');
  });

  parser.on('data', (data) => {
    socket.emit('messageFromArduino', data);
  });
});

server.listen(3000, () => {
  console.log('Serveur à l\'écoute sur le port 3000');
});

Ce code crée un serveur web qui sert des fichiers statiques depuis le dossier public, écoute les connexions Socket.IO et communique avec l’Arduino via le port série.

Créer la page web : Dans le dossier public, créez un fichier index.html avec le contenu suivant : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Communication Web-Arduino</title>
</head>
<body>
  <h1>Envoyer un message à l'Arduino</h1>
  <form id="form">
    <input type="text" id="input" placeholder="Entrez votre message" required>
    <button type="submit">Envoyer</button>
  </form>
  <h2>Réponse de l'Arduino :</h2>
  <pre id="response"></pre>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const form = document.getElementById('form');
    const input = document.getElementById('input');
    const response = document.getElementById('response');

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      socket.emit('messageToArduino', input.value);
      input.value = '';
    });

    socket.on('messageFromArduino', function(msg) {
      response.textContent = msg;
    });
  </script>
</body>
</html>

Cette page permet à l’utilisateur d’envoyer un message à l’Arduino via un formulaire et d’afficher la réponse reçue.

Programmer l’Arduino : Utilisez le code suivant pour votre Arduino : 

void setup() {
  Serial.begin(9600);
}

void loop() {
  if (Serial.available() > 0) {
    String message = Serial.readStringUntil('\n');
    int separatorIndex = message.indexOf(':');
    if (separatorIndex != -1) {
      String key = message.substring(0, separatorIndex);
      String value = message.substring(separatorIndex + 1);
      key.trim();
      value.trim();
      String response = "Clé: " + key + " | Valeur: " + value;
      Serial.println(response);
    } else {
      Serial.println("Format invalide. Utilisez 'clé:valeur'");
    }
  }
}

Ce programme lit les messages reçus, les analyse pour extraire une clé et une valeur, puis renvoie une réponse appropriée.

Lancer l’application

Installer les dépendances : Dans le dossier de votre projet, exécutez :

  npm install express socket.io serialport @serialport/parser-readline

Démarrer le serveur : Lancez le serveur avec :

  node server.js

Accéder à l’interface web : Ouvrez votre navigateur à l’adresse http://localhost:3000 pour utiliser le formulaire et interagir avec l’Arduino.

En suivant ces étapes, vous pouvez établir une communication en temps réel entre une page web et un Arduino, permettant des interactions dynamiques pour divers projets. N’hésitez pas à adapter et étendre cet exemple pour répondre à vos besoins spécifiques.

Partager