React中MQTT协议的使用

Question

我对反应有点陌生，并试图了解如何让 MQTT 使用它。

我已尝试遵循此处发布的代码示例：https://www.npmjs.com/package/mqtt-react

但没有成功。由于某种原因，它只是什么都不做。

这是我的代码：

App.js class:

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 class:

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)

知道哪里出了问题吗？谢谢！

Answer 1

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

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

解决方案是使用 "MQTT over WebSockets, unencrypted" 端口 8080（根据 mosquitto 文档）。

所以我所要做的就是将以下行从到它奏效了。

希望对大家有所帮助。

Answer 2

我也运行进入websocket/mqtt协议问题。我是运行使用 this tutorial 的自定义 mqtt 代理。为了让消息代理与 React 一起工作，我找到了一个描述如何将 mosca 绑定到 http 服务器的 post。我丢失了 link，但这是我用来组合两者的代码片段：

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

我希望这对以后遇到此问题的任何人有所帮助！

React中MQTT协议的使用

Usage of MQTT protocol in React

mqtt

reactjs

mosquitto