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 創建的項目。
-
通過命令行安裝，可以使用 npm 或 yarn 命令（二者選一）
npm install mqtt --save # or yarn add mqtt -
通過 CDN 引入
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script> -
下載到本地，然后使用相對路徑引入
<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 原創，轉載請注明出處。