Beaglebone and Websockets, a full example that turn on/off a led

After the first “hello world” example with ExtJS – https://isolasoftware.it/2012/04/20/beaglebone-and-extjs-web-app/ I’ve written a complete example in node.js that turns on and off a led controlled by the board and sends, in broadcast, the status of the led changing the background color of the web page.

The Web App is hosted by the Angstrom distribution – http://www.angstrom-distribution.org – the default OS that comes with the Beaglebone – http://beagleboard.org/static/beaglebone/latest/README.htm.

Using Cloud9 (you can access with the url http://beaglebone.local:3000) it’s possible to write a really simple node.js application that exposes via websockets on 8090 (or another port) a web page (index.html) and serves as Websockates gateways using socket.io module.

Once the button on is pressed a message led on is sent to the board; the socket.io server intercept it and set to high the port P8_3. The code is based on the library bonescript included in Cloud9.

When the led is changed a websocket broadcast message ledstatus on is sent to all browsers connected. The browsers intercept the message and to change the background of the web page in green.

With this demo you can try by yourself the two-way communication using websockets. The cpu load on the board is near to zero.

sock123/index.html

<html>
<head>
    <script src = "/socket.io/socket.io.js" > </script>
    <script type=text/javascript src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        var socket = io.connect();
            socket.on('ledstatus', function (data) {
                console.log(data);
                $("body").css("background-color", data);
            });
    </script>
    <script>
    function ledOn(){
      socket.emit('led', 'on');
      
    }
    function ledOff(){
      socket.emit('led', 'off');
    }
    </script>
</head> 

<body>
    <input type="button" name="on" id="onButton" value="on" onClick="ledOn();">
    <input type="button" name="off" id="offButton" value="off" onClick="ledOff();">
    
</body>
</html>

sock123.js. The main program to execute.

var app = require('http').createServer(handler);
var io = require('socket.io').listen(app);
var fs = require('fs');
var bb = require('./bonescript');

app.listen(8090);
var ledPin = bone.P8_3;

setup = function() {
    pinMode(ledPin, OUTPUT);
};

function handler (req, res) {
  fs.readFile('sock123/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.sockets.on('connection', function (socket) {
  socket.on('led', function (data) {
    console.log(data);
    if (data == 'on'){
        digitalWrite(ledPin, HIGH);
          socket.emit('ledstatus', 'green');
          socket.broadcast.emit('ledupdate', 'green');

    }else{
        digitalWrite(ledPin, LOW);
        socket.emit('ledstatus', 'red');
         socket.broadcast.emit('ledupdate', 'red');
    }
  });
});

bb.run();

To run the application just press run on your Cloud9 and select sock123.js.

Now you can access to the application and turn on/off the led.
Check the video 🙂
You will see Chrome on MacOS Lion that updates the background color simultaneously according with the led status.

4 thoughts on “Beaglebone and Websockets, a full example that turn on/off a led

    • Thanks jkridner!
      It’s true! If I would have had time to go to my store and buy some resistors… for the first test it’s ok but I promise I’ll prepare a better test platform in the near future 🙂

  1. The simplest way to launch the script on boot is to add the line

    node sock123.js
    

    on your

    /etc/rc.local
    

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s