Hoje irei falar um pouco sobre como realizar leituras de sensores em Real Time usando Socket.io. Se você não sabe nada sobre Arduino, recomendo começar por aqui; Também se espera que você já saiba usar Node.js, se não, veja antes esse post: Node.js – Iniciando – Criando sua primeira aplicação.
O que é Socket.io?
Uma definição bem simples: Socket.io é uma biblioteca escrita em JavaScript tanto para front-end, quanto para back-end, por isso foi projetada para funcionar em um servidor Node.js. Baseado em eventos, permite comunicação entre o servidor e o cliente sem esforço uma comunicação em Real Time.
O que é Johnny-Five ?
É uma biblioteca também escrita em javascript, porém com o objetivo de ser utilizada na robótica, mantida por uma comunidade de engenheiros; e para tornar isso real, é possível usá-la em diversas placas de prototipagem, entre eles o Arduino, e estaremos justamente usando ele para podermos nos comunicar com a nossa placa.
- Mais sobre Johnny-five aqui.
Vamos fazer leitura de um sensor LDR em tempo real?
Diagrama Fritzing
Código Arduíno
Não iremos fazer nenhum código especifico, iremos usar um pronto que já vem na IDE Arduino, então vá em: Arquivos >> Exemplos >> Firmata >> StandardFirmata e faça o Upload desse código para o sua placa Arduíno. Para saber mais sobre Firmata veja aqui.
Bem, agora vamos começar, crie um projeto com o nome a sua escolha, dentro do seu projeto rode esses comandos:
npm install socket.io
npm install johnny-five
Código JS
Dentro do seu projeto crie um arquivo app.js e coloque o código abaixo, para mais entendimento o código está comentado.
/**
* Exibindo sensores com Socket.io
*/
var http = require('http').createServer(servidor);
var fs = require('fs');
var io = require('socket.io').listen(http);
var five = require('johnny-five');
//Define uma lib do johnny-five
var Fn = five.Fn;
var arduino = new five.Board();
/**
* arduino.on -
*/
arduino.on('ready', function(){
console.log("Arduino Pronto!");
/**
* Define o sensor de lus LDR...
* scale - Usa-se para definir que a leitura acontese de 0 à 100 [valorInicial, valorFinal]
*/
var sensorLuz = new five.Sensor("A0").scale([0, 100]);
/**
* sensorLuz.on - Envia os valores lidos pelo sensor, para o socket.io exibir na pagina html..
* io.emit - envia dados.
* toFixed() - Arendondamento de valores.
*/
sensorLuz.on('change', function(){
io.emit('sensorLuz', this.value.toFixed() + '%');
});
});
/**
* servidor -
*/
function servidor(req, res){
res.writeHead(200);
res.end(fs.readFileSync('view/index.html'));
};
/**
* http.listen -
*/
http.listen(4000, function(){
console.log("Servidor On-line em http://localhost:4000");
console.log("Para sair Ctrl+C");
});
Código HTML
Agora vamos criar um diretório com o nome de view, nele vamos cria nosso arquivo index.html.
<html>
<head>
<title>Sensores</title>
<meta charset="UTF-8">
<script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var socket = io.connect(); // faz a conexão com o socket.io do node.js
//recebe o valor "sensorLuz" enviado pelo node.js
socket.on('sensorLuz', function(valor){
//escreve o "valor" que é passado na função no id #luz
$("#luz").text(valor);
});
</script>
</head>
<body>
<div class="container">
<h1>Informações:</h1>
<!--Notem que os IDs são os mesmos passados para usar o .text()-->
<h2>Luminosidade: <span id="luz" class="text-primary">0%</span></h2>
</div>
</body>
</html>
Com todos os passos anteriores feitos corretamente, rode esse comando para executar a aplicação.
node app.js
Agora abra o seu navegador em: http://localhost:4000 e você verá que está sendo realizada a leitura do sensor em tempo real.
Espero que gostem, em breve estarei trazendo mais a respeito. Se gostou não deixe de curti e compartilhar.
