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

 

さて前回に引き続き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のインストール方法についてはこちらのむつたくの記事をご覧ください。

 

[cc_bash]
$ vue create vue-mqtt-qpp
$ cd vue-mqtt-app
$ npm install
$ npm install vue-mqtt –save
[/cc_bash]

 

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

 

[cc_bash]

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

[/cc_bash]

 

vue-mqttの読み込み

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

 

plugins/mqtt.js

[cc_javascript]

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

[/cc_javascript]

main.js

[cc_javascript]

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’)

[/cc_javascript]

 

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

 

mqttクライアントの実装

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

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

 

App.vue

[cc_javascript]

[/cc_javascript]

 

動作確認

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

 

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

 

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

[cc_bash]
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!!
[/cc_bash]

 

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

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

 

[cc_bash]
$ 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
[/cc_bash]

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

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

 

まとめ

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

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

 

それでは、また次回！