JavaScript

This manual will help you to get started with JavaScript and the MQTT.js library for Node.js and browsers.

Get Started

To use the library with Node.js install the package using NPM:

$ npm install mqtt

After that you can require the library in your script:

const mqtt = require("mqtt");

To use the same library in the browser you can add the following tag:

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

The mqtt object is now globally available to all your scripts.

Get started by running the following code:

const mqtt = require("mqtt"); // skip in browser

const client = mqtt.connect("mqtt://public:public@public.cloud.shiftr.io", {
  clientId: "javascript",
});

client.on("connect", function () {
  console.log("connected!");

  client.subscribe("hello");

  setInterval(function () {
    client.publish("hello", "world");
  }, 1000);
});

client.on("message", function (topic, message) {
  console.log(topic + ": " + message.toString());
});

This example script will connect to the public instance and send a hello world message every second. If you see the connected client, and the messages flowing in the real-time graph, you are ready to go!

Browser

Create a index.html file with the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Example</title>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
  </head>
  <body>
    <button id="button">Click Me</button>

    <script>
      const client = mqtt.connect(
        "wss://public:public@public.cloud.shiftr.io",
        {
          clientId: "javascript",
        }
      );

      client.on("connect", function () {
        console.log("connected!");
        client.subscribe("hello");
      });

      client.on("message", function (topic, message) {
        console.log(topic + ": " + message.toString());
      });

      document.querySelector("button").addEventListener("click", function () {
        client.publish("hello", "world");
      });
    </script>
  </body>
</html>

In Detail

In the following section, we will look at the above example script line by line.

A detailed description of the libraries API can also be found in repository on GitHub.

You can create and connect a new client using the mqtt.connect function:

const client = mqtt.connect("mqtt://public:public@public.cloud.shiftr.io", {
  clientId: "javascript",
});

The first argument is the MQTT URI which you can get from your shiftr.io instance.
The second argument is an object with the clientId property, which will be displayed as the connections name in the real-time graph.

When the client has successfully connected the following callback will be executed:

client.on("connect", function () {
  console.log("connected!");
});

After a successful connection you can subscribe to topics:

client.subscribe("hello");

The first argument is the name of the topic to subscribe.

At any point, you can also unsubscribe from a topic.

client.unsubscribe("hello");

The first argument is the name of the topic to unsubscribe.

Publish messages to the other clients:

client.publish("hello", "world");

The first argument is the topic to publish the message to.
The second argument is the payload of the message.

The following callback will executed when new messages are received:

client.on("message", function (topic, message) {
  console.log(topic + ": " + message.toString());
});

Congratulations, now you are able to work with shiftr.io in your JavaScript projects!