(Note: these posts are migrated from my previous medium.com blog)
First off, I would like to thank Nathan Meryash for his suggestions! In my next few posts, I will describe using different cloud services and technologies for your IoT project.
Following up with Control your Intel Edison in Realtime with Websockets!, this post briefly describes how you could expose your connected device to the public web using ngrok. This is useful if you would like to be able to control your device from outside of your home network, without having to setup port forwarding and/or DDNS.
ngrok is a service that “exposes a local server behind a NAT or firewall to the internet”. There is no signup required and you get a public URL accessible from the Internet!
](https://res.cloudinary.com/practicaldev/image/fetch/s--mR6CEe4o--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2400/1%2AYzvuotOQ3ntlxsrdr53XkQ.png)
There are 2 additional packages that you would need to install:
npm install ngrok --save
npm install express-dot-engine --save
ngrok: an npm module for using ngrok. It allows you to programmatically create a new ngrok instance URL (e.g. https://571a6a18.ngrok.io) and bind it to your local server IP and port.
**express-dot-engine: **a lightweight template engine for embedding our ngrok URL into our index.html file
Here is the new code that has been updated to include the use of ngrok and the dot template engine with Express:
| var m = require('mraa'); //IO Library | |
| var app = require('express')(); //Express Library | |
| var server = require('http').Server(app); //Create HTTP instance | |
| var ngrok = require('ngrok'); //ngrok | |
| var engine = require('express-dot-engine'); //Template engine | |
| var io = require('socket.io')(server); //Socket.IO Library | |
| var blinkInterval = 1000; //set default blink interval to 1000 milliseconds (1 second) | |
| var ledState = 1; //set default LED state | |
| var ngrokURL = ''; //random public URL created by ngrok | |
| var myLed = new m.Gpio(13); //LED hooked up to digital pin 13 | |
| myLed.dir(m.DIR_OUT); //set the gpio direction to output | |
| app.engine('dot', engine.__express); | |
| app.set('views', __dirname); //location of the templates | |
| app.set('view engine', 'dot'); //tell express to render with the dot template engine | |
| app.get('/', function (req, res) { | |
| res.render('index',{url:ngrokURL}); //render index.html and interpolate the url variable | |
| }); | |
| io.on('connection', function(socket){ | |
| socket.on('changeBlinkInterval', function(data){ //on incoming websocket message... | |
| blinkInterval = data; //update blink interval | |
| }); | |
| }); | |
| server.listen(3000); //run on port 3000 | |
| ngrok.connect(3000, function(err, url){ //tell ngrok to bind to port 3000 | |
| if(err){ | |
| console.log(err); | |
| }else{ | |
| ngrokURL = url; | |
| console.log(url); | |
| } | |
| }); | |
| blink(); //start the blink function | |
| function blink(){ | |
| myLed.write(ledState); //write the LED state | |
| ledState = 1 - ledState; //toggle LED state | |
| setTimeout(blink,blinkInterval); //recursively toggle pin state with timeout set to blink interval | |
| } |
| <html> | |
| <head> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script> | |
| <script> | |
| $(function(){ | |
| var socket = io.connect('[[= model.url]]'); | |
| $('#slider').on('input change',function(){ | |
| socket.emit('changeBlinkInterval',$(this).val()); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Slide to change blink interval!</h1> | |
| <input id="slider" type="range" min="100" max="1000" value="1000" /> | |
| </body> | |
| </html> |
Then, simply run:
node blinkWithSocketsNgrok.js
…and go to the generated URL from anywhere on the web!
Top comments (0)