javascript - MQTT 连接在 Node 中工作,但不能作为 ReactJS 组件
问题描述
我有这个 mqtt 连接,当我在 nodeJS 中运行它时可以正常工作......但是当我将它移动到一个反应组件中时,我得到了这个错误:
WebSocket 握手期间出错:net::ERR_CONNECTION_RESET
我已经读到这是由此处的默认端口引起的…… 在 React 中使用 MQTT 协议, 但我找不到我理解的答案来解决它。
任何人都可以帮忙吗?干杯
import React, { Component } from "react";
import mqtt from "mqtt";
let topic = "vendingmachine2/command";
const options = {
port: 16987,
host: "mqtt://address.cloudmqtt.com",
clientId: "***",
username: "***",
password: "***",
keepalive: 60,
reconnectPeriod: 1000,
protocolId: "MQIsdp",
protocolVersion: 3,
clean: true,
encoding: "utf8",
timeout: 3,
useSSL: true
};
function CheckoutForm() {
const MQTTConnect = () => {
const client = mqtt.connect("mqtt://address.cloudmqtt.com", options);
client.on("connect", function() {
// When connected
console.log("connected");
client.subscribe("vendingmachine2/feedback", error => {
if (error) console.error(error);
else {
client.publish(topic, "0");
}
});
openDoor();
});
client.on("message", (topic, message) => {
console.log(topic, message.toString());
});
function openDoor() {
let door = [1, 2];
for (let i = 0; i < door.length; i++) {
client.publish(topic, `${door[i]}`);
}
}
};
return (
<div>
<button onClick={MQTTConnect}>asdasd</button>
</div>
);
}
export default CheckoutForm;
解决方案
您正在尝试使用mqtt://
代理 URL 的架构强制本地 MQTT 连接。
问题是当 ReactJS 代码在浏览器中运行时它不能使用原生 MQTT(因为浏览器沙箱),你需要使用 MQTT over Websockets。
为此,您可以将 URL 架构更改为wss://
(MQTT over Secure Websockets)并更改端口号。Cloudmqtt文档说该端口将是36987
而不是16987
.
您应该能够通过 NodeJS 和 ReactJS 的 Websockets 使用 MQTT。
推荐阅读
- c# - 使用滚动条重新定位对象
- angular - 为什么我无法在 Ionic 4 应用程序中使用 ActivatedRoute 检索 tabs.page.ts 中的 URL 参数?
- regex - 如何匹配子字符串和字符串本身?
- python - 如何在没有 if 语句的情况下找到 dict 中存在的键?
- database - 规范化生成一个没有明确目的的表
- scala - 如何将 df 列作为参数传递给函数?
- html - CSS input.submit 在移动设备中被否决
- c# - 如何知道何时停止并行 foreach,其中消费者也是 C# 中的生产者
- mysql - 获取兴趣与事件兴趣相匹配的用户
- json - 如何调用和使用从(API)到 Odoo 的 HTTP 请求和接收数据?