Universidad Tecnológica de Tijuana

Tecnologías de Información

Lab Experiment #17. Updated MQTT-Websockets library, for

HighCharts real-time data feed.
Objetivo
Desarrollar una página HTML con JavaScript que invoque las funciones de librería de Highcharts para
graficar datos en tiempo real que se alimente a través de MQTT-Websockets.
Material
Laptop con herramientas de desarrollo y buscador web (Chrome, mozilla o Edge)
Conexión WiFi y comunicación remota al Internet
Instalada la herrmienta MQTTbox o similar

Documentación
Cada uno de los pasos seguidos en la práctica debe ser documentado con una descripción y
una imagen, sea fotografía o captura de pantalla.

Las capturas de pantalla deben ser claras y deben ser “legibles”, de otra manera se “anula”
su calificación de la práctica respectiva.

Es importante que incluya captura de pantalla de los listados que usted capturó, no lo que se
presentan de forma genérica en las prácticas.

DESARROLLO:

1. Debe tener instalado el programa MQTTBox en su Laptop o PCbe, tal instalación de hizo
desde que se empezaron las prácticas de MQTT.

2. Analice y capture en un IDE el código en HTML y Javascript que se presenta al final de este
documento, nómbrelo LE17_WS_HC.html (o algo así para que se distinga de los demás
archivos), guárdelo en el directorio del experimento 16 anterior, que se ubica en la raíz de su
servidor web, denominado /mqtt-websockets. No olvide sustituir su “matrícula” por los
dígitos 1234567890 que se localicen en los programas.

3. En su Laptop o PC abra un web browser (Chrome, Mozilla o Edge). Ingrese la dirección

siguiente en el URL:
http://localhost/mqtt-websockets/LE17_WS_HC.html

Aplicaciones de IoT Lab. Experiment #17 Pág. 1/6

 Universidad Tecnológica de Tijuana
Tecnologías de Información

Fig. 1. Página con highcharts cargada en el browser.

Fig. 2. Página cargada directamente desde localhost en el navegador.

Y en el browser, abrir las “herramientas del desarrollador”, para observar en la consola por
posibles errores y su debbuging.

Fig. 3. En el browser, debe abrir las herramientas del desarrollador.

 Fig. 4. Página web mostrando las herramientas del desarrollador y funcionando correctamente.

4. Ejecutar la aplicación MQTTbox conectándose al broker MQTT y puerto indicados.

Deberá entonces enviar valores numéricos de prueba entre 10 y 100, al tópico siguientes:

Broker: broker.hivemq.com
Port: 8000
Topic: UTT/1234567890/send/onevalue

Fig. 4. MQTTBox conectada apunto de mandar mensajes a la página web.

Aplicaciones de IoT Lab. Experiment #17 Pág. 2/6

 Universidad Tecnológica de Tijuana
Tecnologías de Información

Fig. 6. MQTTbox application, connected to the broker and sending single number values.
5. En la gráfica de Highcharts de la página cargada al browser deberán empezar a graficarse los
valores. Si no funciona, puede observarse en la “consola” del desarrollador avisos y errores que
puedan surgir. Aproveche los avisos para depurar el código en caso que sea necesario.

Fig. 7. Highcharts receiving and displaying the values sent through Websockets.
 Fig. 8. Página web funcionando correctamente desde localhost recibiendo los mensajes desde
MQTTBox.

Aplicaciones de IoT Lab. Experiment #17 Pág. 3/6

 Universidad Tecnológica de Tijuana
Tecnologías de Información

LE17_WS_HC.html :
Código que contiene HTML y JavaScript. Utiliza la librería actualizada de mqttws31.js

Aplicaciones de IoT Lab. Experiment #17 Pág. 4/6

 Universidad Tecnológica de Tijuana
Tecnologías de Información

Aplicaciones de IoT Lab. Experiment #17 Pág. 5/6

 Universidad Tecnológica de Tijuana
Tecnologías de Información

The end

Aplicaciones de IoT Lab. Experiment #17 Pág. 6/6