Re: note

技術的な知見やポエムなど役に立たない情報を書き連ねる場所

MQTT.jsを使ってブラウザだけでMQTT通信する

MQTT

MQTT.jsを使うとブラウザだけでMQTTトピックの送受信ができるため、通信テストを行ったりプロトタイプの作成が気軽にできるようになります。

GitHub - mqttjs/MQTT.js: The MQTT client for Node.js and the browser

1. コード

以下のコードをindex.htmlと名前を付けて保存します。

<!DOCTYPE html>
<html>
<head>
    <title>MQTT.js Test</title>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
    <p>MQTT.js Test</p>
    
    <input type="button" value="Publish" onclick="OnButtonClick()"/>

    <script>
        <!-- Broker Host Name or IP Address : Port -->
        var client = mqtt.connect('ws://raspberrypi.local:9001');

        client.on('connect', () => {
            console.log('connected');
            client.subscribe('test');
        });

        client.on('message', (topic, message) => {
            console.log(topic + ' : ' + message);
        });

        function OnButtonClick() {
            console.log('onClick');
            client.publish('mqtt/demo', 'hello world!');
        }

    </script>
</body>
</html>

2. ブローカーの準備と設定

MQTT.jsを使用する場合、Websocketを使ってMQTT通信を行うためブローカーがWebsocketに対応している必要があります。今回はRaspberry Pi(ラズパイ)上でMosquittoを使ってブローカーを構築してみます。

ラズパイ上のコマンドからMosquittoをインストールします。

$ sudo apt install mosquitto

次に /etc/mosquitto/mosquitto.config の最後に以下の行を追加します。

listener 1883
listener 9001
protocol websockets

変更を保存したら以下のコマンドでサービスを再起動します。

$ sudo systemctl restart mosquitto

これでMQTT通信のデフォルトで使用するポート1883と9001のポートを利用したWebsocket通信ができるようになります。Websocketのポート番号はindex.htmlで記述したポート番号を指定してください。今回は9001を使用。(ポート1883の記述は不要に思えますが、Websocket通信を追記する場合は必ず必要になります)

このあとの動作確認を行うために、MosquittoのMQTTクライアントも一緒にインストールしておくと良いでしょう。以下のコマンドでインストールできます。

$ sudo apt install mosquitto-clients

3. 実行結果

作成したindex.htmlをブラウザで開きます。

f:id:hik0leaf:20190518160401p:plain
ブラウザ表示

ChromeであればデベロッパーツールのConsoleタブで動作ログを確認することができます。問題なく接続できれば「connected」と表示されます。

f:id:hik0leaf:20190518162215p:plain
Chromeデベロッパーツール画面

ラズパイ上でブラウザが送られてくるトピックをMQTTクライアントを使って受信してみます。以下のコマンドを入力します。

 $ mosquitto_sub -h raspberrypi.local -t mqtt/demo

ブラウザから [Publish] のボタンを押してみてください。ラズパイ上で「hello world!」が表示されれば送信成功です。

次にラズパイ上から以下のコマンドを使ってブラウザへトピックを送ります。

$ mosquitto_pub  -h raspberrypi.local -t test -m "ok"

ブラウザ上のConsoleに「test : ok」と表示されれば受信成功です。

4. まとめ

MQTT.jsを使ってブラウザだけでMQTT通信ができることがわかりました。node.js等を介さずブラウザ単体でMQTTを扱えるため、サクッと開発ツールを作ったり動作チェックをするときに効果を発揮します。

今回はCDNを使ってMQTT.jsを読み込みましたが、インターネットに繋がっていないローカルなネットワークで使いたい場合はmqtt.min.jsをダウンロードしてローカルに保存して読み込むと同じように使用することができます。

また、ブラウザだけでMQTT通信できるライブラリとして他にもpaho-mqttというのがあります。