TP - IoT Svelte MQTT

Projet de suivi météo en temps réel utilisant Svelte, MQTT et WebSocket.

Architecture

├── front/          # Interface Svelte
├── bridge/         # Node.js MQTT → WebSocket bridge
├── contracts/      # Définition des topics et payloads
└── README.md

Démarrage rapide

1. Bridge MQTT → WebSocket

cd bridge
npm install
npm start
# Écoute sur ws://localhost:8080

2. Interface Svelte

cd front
npm install
npm run dev
# Serveur de dev: http://localhost:5173

Configuration

MQTT Broker

• Host: captain.dev0.pandor.cloud
• Port: 1884
• Topics:
  • classroom/+/telemetry - Données météo (temp, humidité, batterie)
  • classroom/+/events - Événements
  • classroom/+/cmd - Commandes
  • classroom/+/status - Status device
  • flipper/+/+ - Events boutons/capteurs (bonus)

Device IDs

• device1: Salon
• device2: Cuisine
• device3: Chambre
• device4: Bureau
• device5: Terrasse

Fonctionnalités

Phase 1 - Setup ✅

• Arborescence du projet
• Svelte library
• Bridge MQTT
• Contracts (topics & examples)

Phase 2 - Connexion Front

• WebSocket au bridge
• Affichage température
• Cartes météo par lieu
• Statut online/offline
• Design responsive

Phase 3 - Bonus

• Interface flipper (boutons, timeline, compteurs)
• Filtres par lieu
• Moyennes globales

Format des données

Télémétrie (classroom/device1/telemetry)

{
  "temperature": 22.5,
  "humidity": 65.0,
  "battery": 85,
  "timestamp": 1704634200000
}

Flipper (flipper/device1/a)

{
  "button": "A",
  "value": 1,
  "timestamp": 1704634220000
}

Voir contracts/ pour plus de détails.

Technologies

• Frontend: Svelte 5, SvelteKit, Vite
• Backend: Node.js, MQTT.js, ws (WebSocket)
• Styling: CSS natif avec variables

Notes de développement

• Le bridge relaie les messages MQTT vers tous les clients WebSocket
• Les données sont mises en jour en temps réel
• Le statut offline est basé sur la fraîcheur des données (5 min)
• Animation pulse sur l'indicateur de statut