|
Tutorial del Internet de las Cosas con el ESP8266
Juan Antonio Villalpando
Volver al índice del tutorial
____________________________
117D2.- test.mosquitto.org. App Inventor.
- Eclipse utilizaba la dirección iot.eclipse.org, la cambiaron a mqtt.eclipse.org de manera que algunos scripts realizado con anterioridad dejaron de funcionar.
- Así que ahora vamos a utilizar el broker test.mosquitto.org y App Inventor.
- Solo se tratará de encender/apagar el LED2 de la placa (Adapta el LED según utilices el ESP32 o el ESP8266)
- Lo haremos mediante un archivo html llamado mosquitto.htm, además necesitaremos tres archivos más.
- El Topic será: juan/led2 Según pongamos en Payload la letra a o la letra b, se apagará/encenderá el LED2.
- También nos suscribimos a juan/led2, para ver la información que enviamos.
__________________________________________________________________
- Enviar y Recibir en la aplicación de App Inventor.
 p117D2_mosquitto_mqtt.aia
- Según pongamos en Payload la letra a o la letra b, se apagará/encenderá el LED2.
- Vamos a necesitar estos 4 archivos, que los subiremos a nuestra aplicación de App Inventor.
- jquery-1.7.2.min.js
- mosquitto.js
- tmo.js
- mosquitto.htm
- Muestro los dos últimos:
tmo.js |
(function() {
window.Main = {};
Main.Page = (function() {
var mosq = null;
function Page() {
var _this = this;
mosq = new Mosquitto();
$('#connect-button').click(function() {
return _this.connect();
});
$('#disconnect-button').click(function() {
return _this.disconnect();
});
$('#subscribe-button').click(function() {
return _this.subscribe();
});
$('#unsubscribe-button').click(function() {
return _this.unsubscribe();
});
$('#publish-button').click(function() {
return _this.publish();
});
mosq.onconnect = function(rc){
var p = document.createElement("p");
p.innerHTML = "CONNACK " + rc;
$("#debug").append(p);
};
mosq.ondisconnect = function(rc){
var p = document.createElement("p");
p.innerHTML = "Lost connection";
$("#debug").append(p);
};
mosq.onmessage = function(topic, payload, qos){
var p = document.createElement("p");
p.innerHTML = "PUBLISH " + topic + " " + payload;
$("#debug").append(p);
};
}
Page.prototype.connect = function(){
var url = "ws://test.mosquitto.org:8080/mqtt";
// var url = "mqtt.eclipse.org:1883";
mosq.connect(url);
};
Page.prototype.disconnect = function(){
mosq.disconnect();
};
Page.prototype.subscribe = function(){
var topic = $('#sub-topic-text')[0].value;
mosq.subscribe(topic, 0);
};
Page.prototype.unsubscribe = function(){
var topic = $('#sub-topic-text')[0].value;
mosq.unsubscribe(topic);
};
Page.prototype.publish = function(){
var topic = $('#pub-topic-text')[0].value;
var payload = $('#payload-text')[0].value;
mosq.publish(topic, payload, 0);
};
return Page;
})();
$(function(){
return Main.controller = new Main.Page;
});
}).call(this);
|
mosquitto.htm |
<!DOCTYPE html>
<html><head><title>MQTT - KIO4.COM</title>
<script type='text/javascript' src='mosquitto.js'></script>
<script type='text/javascript' src='jquery-1.7.2.min.js'></script>
</head><body>
<div id="broker">
<h2>Broker</h2>
<input class="but" id="connect-button" type="button" value="Conectar">
<input class="but" id="disconnect-button" type="button" value="Desconectar">
</div>
<div id="publish">
<h2>Publish</h2>
<p>Topic: <input class="txt" id="pub-topic-text" type="text" value="juan/led2"></p>
<p>Payload: <input class="txt" id="payload-text" type="text" value="b"></p>
</div>
<div id="subscribe">
<h2>Subscribe/Unsubscribe</h2>
<input class="but" id="publish-button" type="button" value="Publish">
<p>Topic: <input class="txt" id="sub-topic-text" type="text" value="juan/led2"></p>
<input name="button" type="button" class="but" id="subscribe-button" value="Subscribe">
<input class="but" id="unsubscribe-button" type="button" value="Unsubscribe">
</div>
<script src="tmo.js" type="text/javascript"></script>
</body></html>
|
- Los tres archivos indicados en mosquitto.htm, también se podrían haber obtenidos desde el "exterior" de esta manera:
<script type =' text/javascript ' src =' http://test.mosquitto.org/mosquitto.js '> </script>
<script type =' text/javascript ' src =' http://code.jquery.com/jquery-1.7.2.min.js '> </script>
(...)
<script src =" http://test.mosquitto.org/tmo.js " type =" text/javascript "> </script>
- El archivo mosquitto.htm se puede modificar con facilidad con un editor de HTML.
________________
- Diseño.
________________
- Bloques.
file:///mnt/sdcard/AppInventor/assets/mosquitto.htm
Previamente a Generar, debemos cambiar por: file:///android_asset/mosquitto.htm
________________
- Vamos al ESP32 o ESP8266.
- Según utilicemos uno u otro debemos cambiar la variable del LED2.
- En este código está realizado para led2 y led5, en cambio el código del mosquitto.htm solo figura el led2.
- Según pongamos en Payload la letra a o la letra b, se apagará/encenderá el LED2.
mosquitto_ESP32.ino |
// Juan A. Villalpando.
// kio4.com
//#include <ESP8266WiFi.h> // Para ESP8266
#include <WiFi.h> // Para ESP32
WiFiClient WIFI_CLIENT;
#include <PubSubClient.h>
PubSubClient MQTT_CLIENT;
// Nombre y contraseña de tu red WiFi.
const char* ssid = "Red_Wifi";
const char* password = "Clave_Wifi";
const byte led2 = 2; // Si tienes el ESP8266, debes cambiarlo.
const byte led5 = 5; // Si tienes el ESP8266, debes cambiarlo.
void setup() {
Serial.begin(115200);
delay(10);
pinMode(led2, OUTPUT);
pinMode(led5, OUTPUT);
// Conectar con WiFi.
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi conectado.");
Serial.print("IP: ");
Serial.println(WiFi.localIP());
// Configuración de la respuesta.
MQTT_CLIENT.setCallback(callback);
}
// Aquí configuramos lo que debe hacer cuando recibe un valor.
void callback(char* recibido, byte* payload, unsigned int length) {
Serial.print("Mensaje recibido: ");
Serial.print(recibido);
Serial.print(" ");
for (int i=0;i<length;i++) {
char receivedChar = (char)payload[i];
Serial.print(receivedChar);
if (receivedChar == 'a'){digitalWrite(led2, LOW);}
if (receivedChar == 'b'){digitalWrite(led2, HIGH);}
if (receivedChar == 'c'){digitalWrite(led5, HIGH);}
if (receivedChar == 'd'){digitalWrite(led5, LOW);}
}
Serial.println();
}
void loop() {
if (!MQTT_CLIENT.connected()) {
reconnect();
}
MQTT_CLIENT.loop(); // Chequea lo Subscrito.
}
// Reconecta con MQTT broker
void reconnect() {
MQTT_CLIENT.setServer("test.mosquitto.org", 1883);
MQTT_CLIENT.setClient(WIFI_CLIENT);
// Intentando conectar con el broker.
while (!MQTT_CLIENT.connected()) {
Serial.println("Intentando conectar con MQTT.");
MQTT_CLIENT.connect("JuanAntonio");
MQTT_CLIENT.subscribe("juan/led2");
MQTT_CLIENT.subscribe("juan/led5");
// Espera antes de volver a intentarlo.
delay(3000);
}
Serial.println("Conectado a MQTT.");
}
|
________________
- Propuesta.
- En vez de utilizar directamente la página web mosquitto.htm, podemos introducir los datos desde componentes de App Inventor, si queremos hacerlo de esta manera debemos adaptar el código.
- En vez de hacerlo desde una aplicación, lo podemos controlar desde esta página web: (escribe juan/led2 y luego la letra b)
http://test.mosquitto.org/ws.html
- Más información sobre MQTT:
https://aprendiendoarduino.wordpress.com/tag/escalado-mqtt/
_______________________________
|
