概要
ニフティクラウド MQTT には標準で WebSocket が使える機能があるので使ってみました
ブローカを作成しブラウザでメッセージを受信できるところまでやってみました
環境
- CentOS 6.7 64ibt
- Chrome 46.0
- Paho Javascript Client 1.0.1
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 することができます
これらのツールを使ってメッセージを publish してみましょう
publish するトピックは「hoge」を選択してください
「/hoge」とかスラッシュを付けてもダメなので必ず同一名称のトピックを設定してください
すると先ほど開いておいたサンプルのページに新たにメッセージが届いていることが確認できると思います
最後に
ニフティクラウド MQTT で websocket を試してみました
嵌りそうなポイントは特にありませんでしたが、ユーザ名とパスワードを設定しないとブローカに接続できないので注意してください
また MQTT ポートを使って publish/subscribe しても websocket のポートを使って publish/subscribe したメッセージは受信できないので注意してください
0 件のコメント:
コメントを投稿