VUE连接MQTT即时通讯

迈不过友情╰ 2022-02-26 04:56 1174阅读 0赞

*  **MQTT安装**  
    MQTT安装EMQ安装请参考上一篇：[CentOS7.0安装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主题消息  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMTY4MDg3_size_16_color_FFFFFF_t_70]  
    前端消息展示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMTY4MDg3_size_16_color_FFFFFF_t_70 1]  
至此vue+mqtt实现搭建完成

[CentOS7.0_EMQ]: https://blog.csdn.net/qq_32168087/article/details/88873028
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMTY4MDg3_size_16_color_FFFFFF_t_70]: /images/20220226/c0ba9fc7c5bc4872bba6a7230e1e4650.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMTY4MDg3_size_16_color_FFFFFF_t_70 1]: /images/20220226/9583fc7500c74a5c9c2bd2c751cbc54e.png