2015年10月22日木曜日

ニフティクラウドMQTT で WebSocket を使ってみた

概要

ニフティクラウド MQTT には標準で WebSocket が使える機能があるので使ってみました
ブローカを作成しブラウザでメッセージを受信できるところまでやってみました

環境

MQTTブローカ作成

コントロールパネルにログインして作成します

MQTTサーバー作成 -> ダイアログ表示 -> MQTTサーバー名、管理者ユーザー名、管理者パスワードを入力 -> 作成する

で作成完了です

クライアントアプリの作成

WebサーバはなんでもOKです
今回は Apache を想定しています
DocumentRoot に展開しているのでパスは環境に合わせて適宜変更してください

  • cd /var/www/html
  • wget http://git.eclipse.org/c/paho/org.eclipse.paho.mqtt.javascript.git/plain/src/mqttws31.js
  • touch index.html
  • emacs index.html
<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <script src="mqttws31.js" type="text/javascript"></script>
  <script type="text/javascript">
    var wsbroker = "your.mqtt.domain";
    var wsport = xxxxxx // port for above
    var username = "username"
    var password = "password"

    var client = new Paho.MQTT.Client(wsbroker, wsport, "myclientid_" + parseInt(Math.random() * 100, 10));
    client.onConnectionLost = function (responseObject) {
      console.log("connection lost: " + responseObject.errorMessage);
    };
    client.onMessageArrived = function (message) {
      var div_element = document.createElement("div");
      div_element.innerHTML = '<b>' + message.payloadString + '</b>';
      var parent_object = document.getElementById("messages");
      parent_object.appendChild(div_element);
      console.log(message.destinationName, ' -- ', message.payloadString);
    };
    var options = {
      timeout: 3,
      onSuccess: function () {
        console.log("mqtt connected");
        // Connection succeeded; subscribe to our topic, you can add multile lines of these
        client.subscribe('hoge', {qos: 1});

        //use the below if you want to publish to a topic on connect
        message = new Paho.MQTT.Message("Hello");
        message.destinationName = "hoge";
        client.send(message);
      },
      onFailure: function (message) {
        console.log("Connection failed: " + message.errorMessage);
      }
    };
    options.userName = username;
    options.password = password;
    function init() {
        client.connect(options);
    }
    </script>
  </head>
  <body onload="init();">
    <div id="messages"></div>
  </body>
</html>

JavaScript 部分の冒頭の wsbroker, wsport, username, password を作成した MQTTサーバーの情報に書き換えれば基本は動作すると思います

説明

簡単にポイントを説明します

まず書き換える部分の 4 箇所ですがこれはコントールパネルで確認することができます
作成した MQTT サーバーの「基本情報」を確認できるのでそこに記載してある情報を入力してください
一点注意しなければいけないのはポートの部分で、これは「WebSocketポート」に記載のポート番号を入力してください
「MQTTポート」ではないです

var client = new Paho.MQTT.Client(wsbroker, wsport, “myclientid_” + parseInt(Math.random() * 100, 10));

の部分で MQTT ブローカに接続するためのクライアントを生成しています

client.onMessageArrived

でメッセージが受信したときの処理を記載しています
今回は受信したメッセージを<div>タグを使ってそのまま出力しています

onSuccess, onFailure

で MQTT ブローカに接続できたかどうかを判断します
接続できた場合は onSuccess が自動的にコールされ、接続に失敗した場合は onFailure が呼ばれます
onSuccess と同時に client.subscribe('hoge', {qos: 1}); を呼び subscribe を開始しています
また、今回は接続できたと同時に hoge というトピックに対してメッセージを送信しています

message = new Paho.MQTT.Message(“Hello”);
message.destinationName = “hoge”;
client.send(message);

そのためこの HTML ページにアクセスした瞬間「Hello」というメッセージが確認できると思います

動作を確認してみる

WebSocket に publish できるツールがあればそれ使うのが一番です
もしない場合は
http://www.hivemq.com/demos/websocket-client/
なんかを使うといいかもしれません
ドメイン、ポート、ユーザ名、パスワードを入力して connect してメッセージを publish することができます
input_hivemq_connect.png

これらのツールを使ってメッセージを publish してみましょう
publish するトピックは「hoge」を選択してください
「/hoge」とかスラッシュを付けてもダメなので必ず同一名称のトピックを設定してください
publish_message_with_hivemq.png

すると先ほど開いておいたサンプルのページに新たにメッセージが届いていることが確認できると思います
confirm_page.png

最後に

ニフティクラウド MQTT で websocket を試してみました
嵌りそうなポイントは特にありませんでしたが、ユーザ名とパスワードを設定しないとブローカに接続できないので注意してください
また MQTT ポートを使って publish/subscribe しても websocket のポートを使って publish/subscribe したメッセージは受信できないので注意してください

0 件のコメント:

コメントを投稿