How To Connect with the SocketIO API

The SocketIO API plugin can be used to remotely interact with your robots in real-time.

To use it, install it alongside Cylon:

$ npm install cylon cylon-api-socketio

How to Use

Make sure you have Cylon.js installed, then we can add Socket.io support to Cylon programs as follows:

'use strict';

var Cylon = require('cylon');

Cylon.robot({
  name: 'rosie',

  connections: {
    arduino: { adaptor: 'firmata', port: '/dev/ttyACM0' }
  },

  devices: {
    led: { driver: 'led', pin: 13 }
  },

  work: function() {
    // for this example with sockets
    // we are going to be interacting
    // with the robot using the code in
    // ./**-client.html
  }
});

// ensure you install the API plugin first:
// $ npm install cylon-api-socket-io
Cylon.api('socketio',
{
  host: '0.0.0.0',
  port: '3000'
});

Cylon.start();

How to Connect

Once you have added the api to your Cylon.js code, and your robots are up and running, you can connect to them using Socket.io using the following code:

<!doctype html>
<html>
  <meta charset="utf-8">
  <head>
    <title>Simple Device Example</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script type="text/javascript">
    var device;

    window.onload = function() {
      console.log('Setting up socket connections:');

      // We use the robot nsp (namespace) to connect to one of the devices
      // in this case the led we added in our cylon robot code
      device = io('http://127.0.0.1:3000/api/robots/rosie/devices/led');
      setInterval(function() {
        device.emit('toggle');
      }, 1000);

      device.on('message', function(payload) {
        console.log('On Device');
        console.log('  Event:', payload.event);
        console.log('  Data:', payload.data);
        $('#messages').append($('<li>').text('On Device:'));
        $('#messages').append($('<li>').text('  Event:' + payload.event.toString()));
        if (!!payload.data) {
          $('#messages').append($('<li>').text('  Data:' + payload.data.toString()));
        }
        $('#messages').append($('<hr />'));
      });

      msg = 'You have been subscribed to Cylon sockets:' + device.nsp;

      $('#messages').append($('<li>').text(msg));
    };
  </script>
  <body>
    <ul id="messages"></ul>
  </body>
</html>