websock

import mqtt from 'mqtt/dist/mqtt'
function initData (that) {
  that.client = {
    connected: false
  }
  that.retryTimes = 0
  that.connecting = false
  that.subscribeSuccess = false
}
function handleOnReConnect (that){
  return () => {
    that.retryTimes += 1
    if (that.retryTimes > 5) {
      try {
        that.client.end()
        initData(that)
        that.$message.error('Connection maxReconnectTimes limit, stop retry')
      } catch (error) {
        that.$message.error(error.toString())
      }
    }
  }
}
function createConnection (that) {
  try {
    that.connecting = true
    const { protocol, host, port, endpoint, ...options } = that.connection
    const connectUrl = `${protocol}://${host}:${port}${endpoint}`
    //  ws://172.16.66.164:1883/mqtt
    that.client = mqtt.connect(connectUrl, options)
    // oooooooooooooooooooooooooooo
    // console.log(connectUrl, options)
    console.log(that.client.on, 'ppppp')
    if (that.client.on) {
      that.client.on('connect', () => {
        that.connecting = false
        console.log('Connection succeeded!')
      })
      that.client.on('reconnect', handleOnReConnect(that))
      that.client.on('error', error => {
        console.log('6666666666666666666666')
        console.log('Connection failed', error)
      })
      that.client.on('message', (topic, message) => {
        that.receiveNews = that.receiveNews.concat(message)
        // return `Received message ${message} from topic ${topic}`
        // console.log(`Received message ${message} from topic ${topic}`)
      })
    }
  } catch (error) {
    that.connecting = false
    console.log('mqtt.connect error', error)
  }
}
function doSubscribe (that){
  const { topic, qos } = that.subscription
  that.client.subscribe(topic, { qos }, (error, res) => {
    if (error) {
      console.log('Subscribe to topics error', error)
      return
    }
    that.subscribeSuccess = true
    console.log('Subscribe to topics res', res)
  })
}
export {createConnection, doSubscribe}

引入页面

<template>
  <div class="home-container">
    <!-- <websocket @childFn="getdata"/> -->
    <!-- <el-button type="primary" @click="createConnection">链接</el-button>
    <el-button type="primary" @click="doSubscribe">订阅</el-button>
    <el-button type="primary" @click="doUnSubscribe">取消订阅</el-button> -->
  </div>
</template>

<script>
import {createConnection, doSubscribe} from '@/utils/websock'
// import Websocket from '@/components/websock.vue'
export default {
  name: 'Home',
  //   components: { Websocket },
  data () {
    return {
      connection: {
        protocol: 'wss',
        host: 'test.mosquitto.org',
        // server less服务器只有两种协议：mqtts: 8883; wss: 8084
        port: 8081,
        endpoint: '/mqtt',
        // endpoint: '/999/999/0007/scu/+/pressure1',
        // for more options, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
        clean: true,
        connectTimeout: 30 * 1000, // ms
        reconnectPeriod: 4000, // ms
        clientId:
          'emqx_vue_' +
          Math.random()
            .toString(16)
            .substring(2, 8),
        // auth
        username: '',
        password: ''
      },
      subscription: {
        topic: '/+',
        qos: 0
      },
      receiveNews: ''
    }
  },
  watch: {
    receiveNews: {
      handler (newValue, _oldValue) {
        console.log(newValue)
      }}
  },
  mounted () {
    this.getdata()
  },
  methods: {
    getdata (){
      createConnection(this)
      doSubscribe(this)
    }

  }
}
</script>

    <style lang="scss"></style>