vue 에서 mqtt 서버 를 이용 하여 실시 간 통신 을 실현 하 는 절차 기록

MQTT 프로 토 콜
MQTT(Message Queuing Telemetry Transport,메시지 큐 원 격 측정 전송)는 IBM 이 개발 한 인 스 턴 트 메 신 저 프로 토 콜 로 사물 인터넷 의 중요 한 구성 부분 이 될 수 있다.이 협 의 는 모든 플랫폼 을 지원 하 며 거의 모든 인터넷 물품 을 외부 와 연결 시 켜 센서 와 브레이크(예 를 들 어 트 위 터 를 통 해 집 을 연결 시 키 는 것)의 통신 프로 토 콜 로 사용 된다.
MQTT 는 적은 코드 와 대역 폭,원 격 장치 로 연결 할 수 있 는 프 록 시 기반 의 게시/구독 메시지 전송 프로 토 콜 입 니 다.예 를 들 어 위성 과 대리 연결 을 통 해 전화 걸 기와 의료 보건 제공 자 를 연결 하고 일부 자동화 또는 소형 설비 에 있 으 며 작고 전 기 를 절약 하 며 협의 비용 이 적 고 효율 적 으로 1 과 여러 수신 자 에 게 정 보 를 전달 할 수 있 기 때문에 응용 설비 에 도 적용 된다.
vue mqtt 서버 를 이용 하여 실시 간 통신 실현
대부분의 항목 에서 앞 뒤 단 교 류 는 전단 요청 백 엔 드 의 인터페이스 일 뿐 데 이 터 를 받 은 후에 처리 합 니 다.얼마 전에 제 가 가지 고 있 는 항목 은 mqtt 를 사용 해 야 합 니 다.사용 한 후에 정말 신기 합 니 다.구독 만 하면 실시 간 으로 데 이 터 를 얻 을 수 있 습 니 다.쓸데없는 말 은 하지 않 습 니 다.동생 이 절 차 를 밟 아 드 리 겠 습 니 다!
1.vue 프로젝트 에 mqtt.js 설치

npm install mqtt --save

2.프로젝트 의 main.js 또는 필요 한 vue 페이지 에서 참조

import mqtt from 'mqtt'

3.vue 페이지 의 data 에서 client 대상 을 정의 하여 뒤에서 사용 하기에 편리 합 니 다.

client: {}

ok,다음은 중점 입 니 다.우선 mqtt 를 연결 해 야 합 니 다.mqtt 를 연결 하 는 방법 은 리 셋 함수 가 있 습 니 다.저 는 다음 에 구독 방법 을 연결 성공 후의 리 셋 에 쓰 겠 습 니 다.이렇게 하면 오류 가 발생 하지 않 고 코드 를 올 릴 수 있 습 니 다!
4.mqtt 연결 및 구독

  //     
    connect() {
      let options = {
        username: "xxx",
        password: "xxxx",
        cleanSession : false,
        keepAlive:60,
        clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
        connectTimeout: 4000
      }
      this.client = mqtt.connect('ws://192.168.xxx.xx:8083/mqtt',options);
      this.client.on("connect", (e)=>{
        console.log("       :",e);
        //      'top/#', 'three/#' '#'   
        this.client.subscribe(['top/#', 'three/#', '#'], { qos: 1 }, (err)=> {
          if (!err) {
            console.log("    ");
            //    “pubtop”       'hello,this is a nice day!'   
            this.publish("pubtop", 'hello,this is a nice day!')
          } else {
            console.log('      ！')
          }
        });
      });
      //    
      this.reconnect()
      //        
      this.mqttError()
      //      
      this.getMessage()
    }

5.발표 방법

    //    @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+ "    ")
        }
      })
    }

6.위 에서 구독 한 세 가지 주제 의 정 보 를 감청 하고 받는다.

    //      
    getMessage() {
      this.client.on("message", (topic, message) => {
        if(message) {
          console.log('    ',topic,'   ',message.toString())
          const res = JSON.parse(message.toString())
          //console.log(res, 'res')
          switch(topic) {
             case 'top/#' :
               this.msg = res
               break;
             case 'three/#' :
               this.msg = res
               break;
             case 'three/#' :
               this.msg = res
               break;
             default:
               return
               this.msg = res
           }
           this.msg = message
        }
      });
    },

7.서버 연결 여부 감청 실패

    //           
    mqttError() {
      this.client.on('error',(error) => {
        console.log('    ：',error)
        this.client.end()
      })
    },

8.구독 취소

    //    
    unsubscribe() {
      this.client.unsubscribe(this.mtopic, (error)=> {
        console.log('   '+ this.mtopic+'      ',error)
      })
    },

9.연결 끊 기

    //    
    unconnect() {
      this.client.end()
      this.client = null
      console.log('        ！')
    },

10.감청 서버 재 접속

    //         
    reconnect() {
      this.client.on('reconnect', (error) => {
          console.log('    :', error)
      });
    },

총결산
vue 에서 mqtt 서버 를 이용 하여 인 스 턴 트 메 신 저 를 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 는 mqtt 인 스 턴 트 메 신 저 내용 으로 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!