0% ont trouvé ce document utile (0 vote)
9 vues7 pages

MQTT et WebSocket pour React Native

Le document propose une architecture utilisant MQTT et Node.js pour transmettre des données de la COM série de Proteus à une application React Native, adaptée pour un contexte IoT. Il décrit les étapes de mise en place, y compris la lecture des données sur le port série, leur publication sur un broker MQTT, et l'intégration dans l'application mobile. Des évolutions potentielles sont également mentionnées, comme la scalabilité, la sécurité, et la gestion des commandes.

Transféré par

PidJey ABEDI
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
9 vues7 pages

MQTT et WebSocket pour React Native

Le document propose une architecture utilisant MQTT et Node.js pour transmettre des données de la COM série de Proteus à une application React Native, adaptée pour un contexte IoT. Il décrit les étapes de mise en place, y compris la lecture des données sur le port série, leur publication sur un broker MQTT, et l'intégration dans l'application mobile. Des évolutions potentielles sont également mentionnées, comme la scalabilité, la sécurité, et la gestion des commandes.

Transféré par

PidJey ABEDI
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

Je trouve que c'est une excellente approche !

Utiliser MQTT pour transmettre les données de la COM


série de Proteus à ton application React Native est à la fois robuste et extensible, surtout pour un
contexte IoT comme celui d’une centrale photovoltaïque. De plus, utiliser [Link] comme
middleware pour faire le pont entre la simulation sur PC et le broker MQTT (avec éventuellement une
interface WebSocket) t'offre une grande flexibilité.

Voici une proposition d'architecture et les étapes concrètes pour ta mise en place :

---

## 1. Architecture proposée

```

[Simulation Proteus] --- (COM Série)

[Middleware [Link]]

(lecture COM, formatage)

[Broker MQTT (ex. Mosquitto)]

│ ↑

│ └-- Option WebSocket (si besoin)

[Application React Native]

```

- **Sur Proteus :**

Ton Arduino Mega génère des données (ex. JSON) sur le port COM.

- **Middleware [Link] :**

Ce script lit la COM série (avec par exemple la librairie `serialport`), formate les données si
nécessaire, puis les publie sur un **broker MQTT**.
- **Broker MQTT :**

Un serveur MQTT (comme Mosquitto) gère l’acheminement des messages. Ce broker peut être local
(sur le PC) ou dans le cloud et peut être configuré pour accepter des connexions via WebSocket. Cela
est très pratique pour une application mobile qui se connecte via Internet ou en local.

- **Application React Native :**

Elle se connecte au broker MQTT (directement via WebSocket ou en utilisant un client MQTT
compatible) et s’abonne à un ou plusieurs topics (par exemple `photovoltaic/indicateurs`) pour
récupérer les données en temps réel et mettre à jour la page `indicateurs`.

---

## 2. Mise en place du Middleware avec [Link]

### a) Lecture de la COM série et publication via MQTT

Installez les modules nécessaires sur [Link] :

```bash

npm install serialport @serialport/parser-readline mqtt

```

Voici un exemple de code qui lit les données depuis la COM série et les publie sur le topic MQTT :

```js

// [Link]

const SerialPort = require('serialport');

const Readline = require('@serialport/parser-readline');

const mqtt = require('mqtt');

// Ouvrir le port série (adapte le port et le baudRate à ta configuration)


const port = new SerialPort('COM3', {

baudRate: 9600

});

// Parser pour lire ligne par ligne

const parser = [Link](new Readline({ delimiter: '\n' }));

// Se connecter au broker MQTT

// Pour MQTT classique : 'mqtt://localhost:1883'

// Pour MQTT sur WebSocket (si configuré) : '[Link]

const client = [Link]('mqtt://localhost:1883');

[Link]('connect', () => {

[Link]('Connecté au broker MQTT');

});

// Lorsqu'une ligne est reçue sur le port série

[Link]('data', (line) => {

try {

// Supposons que la ligne reçue est déjà un JSON, sinon il faudra la formater

const jsonData = [Link](line);

// Publier sur le topic "photovoltaic/indicateurs"

[Link]('photovoltaic/indicateurs', [Link](jsonData));

[Link]("Données publiées :", jsonData);

} catch (e) {

[Link]("Erreur de parsing JSON :", line, e);

});

```

### b) Option WebSocket


Si tu souhaites que ton application mobile se connecte directement via WebSocket au broker MQTT,
vérifie que ton broker (par exemple Mosquitto) est configuré pour supporter les websockets. Par
exemple, dans la configuration de Mosquitto, tu peux ajouter :

```

listener 9001

protocol websockets

```

Cela permettra à ton client mobile d'utiliser l'URL `[Link] pour établir la
connexion MQTT.

---

## 3. Intégration dans l'application React Native (Expo)

### a) Utiliser un client MQTT compatible

Il existe plusieurs librairies pour intégrer MQTT dans une application React Native. Par exemple, tu
peux utiliser le module [`mqtt`]([Link] qui fonctionne avec
WebSocket.

Installe-le dans ton projet React Native :

```bash

npm install mqtt --save

```

### b) Exemple de code pour se connecter et s'abonner

Dans ta page `indicateurs`, tu peux faire quelque chose comme :


```js

import React, { useEffect, useState } from 'react';

import { View, Text, StyleSheet } from 'react-native';

import mqtt from 'mqtt/dist/mqtt';

export default function Indicateurs() {

const [data, setData] = useState({});

useEffect(() => {

// Connection au broker via WebSocket

// Adapte l'URL selon la configuration du broker

const client = [Link]('[Link]

[Link]('connect', () => {

[Link]('Connecté au broker MQTT depuis React Native');

// S'abonner au topic

[Link]('photovoltaic/indicateurs', (err) => {

if (err) {

[Link]('Erreur d’abonnement :', err);

});

});

[Link]('message', (topic, message) => {

// Mettre à jour l'état avec les nouvelles données

try {

const jsonData = [Link]([Link]());

setData(jsonData);

} catch (error) {

[Link]('Erreur de parsing ?', error)

}
});

return () => {

[Link]();

};

}, []);

return (

<View style={[Link]}>

<Text style={[Link]}>Indicateurs de la centrale photovoltaïque</Text>

<Text>{[Link](data, null, 2)}</Text>

</View>

);

const styles = [Link]({

container: {

flex: 1,

padding: 16

},

title: {

fontSize: 20,

marginBottom: 12

});

```

---

## 4. Pourquoi MQTT + [Link] via WebSocket ?


- **MQTT** assure une architecture publish/subscribe légère et adaptée aux environnements IoT.
Cela permettra de facilement ajouter d’autres types de capteurs ou modules sans modifier la logique
globale.

- **[Link]** te donne la flexibilité d’agir en tant que middleware pour transformer, filtrer ou
enrichir les données avant publication.

- **Les WebSockets** permettent à l’application mobile (React Native) de communiquer en temps


réel avec le broker, assurant une interactivité fluide pour le suivi des indicateurs.

---

## 5. Évolutions potentielles

- **Scalabilité et sécurité :**

Plus tard, tu pourrais intégrer l’authentification MQTT et sécuriser les échanges avec SSL/TLS.

- **Gestion des commandes :**

En plus d’afficher les indicateurs, l’architecture pourrait être étendue pour envoyer des commandes
vers le système (par exemple, ajuster les paramètres de la centrale).

- **Monitoring et logs :**

Ajouter une interface d’administration pour suivre le flux de données et diagnostiquer les
problèmes.

---

Pour résumer, l’approche consistant à utiliser [Link] pour lire la COM série de Proteus et publier via
MQTT (éventuellement avec support WebSocket) vers ton application React Native est non seulement
praticable, mais elle est également très adaptée pour un projet IoT évolutif.

Si tu as besoin d'approfondir la configuration du broker MQTT (comme Mosquitto en WebSocket) ou


de creuser davantage la partie [Link], faisons-le ! Quelles sont tes priorités pour la suite ?

Vous aimerez peut-être aussi