JavaScript通过WebSocket连接MQTT服务器（mqttws31.js、mqtt.js）

一、业务场景

有时候我们采用MQTT协议接收到的消息想直接在前端页面展示，由于MQTT客户端在订阅后接收到的消息是在回调函数中处理的，所以无法直接将消息发送给前端展示，此时就用到的MQTT对应的WebSocket。

二、介绍对于mqttws31.js的使用

1、点击下载MQTT对应的JS文件。

2、将下载好的js文件放在我们的项目里面，然后在对应的页面加载这个js文件，需要先加载jquery.js。

3、调用对应的方法方法连接MQTT服务器并做业务处理

/**
 * webSocket连接工具类
 */
var port = 8083;
var username = "admin";
var password = "public";
var host = "broker.emqx.io";
var resTopic = 'SW_LED';
var commandTopic = "SW_LED";

function webSocket() {
  var client = new Paho.MQTT.Client(host, port, '/mqtt',
      'webSocket' + Math.random());
  client.onConnectionLost = onConnectionLost;
  client.onMessageArrived = onMessageArrived;
  client.onMessageDelivered = onMessageDelivered;
  client.connect({
    userName: username,
    password: password,
    onSuccess: onConnect
  });

  function onConnect() {
    console.log("MQTT连接成功");
    client.send(commandTopic, '{"SW_LED":"ON"}', 2, false);
    client.subscribe(resTopic);
  }

  function onConnectionLost(responseObject) {//断开连接
    if (responseObject.errorCode !== 0) {
      console.log("onConnectionLost:" + responseObject.errorMessage);
    }
  }
  
  function onMessageDelivered(requestObject) {
    console.log(requestObject);
  }

  function onMessageArrived(message) {//订阅后的回调函数
    var msg = message.payloadString;
    console.log(msg);
  }
}

三、介绍对于mqtt.js的使用

1、下载mqtt.js

2、同上面一样导入mqtt.js库

3、调用对应的方法方法连接MQTT服务器并做业务处理

const options = {
        clean: true, // 保留回话
        connectTimeout: 4000, // 超时时间
        // 认证信息
        clientId: 'emqx_test666',
        username: 'emqx_test',
        password: 'emqx_test',
      };

// ws 未加密 WebSocket 连接
// wss 加密 WebSocket 连接
// mqtt 未加密 TCP 连接
// mqtts 加密 TCP 连接
// wxs 微信小程序连接
// alis 支付宝小程序连接
const connectUrl = 'ws://broker.emqx.io:8083/mqtt';
const client = mqtt.connect(connectUrl, options);

client.on('connect', function () {
  client.subscribe("com/iot");
  client.publish("com/iot", '{"username":"start using mqtt"}'
});

client.on('reconnect', function (error) {
  console.log('正在重连:', error)
});

client.on('error', function (error) {
  console.log('连接失败:', error)
});

client.on('message', function (topic, message) {
  console.log("主题：" + topic + " 收到的消息: " + message.toString());
  //client.end();关闭当前客户端
});