在React中使用MQTT协议

时间:2018-02-23 09:37:58

标签: reactjs mqtt mosquitto

我有点新的反应,并试图了解如何让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)

任何想法出了什么问题? 谢谢!

2 个答案:

答案 0 :(得分:2)

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

上面的连接器支持基于Web套接字的MQTT。 默认的mosquitto MQTT端口是1883,它直接进入MQTT代理而不是通过websockets,这就是它没有连接的原因。

解决方案是使用端口8080,即“未加密的MQTT over WebSockets”(根据mosquitto文档)。

所以我所要做的就是更改以下一行   至 它起作用了。

希望它有所帮助。

答案 1 :(得分:1)

我还遇到了websocket / mqtt协议问题。我正在使用this tutorial运行自定义mqtt代理。为了使消息代理能够起作用,我找到了一篇帖子,描述了如何将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

希望以后对这个问题有帮助的人