こんにちは、せんだです。

 

さて前回に引き続きMQTTを使ったアプリを作っていきたいと思います。

前回の記事はこちら。

【Python + Vue.js + Mosquitto】MQTTをさわってみるよ Part.1

 

前回はMosquittoを使ってMQTTブローカーを構築しました。

今回はMQTTブローカーに接続して実際にメッセージのやりとりをするクライアント側をVue.jsとvue-mqttを使って作ってみたいと思います。

 

今回やること

1. Vue.jsとvue-mqttのインストール
2. vue-mqttの読み込み
3. mqttクライアントの実装
4. 動作確認

 

環境

端末: Mac Book Pro

Vue.js：2.6.10

vue cli:3.5.5

vue-mqtt:2.0.3

 

それでは早速やっていきましょう！

 

Vue.jsとvue-mqttのインストール

まず最初にvue createで適当なプロジェクトを作りましょう。

vue cliのインストール方法についてはこちらのむつたくの記事をご覧ください。

 

$ vue create vue-mqtt-qpp
$ cd vue-mqtt-app
$ npm install
$ npm install vue-mqtt --save

 

今回はこんな感じのディレクトリ構成で作っていく事にします。

 

vue-mqtt-app
 |
 |_node_modules
 |_package.json
 |_public
 |_src
    |_plugins
    |  |_mqtt.js
    |
    |_App.vue
    |_main.js

 

vue-mqttの読み込み

それではまずVue.jsプロジェクトでvue-mqttを利用できるように読み込みます。

 

plugins/mqtt.js

import Vue from 'vue'
import VueMqtt from 'vue-mqtt'

const option = {
  username: [Mosquittoに接続するユーザー],
  password: [Mosquittoに接続するパスワード]
}

Vue.use(VueMqtt, 'ws://[接続先ホスト]', option) // mqtt on websocketなのでws://

export default VueMqtt

main.js

import Vue from 'vue'
import App from './App.vue'
import mqtt from './plugins/mqtt'

Vue.config.productionTip = false

new Vue({
  mqtt,
  render: h => h(App)
}).$mount('#app')

 

はい、これで準備OKです。

 

mqttクライアントの実装

それでは、実際にMQTTを使った実装を行います。

今回はメッセージの送信（publish）と受信（subscribe）の両方に対応したいと思います。

 

App.vue

<template>
  <div id="app">
    <p>publish</p>
    <form>
      <input type="text" v-model="message"> <!-- 入力した値をpublishする -->
      <button type="button" @click="pubMessage()">publish</button>
    </form>
    <p>messages</p>
    <!-- ここに受信したメッセージ一覧が表示される -->
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <!-- ここまで -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [],
      topic: 'mqtt/test',
      message: ''
    }
  },
  methods: {
    // メッセージ送信処理
    pubMessage () {
      this.$mqtt.publish(this.topic, this.message)
    },
    // メッセージ受信処理
    onMessage (topic, subMessage) {
      this.items.push(subMessage)
    },
    onConnect () {
      console.log('connect!!')
    }
  },
  created () {
    this.$mqtt.on('connect', this.onConnect)
    this.$mqtt.on('message', this.onMessage)
    // メッセージのsubscribe処理
    this.$mqtt.subscribe(this.topic)
  }
}
</script>

 

動作確認

最後にターミナルとブラウザを使って動作確認してみましょう。ターミナルを開いて下記のコマンドでMosquittoに接続します。

 

$ mosquitto_sub -d -t mqtt/test -u [ユーザー] -P [パスワード]

 

それではまず、publishから試してみます。ブラウザのテキストに「Hello!!」と入力してpublishボタンをクリックしてください。するとこんな感じでターミナルに「Hello!!」と表示されると思います。

Client mosqsub/20419-xxxx sending CONNECT
Client mosqsub/20419-xxxx received CONNACK
Client mosqsub/20419-xxxx sending SUBSCRIBE (Mid: 1, Topic: mqtt/test, QoS: 0)
Client mosqsub/20419-xxxx received SUBACK
Subscribed (mid: 1): 0
Hello!!

 

では、今度はメッセージ受信の確認をします。

ターミナルから下記のコマンドを入力して実行してみます。

 

$ mosquitto_pub -d -t mqtt/test -m 'Hey!!' -u [ユーザー] -P [パスワード]
Client mosqpub/20499-xxxx sending CONNECT
Client mosqpub/20499-xxxx received CONNACK
Client mosqpub/20499-xxxx sending PUBLISH (d0, q0, r0, m1, 'mqtt/test', ... (5 bytes))
Client mosqpub/20499-xxxx sending DISCONNECT

すると、ブラウザのメッセージ表示箇所に「Hey!!」と表示されていると思います。ちなみに、今回はpublishとsubscribeのTopic名が同じなのでpublishしたメッセージも表示されていると思います。

これでpublishとsubscribeの両方の動作確認も完了です！！

 

まとめ

今回はVue.jsとvue-mqttを使ってMQTTクライアントを実装してみました。比較的簡単に実装できる事が伝わったかと思います。

次回はpythonとpahoを使って別のMQTTクライアントを実装してみたいと思います。

 

それでは、また次回！