masato's web site
0%

MeshbluのRESTとMQTTのメッセージをWebブラウザで直接受信する

Posted on In
MeshbluにはWebブラウザで使うmeshblu.jsのJavaScriptライブラリがあります。ArduinoなどからMQTTでpublishしたセンシングデータを通常のWebブラウザ上で受信できるようになります。JavaScriptが使える環境は多いのでコネクテッドデバイス間のメッセージングの選択肢が広がります。

MeshbluにはWebブラウザで使うMeshblu.jsのJavaScriptライブラリがあります。ArduinoなどからMQTTでpublishしたセンシングデータを通常のWebブラウザ上で受信できるようになります。JavaScriptが使える環境は多いのでコネクテッドデバイス間のメッセージングの選択肢が広がります。

デバイスの作成

Meshbluのデバイス情報のprotocolキーに使用しているプロトコルが記述されています。同じデバイスを使ってWebSocketとMQTTのメッセージ送信をする場合はprotocolを書き換える必要があります。WebSocketとMQTTのテスト用にデバイスを２つ用意します。

WebSocket用のデバイスを作成します。

$ curl -X POST \
  "http://localhost/devices" \
  -d "name=websocket-pubsub&uuid=websocket-pubsub&protocol=websocket&token=A9plQrTH"

MQTT用のデバイスを作成します。

$ curl -X POST \
  "http://localhost/devices" \
  -d "name=mqtt-pub&uuid=mqtt-pub&protocol=mqtt&token=RdHBvvYZ"

index.html

Meshbluのブローカーからメッセージを受信するJavaScriptを書きます。ローカルの適当な場所に配置するだけです。WebSocketでSubscribeするデバイスはwebsocket-pubsubをIDに持ちます。createConnectionのserverはMeshbluが起動しているホスト名またはIPアドレスを指定します。

~/Documents/meshblu/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Meshblu.js</title>
    <script src="http://meshblu.octoblu.com/js/meshblu.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
      var conn = meshblu.createConnection({
        "uuid": "websocket-pubsub",
        "token": "A9plQrTH",
        "server": "{MESHBLU_BROKER}}",
        "port": 80
      });
      conn.on('ready', function(data){
        console.log('UUID AUTHENTICATED!');
        console.log(data);
        conn.on('message', function (message) {
          console.log('message received', message);
          $(".activity").prepend(JSON.stringify(message) + '<br />');
        });
      });
    </script>
  </head>
  <body>
   <p>Subscribe Messages</p>
   <div class="activity"></div>
  </body>
</html>

WebSocketとMQTTのテスト

日本語を含んだpayloadがWebブラウザで正常に表示されるかも試します。Chromeブラウザから先ほど作成したローカルのindex.htmlファイルを開きます。

最初にcurlコマンドからメッセージをHTTP POSTします。payloadに”川崎”という日本語を追加しました。

$ curl -X POST  \
  http://localhost/messages  \
  -d '{"devices": ["websocket-pubsub"], "payload": {"temperature":25,"city":"川崎"}}'  \
  --header "meshblu_auth_uuid: websocket-pubsub"  \
  --header "meshblu_auth_token: A9plQrTH"

次にMosquittoからメッセージをMQTT publishします。同様にpayloadには日本語を含んでいます。

$ mosquitto_pub \
  -h localhost  \
  -p 1883 \
  -t message \
  -m '{"devices": "websocket-pubsub", "payload": {"temperature":26,"city":"横浜"}}' \
  -u mqtt-pub \
  -P RdHBvvYZ \
  -d

ブラウザに2つの日本語を含むメッセージが正常に表示されました。

Meshblujs.png