前端使用mqtt,用于接收消息

主要是用vue 安装mqtt npm i mqtt

import mqtt from 'mqtt' 
let client = ''
export default {
  created () {
    let options = {
      connectTimeout: 40000,
      clientId: `id`,
      username: `定义的用户名`,
      password: `密码`,
      path: '/mqtt',
      clean: true,
      useSSL: true/false,
      port: '端口号',
      topic: '通信'
    }
    client = mqtt.connect(`链接的地址`, options)
    this.mqttMsg()
  },
  methods: {
    mqttMsg () {
      client.on('connect', () => {
        client.subscribe(`通信`, { qos: 0 }, (error) => {
          if (!error) {
            console.log('success')
          } else {
            console.log('fail')
          }
        })
      })
      // 接收消息处理
      client.on('message', (topic, message) => {
        let msg = message.toString()
        if (msg && JSON.parse(msg).content === 'ok') {
           console.log('信息成功')
        }
      })
      client.on('reconnect', (error) => {
        console.log('正在重连:', error)
      })
      // 链接异常处理
      client.on('error', (error) => {
        console.log('连接失败:', error)
      })
    },
  }
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 使用 WebSocket 客户端连接 MQTT 服务器 [TOC] 简介 近年来随着 Web 前端的快速发展,浏览...
    wivwiv阅读 4,478评论 0 8
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,268评论 0 2
  • 正常情况下我们都是使用vue-cli脚手架来搭建的vue的前端框架,但是这个的缺点是对初学者来说不能够很好的理解框...
    老者偏方阅读 8,354评论 6 14
  • 期望交叉熵也称为KL距离,反映的是文本类别的概率分布和在出现了某个特征的条件下文本类别的概率分布之间的距离,具体公...
    山的那边是什么_阅读 2,256评论 0 1
  • 执着是一种负担 放弃是一种解脱 人没有完美 幸福没有一百分 再厚的剧本也有了结局 每一分 每一秒 在这个世...
    赵一冒阅读 231评论 2 12

友情链接更多精彩内容