sangoの使い方 - JavaScript WebSocket 編

ブラウザのJavaScriptからsangoを使う方法について説明します。

ブラウザからJavaScriptを使用してsangoを使うには、WebSocketを使用します。

sangoのダッシュボードでMQTT接続情報を開くと「WebSocket接続先」の情報が 記載されています。

WebSocket接続先 : ws://example.shiguredo.jp:8080/mqtt

これをメモしておきましょう。

1. JavaScriptを実装する

pahoから mqttws31.js をダウンロードして、読み込ませておきます。

2. クライアントの実装

Connect部分はPub/Subともに共通です。

他の言語ではClientIDは指定しない場合、ランダムな文字列を生成してくれる ものがほとんどですが、JavaScriptの場合は自分で指定する必要があります。 Math.random() などを使い、ランダムな文字列を生成する関数を用意する ほうが良いかと思います。

Connect

var client; // MQTTのクライアントです
var clientId = "clientid-test"; // ClientIDを指定します。

function connect(){
    var user_name = "example@github";
    var pass = "<password>";
    var wsurl = "ws://example.shiguredo.jp:8080/mqtt";

    // WebSocketURLとClientIDからMQTT Clientを作成します
    client = new Paho.MQTT.Client(wsurl, clientId);

    // connectします
    client.connect({userName: user_name, password: pass, onSuccess:onConnect, onFailure: failConnect});
}

// 接続が失敗したら呼び出されます
function failConnect(e) {
    console.log("connect failed");
    console.log(e);
}

// 接続に成功したら呼び出されます
function onConnect() {
    console.log("onConnect");
}

Subscribe

clientの onMessageArrived にコールバック関数を登録し、 subscribe します。

 // メッセージが到着したら呼び出されるコールバック関数
 function onMessageArrived(message) {
     console.log("onMessageArrived:"+message.payloadString);
 }

function subscribe(){
    // コールバック関数を登録します
    client.onMessageArrived = onMessageArrived;

    var topic = "example@github/a/b";
    // Subscribeします
    client.subscribe(topic);
}

Publish

Paho.MQTT.Message でメッセージを作成し、clientの send メソッドを呼び出します。

function publish(){
    var topic = "example@github/a/b";
    message = new Paho.MQTT.Message("Hello");
    message.destinationName = topic;
    client.send(message);
}

sangoの使い方 - Java 編   sangoの使い方 - Python編

Comments

comments powered by Disqus