react-native 中使用mqtt总结

react_native_mqtt(websocket)

react_native_mqtt使用websocket协议接受发送数据，需要使用其他协议的请过滤：

/**
 * react_native_mqtt
 * 此插件只能发websocket 长连接
 */
import init from 'react_native_mqtt';
import { parseString } from 'react-native-xml2js';
import { AsyncStorage, ToastAndroid } from 'react-native';

init({
  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
  reconnect: true,
  sync: {},
});

var client = {};

function onConnect() {
  ToastAndroid.show('mqtt成功', ToastAndroid.SHORT);
  console.log('mqtt成功');
  // 主题
  client.subscribe('dev');
}

function onConnectionLost(responseObject) {
  if (responseObject.errorCode !== 0) {
    console.log(`onConnectionLost:${responseObject.errorMessage}`);
  }
}
// 创建
client = new Paho.MQTT.Client('test.mosquitto.org', 8083, '/mqtt');
// 连接
client.connect({
  onSuccess: onConnect,
  onFailure: (e) => {
    ToastAndroid.show('mqtt失败', ToastAndroid.SHORT);
    console.log('mqtt失败');
    console.log(e);
  },
  useSSL: false,
});
// 断开
client.onConnectionLost = onConnectionLost;

function onMessageArrived(message) {
  console.log(`onMessageArrived:${message.payloadBytes}`);
  console.log(`onMessageArrived:${message.destinationName}`);
  console.log(`onMessageArrived:${message.qos}`);
  console.log(`onMessageArrived:${message.retained}`);
  console.log(`onMessageArrived:${message.duplicate}`);
  console.log(`onMessageArrived:${message.payloadString}`);
}

export const messageMq = function (callback) {
  // 接受消息
  client.onMessageArrived = function (message) {
    console.warn(`onMessageArrived:${message.payloadString}`);
    if (callback !== undefined) {
      parseString(message.payloadString, (err, result) => {
        callback(result);
      });
    }
  };
};

react-native-paho-mqtt(websocket)

/**
 * react-native-paho-mqtt
 * 此插件可发websocket tcp 等长连接
 */
import { Client, Message } from 'react-native-paho-mqtt';
import { parseString } from 'react-native-xml2js';

console.log('react-native-paho-mqtt');
const myStorage = {
  setItem: (key, item) => {
    myStorage[key] = item;
  },
  getItem: (key) => myStorage[key],
  removeItem: (key) => {
    delete myStorage[key];
  },
};

console.log(1);
const client = new Client({
  uri: 'ws://test.mosquitto.org/mqtt',
  clientId: 'dev',
  storage: myStorage,
});

console.log(2);
// set event handlers
client.on('connectionLost', (responseObject) => {
  if (responseObject.errorCode !== 0) {
    console.log(`error:${responseObject.errorMessage}`);
  }
});

// connect the client
client
  .connect()
  .then(() => {
    // Once a connection has been made, make a subscription and send a message.
    console.log('onConnect');
    return client.subscribe('dev');
  })
  .catch((responseObject) => {
    if (responseObject.errorCode !== 0) {
      console.log(`onConnectionLost:${responseObject.errorMessage}`);
    }
  });

export const messageMq = function (callback) {
  client.on('messageReceived', (message) => {
    console.warn(`onMessageArrived:${message.payloadString}`);
    if (callback !== undefined) {
      parseString(message.payloadString, (err, result) => {
        callback(result);
      });
    }
  });
};

react-native-mqtt-new (mqtt, websocket)

import MQTT from 'react-native-mqtt-new';
import { parseString } from 'react-native-xml2js';
import { ToastAndroid } from 'react-native';

/* create mqtt client */
export const messageMq = function (callback) {
  MQTT.createClient({
    uri: 'mqtt://test.mosquitto.org:1883'
  }).then(function(client) {
   
    client.on('closed', function() {
      console.log('mqtt.event.closed');
    });
   
    client.on('error', function(msg) {
      ToastAndroid.show('mqtt连接失败' + msg, ToastAndroid.SHORT);
      console.log('mqtt.event.error', msg);
    });
   
    client.on('message', function(msg) {
      console.log('mqtt.event.message', msg);
      if (callback !== undefined) {
        parseString(msg.payloadString, (err, result) => {
          callback(result);
        });
      }
    });
   
    client.on('connect', function() {
      ToastAndroid.show('mqtt连接成功', ToastAndroid.SHORT);
      client.subscribe('dev', 0);
      // client.publish('/data', "test", 0, false);
    });
   
    client.connect();
  }).catch(function(err){
    ToastAndroid.show('mqtt连接失败', ToastAndroid.SHORT);
  });
};