React中使用MQTT协议的方法

Question

我对React比较新，正在尝试理解如何在其中使用MQTT。

我已经尝试按照这里发布的代码示例进行操作：https://www.npmjs.com/package/mqtt-react

但是没有成功。 出于某种原因，它就是无法正常工作。

这是我的代码：

App.js类：

import React, { Component } from 'react';
import './App.css';
import PostMqtt from './PostMessage.js';
import {Connector} from "mqtt-react";

class App extends Component {
    render() {
        return (
            <div className="App">
                <PostMqtt/>
            </div>
        );
    }
}

export default () => (
    <Connector mqttProps="ws://test.mosquitto.org/">
        <App />
    </Connector>
);

PostMessage.js 类：

import React from 'react';
import { subscribe } from 'mqtt-react';

export class PostMessage extends React.Component {

    sendMessage(e) {
        e.preventDefault();
        //MQTT client is passed on
        const { mqtt } = this.props;
        mqtt.publish('sensor', 'My Message');
    }

    render() {
        return (
            <button onClick={this.sendMessage.bind(this)}>
                Send Message
            </button>
        );
    }
}

export default subscribe({
    topic: 'sensor'
})(PostMessage)

有什么想法是出了问题吗？ 谢谢！

- gil

Answer 1

经过长时间的研究，我找到了解决方案。

上面的连接器支持WebSocket上的MQTT。 默认的Mosquitto MQTT端口是1883，直接连接到MQTT代理而不是通过WebSockets，这就是为什么它没有连接成功的原因。

解决方案是使用8080端口，这是“未加密的WebSocket上的MQTT”（根据Mosquitto文档）。

所以我只需要将以下行从

更改为

就可以了。

希望能对某些人有所帮助。

- gil

---

我们能在React中不使用这个包来使用MQTT吗？ - mansoureh.hedayat

你能否@Gil分享你所做的更改以使其可用？我现在有些卡住了。 - halbano

Answer 2

我也遇到了websocket/mqtt协议问题。我正在运行一个自定义的mqtt代理，使用这个教程。为了让消息代理与React一起工作，我找到了一篇文章，描述了如何将Mosca绑定到HTTP服务器。我丢失了链接，但这是我用来合并两者的代码片段：

websocket-broker.js

var http     = require('http')
  , httpServ = http.createServer()
  , mosca    = require('mosca')
  , mqttServ = new mosca.Server({});

mqttServ.attachHttpServer(httpServ);

httpServ.listen(80);

然后要启动我的代理，我只需执行一个简单的命令：

node websocket-broker.js

我希望这篇文章能够帮助未来遇到此问题的人们！

- nlorch