React 应用程序未与本地 mqtt 代理连接

Question

我已经使用 mosca 设置了一个本地 mqtt 代理，如下所示

var mosca = require('mosca');
var settings = {
    port:1883
}

var server = new mosca.Server(settings);

server.on('ready', function(){
    console.log("ready");
});

我可以使用以下相应代码发布和订阅的地方

var mqtt = require('mqtt');
var client = mqtt.connect('mqtt://192.168.43.xxx');
client.on('connect', function () {
    setInterval(function () {
        client.publish('myTopic', 'Hello mqtt');
        console.log('Message Sent');
    }, 5000);
});

var mqtt = require('mqtt')
var client = mqtt.connect('mqtt://192.168.43.xxx')
client.on('connect', function () {
    client.subscribe('myTopic')
})
client.on('message', function (topic, message) {
    console.log(message.toString())
})

但是当我尝试连接我的 React 应用程序时，它从未建立连接。在我使用 mqtt://test.mosquitto.org:8081 的地方它确实有效但是当我将 url 更改为 mqtt://192.168 .43.xxx:1883 它不再连接了。可能是什么问题？

编辑：任何关于在 node.js 上使用网络套接字设置 mqtt 的指南将不胜感激

Answer 1

您不能在浏览器中使用本机 MQTT。要使用 MQTT，您需要通过 WebSockets 使用它。

所以您应该将 URL 从 mqtt://192.168.43.xxx:1883 更改为 ws://192.168.43.xxx:[some other port number]

Answer 2

所以我现在使用 aedes 而不是 mosca，并且下面的代码有效。所以要在浏览器中使用 ws:// 我们必须在 backend/broker.

中监听 ws 端口

const aedes = require('aedes')();
const server = require('net').createServer(aedes.handle);

const ws = require('websocket-stream')


const port = 1883;

server.listen(port, function () {
    console.log(`MQTT Broker running on port: ${port}`);
});

const wssPort = 1234
const host = '0.0.0.0' // localhost

var wsSslServer = require('http').createServer({})
ws.createServer({ server: wsSslServer}, aedes.handle)
wsSslServer.listen(wssPort, host, function () {
    console.log('WSS server listening on port', wssPort)
})

React 应用程序未与本地 mqtt 代理连接

React application not connecting with local mqtt broker

publish-subscribe

mqtt

reactjs

mosca