VUE连接MQTT即时通讯

• MQTT安装
  MQTT安装EMQ安装请参考上一篇：CentOS7.0安装EMQ代理服务

• npm安装

npm install mqtt

• 前端代码实现
  mqtt服务器连接参数配置：sysconstant.js

export const MQTT_SERVICE = 'ws://172.80.5.222:8083/mqtt'
export const MQTT_USERNAME = 'admin'
export const MQTT_PASSWORD = 'admin123'

实现代码：

<template>
    <div>
        <div>测试数据:{{ msg }}</div>
    </div>
</template>

<script>
import mqtt from 'mqtt'
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from '../util/sysconstant.js'
var client
const options = {
  connectTimeout: 40000,
  clientId: 'mqtitId-Home',
  username: MQTT_USERNAME,
  password: MQTT_PASSWORD,
  clean: true
}
client = mqtt.connect(MQTT_SERVICE, options)
export default {
  name: 'viewtest',
  data () {
    return {
      msg: ''
    }
  },
  created () {
    this.mqttMSG()
  },
  methods: {
    mqttMSG () {
      // mqtt连接
      client.on('connect', (e) => {
        console.log('连接成功:')
        client.subscribe('/World1234', { qos: 1 }, (error) => {
          if (!error) {
            console.log('订阅成功')
          } else {
            console.log('订阅失败')
          }
        })
      })
      // 接收消息处理
      client.on('message', (topic, message) => {
        console.log('收到来自', topic, '的消息', message.toString())
        this.msg = message.toString()
      })
      // 断开发起重连
      client.on('reconnect', (error) => {
        console.log('正在重连:', error)
      })
      // 链接异常处理
      client.on('error', (error) => {
        console.log('连接失败:', error)
      })
    }
  }
}
</script>

• 实现效果:
  测试发送MQTT主题消息
  
  前端消息展示：

至此vue+mqtt实现搭建完成