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);
}