Vue 프로젝트에서 MQTT를 사용하는 방법

Vue은 사용자 인터페이스 구축을 위한 프로그레시브 프레임워크입니다. 다른 모놀리식 프레임워크와 달리 Vue는 처음부터 점진적으로 채택할 수 있도록 설계되었습니다. 핵심 라이브러리는 보기 계층에만 집중되어 있으며 다른 라이브러리 또는 기존 프로젝트와 쉽게 선택하고 통합할 수 있습니다. 반면에 Vue는 최신 도구 및 지원 라이브러리와 함께 사용할 때 정교한 단일 페이지 애플리케이션을 완벽하게 지원할 수 있습니다.

MQTT은 게시/구독 모델을 기반으로 하는 일종의 경량 IoT 메시징 프로토콜입니다. 이 프로토콜은 일대다 메시지 배포 및 응용 프로그램 분리를 제공합니다. 그것은 낮은 전송 소비 및 프로토콜 데이터 교환, 최소화된 네트워크 트래픽, 서로 다른 배달 요구를 충족할 수 있는 메시지의 세 가지 서비스 품질 수준과 같은 몇 가지 장점이 있습니다.

이 기사는 주로 Vue 프로젝트에서 MQTT를 사용하는 방법과 클라이언트와 MQTT 브로커 간의 연결, 구독, 메시징, 구독 취소 및 기타 기능을 구현하는 방법을 소개합니다.

프로젝트 초기화

프로젝트 만들기

참조 링크는 다음과 같습니다.

Use Vue CLI create Vue project

Create Vue project through introduce Vue.js

예:

vue create vue-mqtt-test

MQTT 클라이언트 라이브러리 설치

The following method 2 and 3 are more suitable for the project that directly introduces Vue.js.

npm 또는 yarn(둘 중 하나)을 사용하여 명령줄에서 설치

   npm install mqtt --save
   # or yarn
   yarn add mqtt

CDN을 통해 가져오기

   <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

로컬로 다운로드한 다음 상대 경로를 사용하여 가져오기

   <script src="/your/path/to/mqtt.min.js"></script>

MQTT의 사용

MQTT 브로커에 연결

이 글은 EMQX에서 제공하는 free public MQTT broker을 사용합니다. 본 서비스는 EMQXMQTT IoT cloud platform를 기반으로 제작되었습니다. 브로커 액세스에 대한 정보는 다음과 같습니다.

브로커: broker.emqx.io

TCP 포트: 1883

웹 소켓 포트: 8083

연결 키 코드:

<script>
import mqtt from 'mqtt'

export default {
  data() {
    return {
      connection: {
        host: 'broker.emqx.io',
        port: 8083,
        endpoint: '/mqtt',
        clean: true, // Reserved session
        connectTimeout: 4000, // Time out
        reconnectPeriod: 4000, // Reconnection interval
        // Certification Information
        clientId: 'mqttjs_3be2c321',
        username: 'emqx_test',
        password: 'emqx_test',
      },
      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: {
    // Create connection
    createConnection() {
      // Connect string, and specify the connection method used through protocol
      // ws unencrypted WebSocket connection
      // wss encrypted WebSocket connection
      // mqtt unencrypted TCP connection
      // mqtts encrypted TCP connection
      // wxs WeChat mini app connection
      // alis Alipay mini app connection
      const { host, port, endpoint, ...options } = this.connection
      const connectUrl = `ws://${host}:${port}${endpoint}`
      try {
        this.client = mqtt.connect(connectUrl, options)
      } catch (error) {
        console.log('mqtt.connect error', error)
      }
      this.client.on('connect', () => {
        console.log('Connection succeeded!')
      })
      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}`)
      })
    },
  }
}
</script>

주제 구독하기

doSubscribe() {
  const { topic, qos } = this.subscription
  this.client.subscribe(topic, { qos }, (error, res) => {
    if (error) {
      console.log('Subscribe to topics error', error)
      return
    }
    this.subscribeSuccess = true
    console.log('Subscribe to topics res', res)
    })
},

구독 취소

doUnSubscribe() {
  const { topic } = this.subscription
  this.client.unsubscribe(topic, error => {
    if (error) {
      console.log('Unsubscribe error', error)
    }
  })
}

메시지 게시

doPublish() {
  const { topic, qos, payload } = this.publication
  this.client.publish(topic, payload, qos, error => {
    if (error) {
      console.log('Publish error', error)
    }
  })
}

연결 끊기

destroyConnection() {
  if (this.client.connected) {
    try {
      this.client.end()
      this.client = {
        connected: false,
      }
      console.log('Successfully disconnected!')
    } catch (error) {
      console.log('Disconnect failed', error.toString())
    }
  }
}

테스트

Vue를 사용하여 다음과 같은 간단한 브라우저 애플리케이션을 작성합니다. 이 응용 프로그램에는 연결 생성, 주제 구독, 메시징, 구독 취소, 연결 해제 및 기타 기능이 있습니다.

이 프로젝트의 전체 코드: https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Vue.js .



MQTT 5.0 client tool - MQTT X을 다른 클라이언트로 사용하여 메시징을 테스트하십시오.



브라우저 측에서 구독을 취소하면 MQTT X가 두 번째 메시지를 보내기 전에 브라우저가 MQTT X에서 후속 메시지를 수신하지 않습니다.

요약

요약하면 Vue 프로젝트에서 MQTT 연결 생성, 시뮬레이션된 구독, 메시지 송수신, 구독 취소 및 클라이언트와 MQTT 브로커 간의 연결 해제를 구현했습니다.

가장 많이 사용되는 3대 프론트엔드 프레임 중 하나인 Vue는 브라우저 측에서 사용할 수 있으며 모바일 측에서도 사용할 수 있습니다. MQTT protocol 및 MQTT IoT cloud service을 결합하면 고객 서비스 채팅 시스템 또는 IoT 장치 정보를 실시간으로 모니터링하는 관리 시스템과 같은 많은 흥미로운 응용 프로그램을 개발할 수 있습니다.