【Python + Vue.js + Mosquitto】MQTTをさわってみるよ Part.2|Blog(スワブロ)

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

2019.11.06

千田

MQTTをさわってみるよ

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

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

前回の記事はこちら。

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

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

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

今回やること

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

環境

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

1
2
3
4

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

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

1
2
3
4
5
6
7
8
9
10
11

vue-mqttの読み込み

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

plugins/mqtt.js

1
2
3
4
5
6
7
8
9
10
11

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

1
2
3
4
5
6
7
8
9
10

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<template>
<div id="app">
<p>publish</p>
<form>
<input type="text" v-model="message"> 
<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に接続します。

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

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

1
2
3
4
5
6

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!!

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

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

1
2
3
4
5

$ 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クライアントを実装してみたいと思います。

それでは、また次回！

↓↓↓ぜひチェックしてください

～提供中のヒューマンセンシング技術～

◆人物検出技術
歩行者・来店者数計測やロボット搭載も
https://humandetect.pas-ta.io

◆視線検出技術
アイトラッキングや次世代UIに
https://eyetrack.pas-ta.io

◆生体判定技術
eKYC・顔認証のなりすまし対策を！
https://bio-check.pas-ta.io

◆目検出技術
あらゆる目周りデータを高精度に取得
https://pupil.pas-ta.io

◆音声感情認識技術
会話から怒りや喜びの感情を判定
https://feeling.pas-ta.io

◆虹彩認証技術
目の虹彩を利用した生体認証技術
https://iris.pas-ta.io

< Back