mean socket io integration tutorial socketio logo

Extendiendo este pequeño tutorial seremos capaces de controlar las diferentes funcionalidades de Arduino desde nuestro teléfono, con esto podemos decir que sería interesante realizar un completo proyecto de domótica en donde podremos monitorear nuestros sensores (vease Este este tutorial sobre leer sensores) y complementando con el control de los mismos.

 

 

 

Para entender la idea básica del sistema haremos un muy sencillo montaje que no es mas que un led , una resistencia y un Arduino UNO ( el led debe ir al pin 7 de Arduino y a tierra tal como está en la imagen)

 

Untitled Sketch 2 bb

 

Una vez hecho el montaje vamos a programar el Arduino con el siguiente sketch

 

firmata

 

Recuerden que para poder hacer este proyecto deben tener instalado Node.js, johnny-five, Socket.io y express, si no han realizado estas acciones remitanse a este artículo

Una vez preparado el proyecto procederemos con el código:

Código del Servidor: (server_led.js)

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var PORT = process.env.PORT || 8080;
var five = require("johnny-five");
app.get('/', function(req, res) {
res.sendFile(__dirname + '/led_control.html');

});
var led;
var board = new five.Board();
board.on("ready", function() {
 led = new five.Led(7);
});

io.on('connection', function(socket) {
//this.pinMode(13, five.Pin.OUTPUT);
 socket.on('turn_on', function(msj) {
//this.digitalWrite(13, 1);
 led.on();
 socket.emit('status', 'on');
 //console.log('on');
});
 socket.on('turn_off', function(msj) {
//this.digitalWrite(13, 0);
 led.off();
 socket.emit('status', 'off');
 //console.log('off');
});
});
http.listen(PORT, function() {
 console.log('el servidor esta escuchando el puerto %s', PORT);
});
 

 

Código del cliente (led_control.html)

<!DOCTYPE html>
<html>
<head>
 <title>Pruebas con elycharts</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function() {
var socket = io();
$("#on").on('click', function() {
 socket.emit('turn_on','on');
 
 });
$("#off").on('click', function() {
 socket.emit('turn_off','off');
 });
socket.on('status', function(msg) {

$("#status").text(msg);
});
 
});
</script>
</head>
<body>
<button id="on">ON</button>
<button id="off">OFF</button>
<div id="status"></div>
</body>
</html>

 

 Ahora para poder ver la aplicación en su teléfono celular este debe estar en la misma red wi fi del computador, finalmente lo que deben hacer es teclear 

ipconfig/all

Y buscar la dirección ip v4 de su computador:

 

ipconfig

 

Anoten esa dirección en algún lugar.

Finalmente lo último que debemos hacer es en nuestra consola ubicarno en nuestra carpeta donde tenemos instalado nodejs y teclear el siguiente código:

 

node server_led.js

 

Una vez corriendo el servidor van a su telefono celular y teclean en un navegador su direccion ip con el puerto por el que el servidor esta escuchando:

por ejemplo si mi ip es 192.168.1.1 entonces en mi celular la ip debe ser 192.168.1.1:8080 y de esta manera la aplicación aparecerá en el teléfono

 

Aqui va un video del funcionamiento del proyecto:

Esto ha sido todo: no olviden suscribirse en nuestro portal y seguirnos en twitter: @emb_ideas.

 

Saludos