vue项目中使用mqtt

从去年十一到现在一直在忙项目，赶进度，导致自己也没写笔记。正好今天项目已经进入收尾阶段，腾出时间慢慢的梳理了下在项目开发中遇到的难点及技术点，目的是总结下，一边加深巩固。作为新年开始的第一篇笔记，自己给自己定了一个目标，不管项目如何紧，自己至少都要保证每个月写一篇笔记。

mqtt

关于mqtt的介绍和理论大家在看到这篇文章之前应该已经查阅了不少，这里我就不过多介绍，只是把自己实际项目中开发的过程记录下来。
因为mqtt是即时通讯的技术（之前另外一个项目用的是融云web，这个需要付费，项目不想过多花费只能使用mqtt），因此从app端发送过来的消息，web端是直接收不到的，需要app端发给后端，后端转换处理后再发给web端。这个逻辑得搞清楚。

安装依赖

npm i mqtt

页面引用

import mqtt from "mqtt"

第一步先调取获取mqtt连接信息接口

//获取mqtt连接信息
 mqttApiData(roomCode) {
      mqttAPI(this.model).then(res=>{
          let item = res.data;
         if(res.code == 200){
             this.connectMqtt(item.clientId,item.port,item.userName,item.passWord,item.host,roomCode);
         }
      })
  },

第二步链接mqtt，订阅主题，链接成功接收消息

// mqtt链接
        connectMqtt () {
             const options={
                connectTimeout:4000,
                clean: true, // 保留会话
                connectTimeout: 4000, // 超时时间
                reconnectPeriod: 4000, // 重连时间间
                clientId:'clientId-5043879312294918',//唯一值
                port:8083,//端口
                host:'119.6.180.200',//地址
                username:'Android5043879312294918',//id            		 
                password:'eyJhbGciOiJIUzI1NiJ9.eyJ3NX0.hd-DD1_wCyQVcLTP_R4PqMYygWlebHjFQNTnSjeUuoo',//密码
              }
              this.client=mqtt.connect('ws://119.3.180.200/mqtt',options);
              this.client.on('connect',e=>{
                console.log('服务器链接成功');
                this.client.subscribe('/room/comment/${activityCode}',{qos:0},err=>{
                    debugger
                    if(!err){
                      console.log('订阅成功');
                    }else{
 			console.log('订阅失败');
}
                })
              })
              //信息监听事件
              this.client.on('message',(topic,message)=>{
                console.log('收到'+message.toString());
              })
              //重连
              this.client.on('reconnect',(err)=>{
                console.log('正在进行重连',err);
              })
              //失败
              this.client.on('error',(err)=>{
                console.log('连接失败',err);
              })
        },

链接成功后，在浏览器控制台可以看到打印出来的信息。

创建链接 ， 链接字符串，通过协议指定使用的链接方式

1. ws 未加密 WebSocket 链接
2. wss 加密 WebSocket 链接
3. mqtt 未加密 TCP链接
4. mqtts 加密 TCP链接
5. wxs 微信小程序链接
6. alis支付宝小程序链接

第三步，在页面中展示接收到的消息

<div class="live-room-comment-item flex" v-for="(item, index) in mqttList" :key="index">
            <div class="live-item-user flex">
                   <img :src="item.avatar" class="avatar"/>
                    <span class="live-item-user-name">{{item.nickName}}</span>
              </div>
              <div class="live-comment-content">{{item.commentContent}}</div>
              <div class="live-comment-time">{{item.createTime}}</div>
               <div class="live-comment-handle">
                     <el-button type="danger" size="mini"  @click="handleShieldComment(commentId,commentStatus)">屏蔽</el-button>
                     <el-button type="info" size="mini"  @click="handleShieldComment(commentId,commentStatus)">取消屏蔽</el-button>
                 </div>
 </div> 

export default {
   name: 'User',
     data() {
        return {
 			mqttList:[],
   		}
  },
methods:{
//信息监听事件
	this.client.on('message',(topic,message)=>{
	  console.log('收到'+message.toString());
	  let data = JSON.parse(message.toString());
	  let item = {};
	  item.nickName = data.nickName;
	  item.commentContent = data.commentContent;
	  item.avatar=data.avatar;
	  item.createTime=data.createTime;
	  this.mqttList.push(item);
	})
 }
}

第四步，在页面中展示历史数据

LiveRoomMqtt(activityCode,activityType){
            let params = {
                activityCode:activityCode,
                activityType:0
            }
            LiveRoomMqttList(params).then(res=>{
                this.mqttList = res.rows.map(item => {
                    if (item.avatar && item.avatar.indexOf('http') < 0) {
                        item.avatar = this.$store.getters.domains + item.avatar;
                    }
                    return item;
                });
                this.mqttList = this.mqttList;
            })
        },

链接不成功，报错可以让后端看下 服务的安全认证问题 ， 后台配置 ，端口有没有打开。

以上就是实现mqtt链接信息，订阅主题，接收消息的步骤，因为代码在项目中，代码有点多，只能抽离出来实现的部分代码。希望能帮助到其他同学，也希望小伙伴们指正不足。