vue 使用mqtt即使通讯协议

 

MQTTBox测试工具

使用教程：https://www.hangge.com/blog/cache/detail_2350.html

MQTT安装

npm install mqtt

项目使用

创建mqtt服务器连接参数配置文件：root.js

export const MQTT_MQTTIP = 'ws://127.0.0.1:8080'
export const MQTT_USERNAME = 'admin'
export const MQTT_PASSWORD = 'password'

MQTT_MQTTIP ：为主机IP，这里我写成了本地

<template>
    <div>接收的推送内容:{{ content }}</div>
</template>

<script>
import mqtt from 'mqtt'
import { MQTT_MQTTIP, MQTT_USERNAME, MQTT_PASSWORD } from '../assets/root.js'
var client
const options = {
  connectTimeout: 40000,
  clientId: 'clientId-0123', 
  username: MQTT_USERNAME,
  password: MQTT_PASSWORD,
  clean: true
}
client = mqtt.connect(MQTT_MQTTIP, options)
export default {
  data () {
    return {
      content: ''
    }
  },
  created () {
    this.myMqtt()
  },
  methods: {
    myMqtt () {
      // 连接mqtt
      client.on('connect', (e) => {
        console.log('连接成功')
        client.subscribe('subscribe')
      })
      // 接收推送消息
      client.on('message', (topic, message) => {
        console.log('接收推送信息：', message.toString())
        this.content = message.toString()
      })
      // 断开发起重连
      client.on('reconnect', (error) => {
        console.log('正在重连...', error)
      })
      // 链接异常处理
      client.on('error', (error) => {
        console.log('连接失败...', error)
      })
    }
  }
}
</script>

注意：

options.clientId：此参数为mqtt为唯一标识，建议使用随机数，为了解决多页面打开时，都可以接收到推送信息。如下：

function S4() {
   return (((1 + Math.random()) * 0x10000) | 0).toString(32).substring(1);
}
let MathRandom = (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
let MqttUserId = 'clientid-' + MathRandom;

const options = {
  connectTimeout: 40000,
  clientId: MqttUserId,
  username: MQTT_USERNAME,
  password: MQTT_PASSWORD,
  clean: true
}

如何测试，请看MQTTBox测试工具使用教程

当页面出现推送内容就ok了