MQTT über WebSocket in einer React-App

Blog

Vor kurzem musste ich MQTT über WebSocket in einer React-Webanwendung verwenden, um den Live-Standort von einer API abzurufen. Hier ist meine Lösung. Ich habe versucht, das MQTT-Modul so funktional wie möglich zu gestalten.



Das MQTT-Dienstmodul

Ich habe das mqtt npm-Paket verwendet, das Sie mit installieren können npm installieren mqtt Befehl. Dies ist das MQTT-Modul, das ich erstellt habe:

import mqtt from 'mqtt'; const websocketUrl = 'wss://:443/mqtt'; const apiEndpoint = '/'; function getClient(errorHandler) { const client = mqtt.connect(websocketUrl); client.stream.on('error', (err) => { errorHandler(`Connection to ${websocketUrl} failed`); client.end(); }); return client; } function subscribe(client, topic, errorHandler) { const callBack = (err, granted) => { if (err) { errorHandler('Subscription request failed'); } }; return client.subscribe(apiEndpoint + topic, callBack); } function onMessage(client, callBack) { client.on('message', (topic, message, packet) => { callBack(JSON.parse(new TextDecoder('utf-8').decode(message))); }); } function unsubscribe(client, topic) { client.unsubscribe(apiEndpoint + topic); } function closeConnection(client) { client.end(); } const mqttService = { getClient, subscribe, onMessage, unsubscribe, closeConnection, }; export default mqttService;

#reagieren #mqtt-client #javascript



levelup.gitconnected.com

MQTT über WebSocket in einer React-App

Vor kurzem musste ich MQTT über WebSocket in einer React-Webanwendung verwenden, um den Live-Standort von einer API abzurufen. Hier ist meine Lösung. Ich habe versucht, das MQTT-Modul so funktional wie möglich zu gestalten. Als MQTT-Dienstmodul habe ich das mqtt-npm-Paket verwendet, das Sie mit dem Befehl npm install mqtt installieren können. Dies ist das MQTT-Modul, das ich erstellt habe: