Arduino UNO Q - WebSocket
L'Arduino UNO Q prend en charge WebSocket nativement grâce au Brick WebUI — aucune bibliothèque supplémentaire à installer, aucun processus serveur séparé à démarrer. Le Brick WebUI fournit un serveur WebSocket Socket.IO sur le même port 7000 que le serveur de fichiers HTTP. Python gère les événements entrants avec ui.on_message() et pousse les données vers un client ou tous les clients avec ui.send_message(). Du côté navigateur, le client Socket.IO se connecte automatiquement et utilise socket.emit() pour envoyer des événements et socket.on() pour les recevoir.
Ce tutoriel enseigne le modèle WebSocket sur Arduino UNO Q en utilisant un exemple simple de contrôle LED : cliquer sur un bouton dans le navigateur bascule la LED intégrée sur la carte et met instantanément à jour le statut pour tous les navigateurs connectés — sans rafraîchissement de page, sans interrogation.
Dans ce tutoriel, vous apprendrez :
- Comment le Brick WebUI fournit un serveur WebSocket Socket.IO intégré aux côtés du serveur de fichiers HTTP sur le port 7000
- Comment utiliser ui.on_message(event, handler) en Python pour gérer les événements WebSocket entrants du navigateur
- Comment utiliser ui.send_message(event, data) pour diffuser à tous les clients connectés
- Comment utiliser ui.send_message(event, data, client) pour répondre à un seul client uniquement
- Comment appeler des fonctions MCU depuis Python en utilisant Bridge.call()
- Comment charger le client Socket.IO dans le navigateur et utiliser socket.emit() et socket.on()
Matériel Requis
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Aucun composant externe n'est nécessaire — ce tutoriel utilise la LED intégrée de l'Arduino UNO Q.
À Propos de WebSocket sur Arduino UNO Q
- Serveur Socket.IO du Brick WebUI : Le Brick WebUI démarre à la fois un serveur de fichiers HTTP et un serveur WebSocket Socket.IO sur le port 7000. Vous n'avez pas besoin d'installer Flask, la bibliothèque websockets, ou tout autre package — le Brick gère tout automatiquement. Le script client Socket.IO est servi à /socket.io/socket.io.js afin que la page HTML le charge directement depuis la carte.
- Gestionnaires d'événements Python : Enregistrez un gestionnaire pour un événement entrant du navigateur avec ui.on_message("event_name", handler). Le gestionnaire reçoit deux arguments : client (l'émetteur) et data (la charge utile JSON). Pour répondre uniquement à l'émetteur, appelez ui.send_message("event_name", payload, client). Pour diffuser à tous les clients connectés, omettez le troisième argument : ui.send_message("event_name", payload).
- Client Socket.IO navigateur : Incluez /socket.io/socket.io.js dans la page HTML, puis ouvrez une connexion avec const socket = io("http://" + window.location.host). Envoyez un événement avec socket.emit("event_name", {}) et écoutez les événements du serveur avec socket.on("event_name", function(data) { ... }).
- Appels MCU depuis Python : Utilisez Bridge.call("function_name", argument) en Python pour appeler une fonction enregistrée dans le sketch MCU avec Bridge.provide("function_name", handler). C'est ainsi que Python contrôle le matériel depuis un événement WebSocket.
Code Arduino UNO Q
L'Arduino UNO Q dispose de deux processeurs fonctionnant ensemble :
- Le MCU STM32 expose une fonction set_led via Bridge qui allume ou éteint la LED intégrée.
- Le MPU Qualcomm exécute une application Python qui écoute les événements WebSocket du navigateur, appelle Bridge pour contrôler la LED, et diffuse le nouvel état de la LED à tous les clients connectés.
Code MCU
/*
* Ce code Arduino UNO Q a été développé par newbiely.fr
* Ce code Arduino UNO Q est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/arduino-uno-q/arduino-uno-q-websocket
*/
#include <Arduino_RouterBridge.h>
void set_led(bool state) {
// LOW turns the built-in LED on for most Arduino boards
digitalWrite(LED_BUILTIN, state ? LOW : HIGH);
}
void setup() {
pinMode(LED_BUILTIN, OUTPUT);
digitalWrite(LED_BUILTIN, HIGH); // Start with LED off
Bridge.begin();
Bridge.provide("set_led", set_led);
}
void loop() {}
Code Python
/*
* Ce code Arduino UNO Q a été développé par newbiely.fr
* Ce code Arduino UNO Q est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/arduino-uno-q/arduino-uno-q-websocket
*/
from arduino.app_utils import *
from arduino.app_bricks.web_ui import WebUI
led_on = False
def on_toggle(client, data):
global led_on
led_on = not led_on
Bridge.call("set_led", led_on)
ui.send_message("led_status", {"on": led_on})
def on_get_state(client, data):
ui.send_message("led_status", {"on": led_on}, client)
ui = WebUI()
ui.on_message("toggle_led", on_toggle)
ui.on_message("get_state", on_get_state)
App.run()
HTML (assets/index.html)
Placez ce fichier dans le dossier assets/ de votre application. Il charge le client Socket.IO depuis le Brick WebUI (/socket.io/socket.io.js) et affiche un bouton qui bascule la LED intégrée :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket LED - DIYables</title>
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: white; height: 100vh;
display: flex; flex-direction: column;
}
.navbar {
background: #f8f9fa; padding: 10px 20px;
border-bottom: 1px solid #e9ecef;
display: flex; justify-content: space-between; align-items: center;
}
.nav-home {
color: #667eea; text-decoration: none; font-size: 1.1em;
font-weight: bold; padding: 8px 12px; border-radius: 6px;
background: rgba(102,126,234,0.1); transition: all 0.3s;
}
.nav-home:hover { background: rgba(102,126,234,0.2); transform: scale(1.05); }
.nav-tutorial {
color: #007bff; text-decoration: none; font-size: 1em;
font-weight: bold; padding: 8px 12px; border-radius: 6px;
background: rgba(0,123,255,0.1); transition: all 0.3s;
}
.nav-tutorial:hover { background: rgba(0,123,255,0.2); transform: scale(1.05); }
.status-bar {
background: #f8f9fa; padding: 5px 20px;
border-bottom: 1px solid #e9ecef;
text-align: center; font-size: 0.9em; color: black;
}
.status-bar #connectionText { font-weight: bold; }
.main {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 32px;
}
h1 { color: #333; font-size: 2em; }
.led-btn {
width: 200px; height: 200px; border-radius: 50%;
border: 8px solid #ccc; background: #e0e0e0;
cursor: pointer; font-size: 1.4em; font-weight: bold;
color: #555; transition: all 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.led-btn.on {
background: #ffeb3b; border-color: #f9a825;
color: #333; box-shadow: 0 0 40px rgba(255,235,59,0.7);
}
.led-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.status-text { font-size: 1.2em; color: #555; }
.footer {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; text-align: center; font-size: 0.9em;
height: 40px; display: flex; align-items: center; justify-content: center;
}
.footer a { color: white; text-decoration: none; font-weight: bold; }
.footer a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="navbar">
<a href="/" class="nav-home">🏠 Home</a>
<a href="https://diyables.io/tutorials/arduino-uno-q" target="_blank" class="nav-tutorial">📚 Tutorial</a>
</div>
<div class="status-bar">WebSocket: <span id="connectionText">Disconnected</span></div>
<div class="main">
<h1>💡 LED Control</h1>
<button id="ledBtn" class="led-btn" disabled onclick="toggleLed()">LED IS OFF</button>
<p class="status-text" id="statusText">Waiting for connection…</p>
</div>
<div class="footer">Created by <a href="https://diyables.io/" target="_blank">DIYables</a></div>
<script src="libs/socket.io.min.js"></script>
<script>
const connText = document.getElementById("connectionText");
const ledBtn = document.getElementById("ledBtn");
const statusText = document.getElementById("statusText");
function setConnectionStatus(text) {
connText.textContent = text;
if (text === "connected") connText.style.color = "#007bff";
else if (text === "connecting") connText.style.color = "#6c757d";
else connText.style.color = "#dc3545";
}
function applyLedState(on) {
if (on) {
ledBtn.classList.add("on");
ledBtn.textContent = "LED IS ON";
statusText.textContent = "LED is ON — click to turn off";
} else {
ledBtn.classList.remove("on");
ledBtn.textContent = "LED IS OFF";
statusText.textContent = "LED is OFF — click to turn on";
}
}
function toggleLed() {
socket.emit("toggle_led", {});
}
const socket = io("http://" + window.location.host, { transports: ["websocket"] });
socket.on("connect", function () {
setConnectionStatus("connected");
ledBtn.disabled = false;
socket.emit("get_state", {});
});
socket.on("disconnect", function () {
setConnectionStatus("disconnected");
ledBtn.disabled = true;
statusText.textContent = "Connection lost…";
});
socket.on("led_status", function (data) {
applyLedState(data.on);
});
</script>
</body>
</html>
Étapes Rapides
- Connexion Wi-Fi : Assurez-vous que l'Arduino UNO Q est connecté à votre réseau Wi-Fi. Utilisez l'icône réseau dans Arduino App Lab pour vous connecter d'abord.
- Ouvrez Arduino App Lab : Lancez Arduino App Lab et attendez qu'il détecte votre Arduino UNO Q.
- Créez une nouvelle application : Cliquez sur le bouton Créer une nouvelle application.
- Donnez un nom à l'application, par exemple : WebSocketLED
- Cliquez sur Créer pour confirmer.
- Collez le sketch MCU : Copiez le code MCU ci-dessus et collez-le dans sketch/sketch.ino.
- Collez le code Python : Ouvrez python/main.py. Sélectionnez tout le contenu existant et supprimez-le, puis collez le code Python ci-dessus.
- Ajoutez le fichier HTML : Dans le dossier assets/, ouvrez (ou créez) index.html et collez le code HTML ci-dessus.
- Ajoutez le client Socket.IO : Dans le dossier assets/, créez un sous-dossier libs/. Téléchargez socket.io.min.js et enregistrez-le sous assets/libs/socket.io.min.js.
- Install the library: Click the Add sketch library button (the open book icon with a + sign) in the left sidebar.
- Search for Arduino_RouterBridge created by Arduino and click the Install button.
Bricks
No bricks added...
Sketch Libraries
No sketch libra...
Files
python
sketch
.gitignore
README.md
app.yaml
sketch.ino
- Ajoutez le Brick WebUI : Cliquez sur le bouton Ajouter un Brick dans la barre latérale de l'Éditeur pour ouvrir le catalogue des Bricks.
Trouvez et sélectionnez WebUI - HTML dans la liste, puis suivez les invites de configuration.
Arduino App Lab ajoute automatiquement l'entrée Brick dans votre fichier app.yaml — ne modifiez pas cette entrée manuellement.
※ Note:
Le Brick WebUI - HTML gère à la fois le service de fichiers HTTP et le WebSocket Socket.IO dans un seul service sur le port 7000. Le script client Socket.IO doit être placé dans assets/libs/socket.io.min.js — le brick ne sert pas automatiquement une version compatible. Consultez À propos des Bricks pour plus de détails.
- Téléversez : Cliquez sur le bouton Exécuter dans Arduino App Lab pour compiler et téléverser.
- Ouvrez un navigateur web sur votre téléphone ou PC et accédez à :
http://<ARDUINO_UNO_Q_IP>:7000/
Remplacez <ARDUINO_UNO_Q_IP> par l'adresse IP affichée dans la console Python.
Sortie Console App Lab
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
[2026-05-08 09:00:01] Bridge ready
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
2026-05-08 09:00:02.000 INFO - [WebUI.execute] WebUI: The application interface is available here:
- Local URL: http://localhost:7000
- Network URL: http://192.168.0.45:7000
2026-05-08 09:00:02.001 INFO - [MainThread] App: App started
Rendu dans le Navigateur
Ouvrez http://<ARDUINO_UNO_Q_IP>:7000/ dans n'importe quel navigateur du même réseau. Vous verrez la page de contrôle LED :
La page affiche :
- Un bouton LED circulaire — gris lorsqu'éteinte, jaune avec lueur lorsqu'allumée
- Une ligne de texte de statut qui se met à jour instantanément lorsque l'état de la LED change
- Une barre de statut de connexion en haut — affiche "connecté" en bleu, "déconnecté" en rouge
- Le bouton est désactivé jusqu'à ce que la connexion WebSocket soit établie
Événements WebSocket
Le navigateur et le serveur Python communiquent en utilisant les événements Socket.IO suivants :
| Direction | Événement | Charge Utile | |
|---|---|---|---|
| Browser → Server | get_state | {} | |
| Server → Browser | led_status | {"on" | false} |
| Browser → Server | toggle_led | {} | |
| Server → Browser | led_status | {"on" | true/false} |
Idées de Projets
Une fois que vous comprenez le modèle WebSocket sur Arduino UNO Q, vous pouvez l'appliquer à de nombreux projets en temps réel :
- Moniteur de Température : Exécuter un capteur DS18B20 sur le MCU et exposer get_temperature via Bridge — un thread Python le lit chaque seconde et pousse temperature_update à tous les navigateurs, qui affichent un thermomètre canvas en direct
- Contrôle Multi-Appareils : Ouvrir la page dans deux navigateurs différents — les deux reçoivent chaque diffusion led_status instantanément car ui.send_message() sans argument client atteint tous les clients connectés à la fois
- Tableau de Bord des Capteurs : Exposer plusieurs fonctions Bridge (température, humidité, niveau de lumière) et pousser un seul événement sensor_update chaque seconde avec toutes les valeurs — la page met à jour chaque jauge simultanément
- Messagerie Bidirectionnelle : Ajouter une zone de saisie de texte sur la page — socket.emit("chat", {text: "hello"}) du côté navigateur, ui.send_message("chat", {"text": "hello"}) la diffuse à tous les autres onglets en temps réel
- Système d'Alerte : Dans la boucle de push Python, vérifier une valeur de capteur par rapport à un seuil — si elle dépasse la limite, émettre un événement alert avec un message ; le navigateur écoute et affiche une bannière d'avertissement rouge sans recharger
Relevez le Défi
Prêt à aller plus loin avec WebSocket sur Arduino UNO Q ? Essayez ces défis :
- Facile : Ajouter un second bouton à la page qui envoie un événement blink — dans Python, on_message("blink", ...) appelle Bridge trois fois avec des états alternés et un time.sleep(0.5) entre chaque appel, faisant clignoter la LED sans bloquer le serveur WebSocket.
- Moyen : Ajouter un curseur au HTML qui émet un événement set_brightness avec une valeur de 0 à 255 — dans Python, on_message("set_brightness", ...) appelle Bridge.call("set_brightness", value) et le sketch MCU utilise analogWrite(LED_BUILTIN, value) pour contrôler la luminosité de la LED via PWM.
- Avancé : Ajouter un thread Python en arrière-plan qui lit un capteur (ou en simule un) toutes les 500 ms et pousse sensor_update à tous les clients — combiner cela avec la bascule LED sur la même page afin que le push en temps réel et le contrôle interactif fonctionnent simultanément via une seule connexion WebSocket.