ブラウザでMQTTクライアント (Paho)

IoT Web系

Pahoとは

PahoとはオープンソースのMQTTクライアントのライブラリです。Pahoはさまざまな言語で実装されています。(Java, Python, JavaScript, C, C++, C#, Goなど)　今回はブラウザベースで使えるJavaScript版の使い方を説明します。JavaScript版Pahoは、MQTT over WebSocketプロトコルを使っており、MQTTブローカーとの通信はWebSocket上でおこなわれます。当然ながらMQTTブローカー側がMQTT over WebSocketに対応している必要があります。
www.eclipse.org

ダウンロード

JavaScript版の説明は下記のページにあります。

ダウンロードは下記のページの「JavaScript client x.x.x」のリンクからできます。

paho.javascript-x.x.x.zipを解凍すると、フル版のpaho-mqtt.jsと圧縮版のpaho-mqtt-min.jsが得られます。これがJavaScript版Pahoライブラリです。これを自分のWebアプリに配置して使います。上記の説明ページにはソースからのビルド方法についても書かれていますが、なんのことかよく分からないので今回は無視します。

CDNでの利用

または、CDNで配信されているものを利用する方法もあります。ただし、少しバージョンが古いようです。

<!-- フル版 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<!-- 圧縮版 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>

使い方

  // MQTTクライアント生成
  var client = new Paho.MQTT.Client(
    "MQTTブローカーのドメイン",
    WebSocketポート番号,
    "web_" + parseInt(Math.random() * 100, 10));

  // コールバックの定義
  client.onConnectionLost = onConnectionLost; // 接続が切れたとき
  client.onMessageArrived = onMessageArrived; // メッセージ受信したとき

  // 接続
  var options = {
    useSSL: true,
    userName: "ユーザー名",
    password: "パスワード",
    onSuccess:onConnect, // 接続したときのコールバック
    onFailure:doFail // 失敗したときのコールバック
  }
  client.connect(options);

  // 接続したとき
  function onConnect() {
    console.log("onConnect");
    
    // トピックを購読する
    client.subscribe("トピック名");
    
    // トピックにメッセージを発行してみる
    message = new Paho.MQTT.Message("Hello, World!");
    message.destinationName = "トピック名";
    client.send(message);
  }
  
  // 失敗したとき
  function doFail(e){
    console.log(e);
  }

  // 接続が切れたとき
  function onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0) {
      console.log("onConnectionLost:"+responseObject.errorMessage);
    }
  }

  // メッセージを受信したとき
  function onMessageArrived(message) {
    console.log("onMessageArrived:"+message.payloadString);
  }

リファレンスドキュメント