Adding real time using Socket.IO

Using the socket.IO library, create a simple real-time widget with Ubidots and the HTML Canvas.

Socket.IO is a JS library easy to implement that manages socket connections and messages, thus enabling a bi-directional real-time connection protocol. Ubidots has implemented this real-time protocol within its core servers to easily update devices, to retrieve and store data inside any JS variable, and without the need to implement any requests, using sockets. Socket.IO is an easy-to-implement JavaScript library that manages socket connections and messages, enabling a bi-directional real-time connection protocol. Ubidots implements this real-time protocol in its core servers, so you can easily update devices and retrieve or store data inside any JavaScript variable without making requests.

The following example shows how to create an HTML Canvas widget that displays a variable's data in real time. This example builds on Create an LCD screen with the HTML Canvas, so complete that section first.

Create the HTML element where the data will be displayed:

<p id="content"></p>

Add the widget logic with the following JavaScript code:

var socket;
var srv = window.location.hostname + ":443"; //this allows the widget to work at the white label level
var VAR_ID = "variable-id"; // Put here your var Id
var TOKEN = "YOUR-TOKEN"  // Put here your token
$(document).ready(function () {
    // Implements the connection to the server
    socket = io.connect("https://" + srv, { path: '/notifications' });
    var subscribedVars = [];

    // Function to publish the variable ID
    var subscribeVariable = function (variable, callback) {
        // Publishes the variable ID that wishes to listen
        socket.emit('rt/variables/id/last_value', {
            variable: variable
        });
        // Listens for changes
        socket.on('rt/variables/' + variable + '/last_value', callback);
        subscribedVars.push(variable);
    };

    // Function to unsubscribed for listening
    var unSubscribeVariable = function (variable) {
        socket.emit('unsub/rt/variables/id/last_value', {
            variable: variable
        });
        var pst = subscribedVars.indexOf(variable);
        if (pst !== -1) {
            subscribedVars.splice(pst, 1);
        }
    };

    var connectSocket = function () {

        // Implements the socket connection
        socket.on('connect', function () {
            socket.emit('authentication', { token: TOKEN });
        });
        window.addEventListener('online', function () {
            socket.emit('authentication', { token: TOKEN });
        });
        socket.on('authenticated', function () {
            subscribedVars.forEach(function (variable_id) {
                socket.emit('rt/variables/id/last_value', { variable: variable_id });
            });
        });
    }

    /* Main Routine */

    connectSocket();
    // Should try to connect again if connection is lost
    socket.on('reconnect', connectSocket);

    // Subscribe Variable with your own code.
    subscribeVariable(VAR_ID, function (value) {
        var parsedValue = JSON.parse(value);
        console.log(parsedValue);
        $('#content').text(value);
    })
});

You will need the following third-party libraries:

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/socket.io.min.js

The result looks like this: