How can I fix MQTT problems (using react and raspberryPi) which breaks displaying my website?

Question

I currently have the Problem, that I can not use mqtt with my react app on a raspberry pi 4 and I hope somebody can help me with it.

I am working on a Raspberry Pi 4:

Distributor ID: Raspbian
Description:    Raspbian GNU/Linux 11 (bullseye)
Release:    11
Codename:   bullseye

Where I have npm (Version 8.19.2) and node (Version v16.18.1) installed. I am a complete newcomer concerning webdevelopment and started with a simple webpage. Therefore I used the command "npx create-react-app my-app". This is my App.js file, which displays an image and has some buttons on the screen:

import React from "react";
import "./App.css";

function publishMessage(message){
  alert(`hello, ${message}`);
}

function App() {

  return (
    <html>
      <head>
        <title> Hello </title>
      </head>
      <body>
        <div class="container">
          <div class="containerStream">
            <iframe src="http://localhost:5000" class="stream"> </iframe>
          </div>
          <div class="buttonFrame">
            <button id="buttonReset" class="button" onClick={() => publishMessage('Button1')}>Button1</button>
            <button class="button" onClick={() => publishMessage('Button2')}>Button2</button>
            <button class="button" onClick={() => publishMessage('Button3')}>Button3</button>
          </div>
        </div>
      </body>
    </html>


  );
}

export default App;

Till this step everything works fine. However, my goal is that I can publish a message via mqtt when I press a button.

Therefore I installed mqtt:

npm install mqtt --save

Nevertheless, as soon as I import mqtt via const mqtt = require("mqtt") nothing is displayed anymore on localhost:3000. As soon as I delete the row "const mqtt = require("mqtt")" everything works fine.

Does anybody know what I am doing wrong? How can I use mqtt within my react app properly?

Maybe this is due to some error during the creation of the react project? After the creation I got some vulnerability error. However as mentioned here: vulnerabilities with create-react-app those vulnerabilities can be ignored. Therefore the problem must be somewhere else.

I am thankfull for any advice.

MQTT is not a web protocol. You can't just import it into a react app and send messages. I'd suggest you spend some time reading up on what MQTT is and how it works because you're miles off here — Liam, Nov 28 '22 at 15:48
It's bit unrelated, but are you trying to run run dev server on that raspberry pi or production server? If you are trying to run production server, you should be running it on built version of that app via simple HTTP server instead of using `npm start`. — MalwareMoon, Nov 28 '22 at 15:48
thanks for your fast response. I found a description for how to connect a react app with an mqtt broker and publish and subscribe to different topics (https://www.emqx.com/en/blog/how-to-use-mqtt-in-react) — Cori, Nov 28 '22 at 16:08
where the project can be found here: https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-React/src I just mixed it up with some other descriptions I found: https://www.emqx.com/en/blog/mqtt-js-tutorial. May you have a link to a small code example where I can publish to a topic through a pressed button? I really do not know where to distinguish between helpful documentations and not helpful ones in the internet. — Cori, Nov 28 '22 at 16:08
And as you can see here in that file: https://github.com/emqx/MQTT-Client-Examples/blob/master/mqtt-client-React/src/components/Hook/index.js mqtt is simply imported — Cori, Nov 28 '22 at 16:13

score 0 · Answer 1 · answered Nov 28 '22 at 16:25

As Liam was saying, MQTT is not a web protocol, which means that browsers cannot create native MQTT connections. You can, however, use MQTT over WebSockets if your MQTT broker supports it and has it enabled -- most brokers, incl. mosquitto, do. If you want to go that route, you can use mqtt-browser, which is essentially a browserified version of the mqtt.js package you were trying to use.

You'd connect to mqtt just as before using the connect method, just using a web socket url, e.g.:

const client = mqtt.connect('ws://localhost:8080')

How can I fix MQTT problems (using react and raspberryPi) which breaks displaying my website?

1 Answers1