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.
1 answers
solution1
0 2022-11-28 16:25:40
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, eg:
const client = mqtt.connect('ws://localhost:8080')
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.