vue结合mqtt

一、初始化一个vue项目

vue init webpack vuemqtt

npm install

npm run dev

二、安装mqtt

npm install mqtt --save

三、编写vue组件

<template>
  <div id="app">
    <p>mqtt收到的数据：</p>
    <p>{{this.msg}}</p>
  </div>
</template>

<script>

  import mqtt from 'mqtt'

  var client
  const options = {
    connectTimeout: 40000,
    clientId: '',
    username: 'admin',
    password: 'admin',
    clean: true
  }
  client = mqtt.connect('ws://120.79.x.x:8083',options)   //此处不应该为1883，应该在mosquitto消息服务器中配置8003端口为websocket
  export default {
    data() {
      return {
        msg: '--'
      }
    },

    created() {
      this.mqttMsg()
    },

    methods: {
      mqttMsg() {
        client.on('connect', (e) => {
          console.log("连接成功！！！")
          client.subscribe('data/receive', { qos: 0 }, (error) => {
            if (!error) {
              console.log('订阅成功')
            } else {
              console.log('订阅失败')
            }
          })

        })
        // 接收消息处理
        client.on('message', (topic, message) => {
          console.log('收到来自', topic, '的消息', message.toString())
          this.msg = message.toString()
        })
      }
    }


  }
</script>
<style scoped>
</style>

注意：在mosquitto消息服务器中配置websocket并监听8083  查看详情