Websockets

CloudMQTT support MQTT over websockets. MQTT over websockets allowes every browser to be a MQTT client. You can push messages to your browser when an event occurs or publish messages to your device. CloudMQTT Websockets Port (TLS only) can be found on the details page for your instance.

The Paho JavaScript Client is a browser-based library that can be used when connecting WebSockets to an MQTT server. Reference documentation can be found here.

Websockets are available on port 3xxxx where your normal MQTT port is 1xxxx.

<script src="mqttws31.js" type="text/javascript"></script>
<script type="text/javascript">

  // Create a client instance
  client = new Paho.MQTT.Client("host", port,"client_id");
  //Example client = new Paho.MQTT.Client("m11.cloudmqtt.com", 32903, "web_" + parseInt(Math.random() * 100, 10));

  // set callback handlers
  client.onConnectionLost = onConnectionLost;
  client.onMessageArrived = onMessageArrived;
  var options = {
    useSSL: true,
    userName: "username",
    password: "password",
    onSuccess:onConnect,
    onFailure:doFail
  }

  // connect the client
  client.connect(options);

  // called when the client connects
  function onConnect() {
    // Once a connection has been made, make a subscription and send a message.
    console.log("onConnect");
    client.subscribe("/cloudmqtt");
    message = new Paho.MQTT.Message("Hello CloudMQTT");
    message.destinationName = "/cloudmqtt";
    client.send(message);
  }

  function doFail(e){
    console.log(e);
  }

  // called when the client loses its connection
  function onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0) {
      console.log("onConnectionLost:"+responseObject.errorMessage);
    }
  }

  // called when a message arrives
  function onMessageArrived(message) {
    console.log("onMessageArrived:"+message.payloadString);
  }
</script>

CloudMQTT Websocket UI

Use the CloudMQTT Websocket UI to publish and view messages and topics, this is ideal for testing and debugging - where you can display live information from a device or sensor in real time. CloudMQTT Websocket client for your browser can be found in the top right corner on the console page of your instance.

The CloudMQTT websocket client is connected to your CloudMQTT instance.