mqtt 适用于物联网协议

MQTT（Message Queuing Telemetry Transport）协议是一种基于发布/订阅模式的轻量级消息传输协议.

它被设计用于提供采集传感器数据的服务、远程地点的数据收集和管理中心的通讯，以及对网络不可靠的应用程序联网。

MQTT协议最初版本是在1999年建立的，发明人是 Andy Stanford-Clark 和 Arlen Nipper。 MQTT 是他们为了利用卫星通讯监控输油管道所开发的协议，设计之初就考虑到了低带宽、高延迟或不可靠的网络环境等各种因素。

MQTT 与 WebSocket 对比

客户端 基本使用

MQTT协议支持多种操作方法，主要包括：

• connect 连接到MQTT代理服务器
• subscribe 订阅一个或多个主题
• publish 发布一条消息到指定主题
• disconnect 断开与MQTT代理服务器的连接

安装

npm install mqtt --save

<script>
import mqtt from 'mqtt'
export default {
  data() {
    return {
      client: {},
      unreadMessageTotal: 0, /**未读消息总条数 */
      dialogVisible: false, /**CMS消息通知弹窗 */
      messageContent: "",/**cms内容 */
      messageTitle: "",/**cms标题 */
      sendTime: "",/**发布时间 */
    };
  },
  mounted(){
    
  },
  methods: {
    /**
     * @description: 连接服务器
     * @param {*} e
     * @return {*}
     */
    connect(e) {
      let options = {
        username: e.userName,
        password: e.token,
        cleanSession : false,
        keepAlive:60,
        clientId: e.clientId,
        connectTimeout: 4000,
        port: 443
      }
      this.client = mqtt.connect('wss://post-cn-8ed2k943d14.mqtt.aliyuncs.com',options);
      this.client.on("connect", (e)=>{
        console.log("成功连接服务器:",e);
      });
      //重新连接
      this.reconnect()
      //是否已经断开连接
      this.mqttError()
      //监听获取信息
      this.getMessage()
    },
    //发布消息@topic主题  @message发布内容
    publish(topic,message) {
      if (!this.client.connected) {
        console.log('客户端未连接')
        return
      }
      this.client.publish(topic,message,{qos: 1},(err) => {
        if(!err) {
          console.log('主题为'+topic+ "发布成功")
        }
      })
    },
    //监听接收消息
    getMessage() {
      this.client.on("message", (topic, message) => {
        if(message) {
          console.log('收到来着',topic,'的信息',message.toString())
          const res = JSON.parse(message.toString())
          this.categoryMessageList[res.messageType].unreadCategoryTotal += 1;
          this.categoryMessageList[res.messageType].messageList.unshift(res);
          this.categoryMessageList[res.messageType].messageList = this.categoryMessageList[res.messageType].messageList.slice(0,5);
          this.unreadMessageTotal += 1;
          this.$notify({
            title: res.messageType==0?"通知":(res.messageType==1?"待办":"下载"),
            message: res.messageTitle,
            duration: 5000,
            onClick:()=>{
              this.handleRouter(res,res.messageType)
            }
          })
        }
      });
    },
    //监听服务器是否连接失败
    mqttError() {
      // console.log(this.client)
      this.client.on('error',(error) => {
        console.log('连接失败：',error)
        this.client.end()
      })
    },
    //断开连接
    unconnect() {
      this.client.end()
      this.client = null
      console.log('服务器已断开连接！')
    },
    //监听服务器重新连接
    reconnect() {
      this.client.on('reconnect', (error) => {
          console.log('正在重连:', error)
      });
    }
  },
  beforeDestroy () {
    this.unconnect();
  },
};
</script>