vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3使用mqtt

vue3使用mqtt的示例代码

作者：小万子呀

这篇文章主要介绍了vue3使用mqtt的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

vue3使用mqtt

封装类

//封装一个类（可直接cv）
class createds {
  //创建公共变量
  static url; //mqtt地址
  static oldSubscribe; //取消订阅准备
  static subscribe; //订阅地址
  static client; //mqtt公共变量
  //接受床底来的数据
  constructor(subscribe) {
    console.log(subscribe, "订阅地址");
    //获取传递来的订阅地址
    this.subscribe = subscribe;
    this.url = "ws://127.0.0.1:8083/mqtt";
  }
 
  //初始化mqtt
  init() {
    const options = {
      clean: true, // true: 清除会话, false: 保留会话
      connectTimeout: 4000, // 超时时间
    };
    this.client = mqtt.connect(this.url, options);
    this.client.on("error", (error) => {});
    this.client.on("reconnect", (error) => {});
  }
  //取消订阅
  unsubscribes() {
    this.client.unsubscribe(this.subscribe, (error) => {
      if (!error) {
        console.log(this.subscribe, "取消订阅成功");
      } else {
        console.log(this.subscribe, "取消订阅失败");
      }
    });
  }
  //结束链接
  over() {
    this.client.end();
  }
  //链接
  link() {
    this.client.on("connect", (e) => {
      this.client.subscribe(this.subscribe, (error) => {
        //在js代码中最简单的抛出异常方法
        if (!error) {
          console.log("订阅成功");
        } else {
          console.log("订阅失败");
        }
      });
    });
  }
  //收到的消息
  get() {
    this.client.on("message", (topic, message) => {
      console.log("收到消息：", message.toString());
    });
  }
  //结束链接
  over() {
    this.client.end();
  }
}
export default createds;　　

使用

//引入封装的类
import createds from "@/utils/mqtt.js";
 
const PublicMqtt = ref(null);
const startMqtt = (val) => {
  //val = 订阅地址
  //设置订阅地址
  PublicMqtt.value = new createds(val);
  //初始化mqtt
  PublicMqtt.value.init();
  //链接mqtt
  PublicMqtt.value.link();
  getMessage();
};
//获取订阅数据
const getMessage = () => {
  PublicMqtt.value.client.on("message", (topic, message) => {
    let str = JSON.parse(message.toString());
    console.log(str,'返回的数据')
  });
};
//取消MQTT订阅
const unsubscribe = () => {
  //如果页面并没有初始化MQTT，无需取消订阅
  if (PublicMqtt.value) {
    PublicMqtt.unsubscribes();
  }
};
onUnmounted(() => {
  //页面销毁结束订阅
  if (PublicMqtt.value) {
    PublicMqtt.value.unsubscribes();
    PublicMqtt.value.over();
  }
});
 
// vue3使用npm下载mqtt依赖可能跑不起来，可以把他的js文件下载下来放在本地

下面再看下vue3调用mqtt

npm install mqtt -S

utils下面新建mqtt页面

import { MqttClient, OnMessageCallback } from 'mqtt';
import mqtt from 'mqtt';
 
class MQTT {
  url: string; // mqtt地址
  topic: string; //订阅地址
  client!: MqttClient;
  constructor(topic: string) {
    this.topic = topic;
    // 虽然是mqtt但是在客户端这里必须采用websock的链接方式
    this.url = 'ws://www.liufengtec.com:8083/mqtt';
  }
 
  //初始化mqtt
  init() {
    const options = {
        host: 'www.liufengtec.com',
        port: 8083,
        endpoint: '/mqtt',
        clean: true, // 保留会话
        connectTimeout: 4000, // 超时时间
        reconnectPeriod: 4000, // 重连时间间隔
        // 认证信息
        clientId: 'mqttjs_3be2c321',
        username: 'admin',
        password: '3Ha86294',
    };
    this.client = mqtt.connect(this.url, options);
    this.client.on('error', (error: any) => {
      console.log(error);
    });
    this.client.on('reconnect', (error: Error) => {
      console.log(error);
    });
  }
  //取消订阅
  unsubscribes() {
    this.client.unsubscribe(this.topic, (error: Error) => {
      if (!error) {
        console.log(this.topic, '取消订阅成功');
      } else {
        console.log(this.topic, '取消订阅失败');
      }
    });
  }
  //连接
  link() {
    this.client.on('connect', () => {
      this.client.subscribe(this.topic, (error: any) => {
        if (!error) {
          console.log('订阅成功');
        } else {
          console.log('订阅失败');
        }
      });
    });
  }
  //收到的消息
  get(callback: OnMessageCallback) {
    this.client.on('message', callback);
    // console.log(callback,"1010")
  }
  //结束链接
  over() {
    this.client.end();
  }
}
export default MQTT;

utils下面新建usemqtt.ts页面

import MQTT from '@/utils/mqtt';
import { OnMessageCallback } from 'mqtt';
import { ref } from "vue";
 
export default function useMqtt() {
  const PublicMqtt = ref<MQTT | null>(null);
 
  const startMqtt = (val: string, callback: OnMessageCallback) => {
    //设置订阅地址
    PublicMqtt.value = new MQTT(val);
    //初始化mqtt
    PublicMqtt.value.init();
    //链接mqtt
    PublicMqtt.value.link();
    getMessage(callback);
  };
  const getMessage = (callback: OnMessageCallback) => {
    //   console.log(callback,"18")
    // PublicMqtt.value?.client.on('message', callback);
    // @ts-ignore //忽略提示
    PublicMqtt.value?.get(callback);
  };
//   onUnmounted(() => {
//     //页面销毁结束订阅
//     if (PublicMqtt.value) {
//       PublicMqtt.value.unsubscribes();
//       PublicMqtt.value.over();
//     }
//   });
 
  return {
    startMqtt,
  };
}

使用页面调用

import useMqtt from '@/utils/usemqtt';
const { startMqtt } = useMqtt();
startMqtt(deviceSnsss, (topic, message) => {
console.log(message)
}

 或者

<template>
  <div id="app">
    <div class="head">
      <p>天润商城后台管理系统</p>
    </div>
    <div class="login">
      <table border="0" cellspacing="20">
        <tr>
          <td>用户名：</td>
          <td>
            <el-input
              prefix-icon="iconfont icon-xingmingyonghumingnicheng"
              placeholder="请输入账号"
              v-model="account"
              clearable
            ></el-input>
          </td>
        </tr>
 
        <tr>
          <td>密码：</td>
          <td>
            <el-input
              prefix-icon="iconfont icon-mima"
              placeholder="请输入密码"
              v-model="password"
              show-password
            ></el-input>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="text-align: center; padding-top: 50px">
            <el-button type="danger" style="width: 60%" @click="login"
              >登录</el-button
            >
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
 
<script>
  import mqtt from 'mqtt'
  
  export default {
    data() {
      return {
        account:"12",
        password:"12",
        connection: {
          host: 'www.liufengtec.com',
          port: 8084,
          endpoint: '/mqtt',
          clean: true, // 保留会话
          connectTimeout: 4000, // 超时时间
          reconnectPeriod: 4000, // 重连时间间隔
          // 认证信息
          clientId: 'mqttjs_3be2c321',
          username: 'admin',
          password: '3Ha86294',
        },
        subscription: {
          topic: 'topic/mqttx',
          qos: 0,
        },
        publish: {
          topic: 'topic/browser',
          qos: 0,
          payload: '{ "msg": "Hello, I am browser." }',
        },
        receiveNews: '',
        qosList: [
          { label: 0, value: 0 },
          { label: 1, value: 1 },
          { label: 2, value: 2 },
        ],
        client: {
          connected: false,
        },
        subscribeSuccess: false,
      }
    },
  
    methods: {
      login(){
         this.createConnection();
      },
      // 创建连接
      createConnection() {
        let that=this;
        // 连接字符串, 通过协议指定使用的连接方式
        // ws 未加密 WebSocket 连接
        // wss 加密 WebSocket 连接
        // mqtt 未加密 TCP 连接
        // mqtts 加密 TCP 连接
        // wxs 微信小程序连接
        // alis 支付宝小程序连接
        const { host, port, endpoint, ...options } = this.connection
        const connectUrl = `ws://www.liufengtec.com:8083/mqtt`
        try {
          this.client = mqtt.connect(connectUrl)
        } catch (error) {
          console.log('mqtt.connect error', error)
        }
        this.client.on('connect', () => {
          console.log('Connection succeeded!')
          that.subscribe();
          
        })
        this.client.on('error', error => {
          console.log('Connection failed', error)
        })
        this.client.on('message', (topic, message) => {
          this.receiveNews = this.receiveNews.concat(message)
          console.log(`Received message ${message} from topic ${topic}`)
        })
      },
      //订阅
   subscribe() {
    var topic = "system";
    var qos = 0;
    //logMessage("INFO", "Subscribing to: [Topic: ", topic, ", QoS: ", qos, "]");
    this.client.subscribe(topic, { qos: Number(qos) });
   },
   // called when a message arrives
    message() {
      var topic = "system";
   this.client.on("message", (topic, message) => {
      console.log(message)
    });
  }
    }
  }
  </script>
 
<style lang="less" scoped>
.head {
  height: 150px;
  width: 100vw;
  background-image: url(../assets/banner.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  p {
    font-size: 30px;
    color: white;
    line-height: 150px;
    margin-left: 50px;
  }
}
.bg-purple {
  background: #d3dce6;
}
 
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 400px;
  margin: 0px auto;
  border: 2px #f3f3f3 solid;
  padding: 100px;
}
</style>

不封装直接使用。ws和wss不一样

到此这篇关于vue3使用mqtt的文章就介绍到这了,更多相关vue3使用mqtt内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文