Install socket.io for Node.js
Make sure you update and upgrade your packages to their latest versions.
sudo apt-get update
sudo apt-get dist-upgrade
Install the socket.io:
npm install socket.io –save
Adding WebSocket to index.html
Lets update our index.html file:
<!DOCTYPE html>
<html>
<body>
<h1> Control LED ON/OFF </h1>
<input id = "light" type = "checkbox">LED1
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> <!-- include socket.io client side script -->
<script>
var socket = io(); //load socket.io-client and connect to the host that serves the page
window.addEventListener("load", function() //when page loads
{
var lightbox = document.getElementById("light");
lightbox.addEventListener("change", function() //add event listener for when checkbox changes
{
socket.emit("light", Number(this.checked)); //send button status to server (as 1 or 0)
});
});
</script>
</html>
</body>
</html>
Adding WebSocket to webserver
Lets update our webserver_socket file:
var http = require(‘http’).createServer(handler); //require http server, and create server with function handler()
var fs = require(‘fs’) // require filesystem module
var io = require(‘socket.io’)(http) //require socket.io module and pass the http object (server)
http.listen(8080); // listen to port 8080
function handler(req, res)
{
fs.readFile(__dirname + ‘/index_socket.html’,function(err,data)
{
res.writeHead(200,{‘Content-Type’: ‘text/html’});
res.write(data); //write data from index.html
return res.end();
});
}
io.sockets.on(‘connection’, function (socket) // WebSocket Connection
{
var lightvalue = 0; //static variable for current status
socket.on(‘light’, function(data) //get light switch status from client
{
lightvalue = data;
console.log(lightvalue); //turn LED on or off, for now we will just show it in console.log
});
});
Lets test the server:
node webserver.js
Open the website in a browser using http://[Your RaspberryPi_IP]:8080/:
Now the server should output all the changes to the checkbox to the console on the Raspberry Pi.
The client is sending the changes to the server, and the server is responding.
Lastly, Adding WebSocket to Hardware webserver
Lets update our webserver_socket file:
var Gpio = require(‘onoff’).Gpio; //include onoff library
var LED = new Gpio(17,’out’) // use GPIO pin 17 as output
var http = require(‘http’).createServer(handler); //require http server, and create server with function handler()
var fs = require(‘fs’) // require filesystem module
var io = require(‘socket.io’)(http) //require socket.io module and pass the http object (server)
http.listen(8080); // listen to port 8080
function handler(req, res)
{
fs.readFile(__dirname + ‘/index_socket.html’,function(err,data)
{
res.writeHead(200,{‘Content-Type’: ‘text/html’});
res.write(data); //write data from index.html
return res.end();
});
}
io.sockets.on(‘connection’, function (socket) // WebSocket Connection
{
var lightvalue = 0; //static variable for current status
socket.on(‘light’, function(data) //get light switch status from client
{
lightvalue = data;
console.log(lightvalue); //turn LED on or off, for now we will just show it in console.log
if(lightvalue == 1)
{
LED.writeSync(1); // turn on LED
}
else
{LED.writeSync(0);}
});
});
process.on(‘SIGINT’, function () //on ctrl+c
{
LED.writeSync(0); // Turn LED off
LED.unexport(); // Unexport LED GPIO to free resources
process.exit(); //exit completely
});
