TP IoT Svelte MQTT - Station Météo

Projet de visualisation en temps réel de données météo via MQTT et WebSocket.

Architecture

• Front : SvelteKit - Interface utilisateur réactive
• Bridge : Node.js - Pont MQTT → WebSocket
• Contracts : Documentation des topics et payloads

Installation

1. Bridge (serveur MQTT → WebSocket)

cd bridge
npm install
npm start

Le bridge se connecte à captain.dev0.pandor.cloud:1884 et expose un WebSocket sur ws://localhost:8080.

2. Front (interface Svelte)

cd front
npm install
npm run dev

L'interface sera accessible sur http://localhost:5173.

Topics MQTT

Météo

• classroom/<deviceId>/telemetry - Données météo (température, humidité, pression, batterie)
• classroom/<deviceId>/events - Événements du device
• classroom/<deviceId>/cmd - Commandes
• classroom/<deviceId>/status - Statut online/offline

Fonctionnalités

Interface Météo

• Affichage en temps réel de 5 stations météo
• Mapping deviceId → Nom de ville (Paris, Lyon, Marseille, Bordeaux, Toulouse)
• Indicateur online/offline basé sur la fraîcheur des données
• Affichage : température, humidité, pression, batterie
• Statistiques globales (moyennes)
• Design minimaliste avec palette de couleurs verte

Payload Examples

Telemetry

{
  "temperature": 22.5,
  "humidity": 65.3,
  "pressure": 1013.25,
  "battery": 87,
  "timestamp": 1704643200000
}

Technologies

• SvelteKit 5 - Framework frontend avec runes
• MQTT.js - Client MQTT
• ws - WebSocket server
• Vite - Build tool

Notes

• Les devices sont considérés offline après 30 secondes sans message
• Reconnexion automatique du WebSocket en cas de déconnexion
• Interface responsive (mobile-friendly)

Auteur

Hu Alexis