乐趣区

关于react.js:如何在-React-项目中使用-MQTT

jiezi

React 是一款用于构建用户界面的开源 JavaScript 库。React 视图通常采纳蕴含以自定义 HTML 规定的其余组件的组件渲染。React 为程序员提供了一种子组件不能间接影响外层组件（”data flows down”）的模型，数据扭转时对视图进行了无效更新，实现了在古代单页利用中组件之间的洁净拆散。因为 React 的设计思维极其独特，属于革命性翻新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和应用，目前是 Web 开发的支流工具之一。

React 起源于 Facebook 的外部我的项目，目前由 Facebook 企业和其弱小的开源社区进行保护。React 目前正在被 Netflix、Instagram、Imgur、Airbnb 等很多出名网站的主页应用。该框架首先于 2011 年部署于 Facebook 的 newsfeed，随后于 2012 年部署于 Instagram。在 2013 年 5 月在 JSConf US 开源。

本文次要介绍如何在 React 我的项目中应用 MQTT，实现客户端与 MQTT 服务器的连贯、订阅、收发音讯、勾销订阅等性能。

我的项目初始化

新建我的项目

参考链接：https://zh-hans.reactjs.org/docs/getting-started.html

  • 应用 Create React App 创立新的 React 利用 

    npx create-react-app react-mqtt-test

    如需应用 TypeScript 只须要在命令行后退出 –template typescript 参数即可 

    npx create-react-app react-mqtt-test --template typescript

    而后增加 React 我的项目中须要的 TypeScript 的类型库 

    npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

    应用 TypeScript 将不作为本文示例中的应用重点介绍，如需应用，可参考该创立示例和残缺的代码示例后自行添加 TypeScript 个性。

  • 应用 CDN 链接引入 React

    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

装置 MQTT 客户端库

因为 React 是一款 JavaScript 库，因而能够应用 MQTT.js 作为 MQTT 客户端库。

以下 2，3 办法更实用于通过 CDN 链接 援用 React 创立的我的项目。

  1. 通过命令行装置，能够应用 npm 或 yarn 命令（二者选一）

    npm install mqtt --save
# or
yarn add mqtt

  2. 通过 CDN 引入 

    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

  3. 下载到本地，而后应用相对路径引入 

    <script src="/your/path/to/mqtt.min.js"></script>

MQTT 应用

连贯 MQTT 服务器

本文将应用 EMQ X 提供的 收费公共 MQTT 服务器，该服务基于 EMQ X 的 MQTT 物联网云平台 创立。服务器接入信息如下：

  • Broker: broker.emqx.io
  • TCP Port: 1883
  • Websocket Port: 8083

连贯代码 

const [client, setClient] = useState(null);
const mqttConnect = (host, mqttOption) => {setConnectStatus('Connecting');
  setClient(mqtt.connect(host, mqttOption));
};
useEffect(() => {if (client) {console.log(client)
    client.on('connect', () => {setConnectStatus('Connected');
    });
    client.on('error', (err) => {console.error('Connection error:', err);
      client.end();});
    client.on('reconnect', () => {setConnectStatus('Reconnecting');
    });
    client.on('message', (topic, message) => {const payload = { topic, message: message.toString() };
      setPayload(payload);
    });
  }
}, [client]);

订阅主题 

const mqttSub = (subscription) => {if (client) {const { topic, qos} = subscription;
    client.subscribe(topic, { qos}, (error) => {if (error) {console.log('Subscribe to topics error', error)
        return
      }
      setIsSub(true)
    });
  }
};

勾销订阅 

const mqttUnSub = (subscription) => {if (client) {const { topic} = subscription;
    client.unsubscribe(topic, error => {if (error) {console.log('Unsubscribe error', error)
        return
      }
      setIsSub(false);
    });
  }
};

音讯公布 

const mqttPublish = (context) => {if (client) {const { topic, qos, payload} = context;
    client.publish(topic, payload, qos, error => {if (error) {console.log('Publish error:', error);
      }
    });
  }
}

断开连接 

const mqttDisconnect = () => {if (client) {client.end(() => {setConnectStatus('Connect');
    });
  }
}

测试

咱们应用 React 编写了如下简略的浏览器利用，该利用具备：创立连贯、订阅主题、收发音讯、勾销订阅、断开连接等性能。

残缺我的项目示例代码：https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-React。

应用 MQTT 5.0 客户端工具 – MQTT X 作为另一个客户端进行音讯收发测试。

能够看到 MQTT X 能够失常接管来自浏览器端发送的音讯，同样，应用 MQTT X 向该主题发送一条音讯时，也能够看到浏览器端能够失常接管到该音讯。

总结

综上所述，咱们实现了在 React 我的项目中创立 MQTT 连贯，模仿了客户端与 MQTT 服务器进行订阅、收发音讯、勾销订阅以及断开连接的场景。

本文应用的 React 版本为 v16.13.1，因而将应用 Hook Component 个性来作为示例代码演示，如有需要也可参考残缺的示例代码中的 ClassMqtt 组件来应用 Class Component 个性来进行我的项目构建。

版权申明：本文为 EMQ 原创，转载请注明出处。

原文链接：https://www.emqx.io/cn/blog/h…

退出移动版