Update dist for v0.4.0

dist/remote/index.html

@@ -77,12 +77,14 @@ <h2>Client-Log</h2>
 <script src="scripts/vendor/jquery.js"></script>
 <script src="scripts/vendor/lodash.js"></script>
 <script src="scripts/vendor/fishbone.js"></script>
-<script src="scripts/vendor/socket.io.min.js"></script>
+<script src="http://js.pusher.com/2.1/pusher.min.js"></script>
 <script src="scripts/remote-controls.js"></script>
 <script src="scripts/remote-route.js"></script>
 <script src="scripts/remote-map.js"></script>
 <script src="scripts/remote-pois.js"></script>
 <script src="scripts/remote-app.js"></script>
 <script src="scripts/remote-webapp.js"></script>
 <script src="scripts/remote-log.js"></script>
+<script src="scripts/remote-comm.js"></script>
+<script src="scripts/remote-config.js"></script>
 <script src="scripts/main.js"></script>

dist/remote/pusher/pusher-auth.js

@@ -0,0 +1,32 @@
+var express = require( 'express' );
+var Pusher = require( 'pusher' );
+var app = express( );
+
+var pusherConfig = {
+  appId: APP_ID,
+  key: KEY,
+  secret: secret
+};
+
+app.use( express.bodyParser() );
+
+app.all('*', function(req, res, next) {
+
+  res.header("Access-Control-Allow-Origin", "*");
+  res.header("Access-Control-Allow-Headers", "X-Requested-With");
+  res.header('Access-Control-Allow-Methods', 'POST');
+  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+
+  next();
+});
+
+var pusher = new Pusher( pusherConfig );
+
+app.post( '/pusher/auth', function( req, res ) {
+  var socketId = req.body.socket_id;
+  var channel = req.body.channel_name;
+  var auth = pusher.auth( socketId, channel );
+  res.send( auth );
+} );
+
+module.exports = app;

dist/remote/scripts/fake-geolocation.js

@@ -7,30 +7,41 @@ function geolocationRemote(connect){
     // Position data of the remote control
     position,
     // store the errorCode
-    errorCode = -1;
+    errorCode = -1,
+    // error messages of GPS errors
+    errorMessages = {
+      0: 'UNKNOWN_ERROR',
+      1: 'PERMISSION_DENIED',
+      2: 'POSITION_UNAVAILABLE',
+      3: 'TIMEOUT'
+    };
 
   if (connect === 'socket') {
+    var pusher = new Pusher(remote.pusherConfig.KEY, {
+      authEndpoint: remote.pusherConfig.authEndpoint
+    });
 
-    // Set up our socket listening on socketUrl
-    var socket = io.connect(socketUrl);
-    // what should we listen for?
-    // default is update:navigator (called from remote control)
-    // here is the entry point of our data from the remote control
-    socket.on('update:navigator', onDataReceived);
-
-    // send Data to remote control.
-    // Like starting point (where your webapp is located right now),
-    // pois you use in your app an want to see on the map, etc.
-    function sendToRemote (data) {
-      socket.emit("update:remote", data);
-    }
+    var channel = pusher.subscribe('private-remoteLocationManager');
 
-  } else if (connect === 'iframe') {
+    channel.bind('pusher:subscription_succeeded', onDataReceived);
+
+    var listenChannel = pusher.subscribe('private-remoteLocationManager');
 
-    // we always listen to postMessages
+    listenChannel.bind('client-locationUpdate', function(data) {
+      onDataReceived(data);
+    });
+
+  } else if (connect === 'iframe') {
     window.addEventListener("message", onDataReceived, false);
+  }
+
 
-    function sendToRemote (data) {
+  function sendToRemote (data) {
+    if (connect === 'socket') {
+      channel.trigger('client-locationUpdate', data);
+    }
+
+    if (connect === 'iframe') {
       data = {data: data};
       parent.postMessage(data, window.location.origin + '/remote');
     }
@@ -69,7 +80,10 @@ function geolocationRemote(connect){
       watcher = watchers[watcher];
 
       if (watcher.error) {
-        watcher.error({code: errorCode*1});
+        watcher.error({
+          code: errorCode*1,
+          message: errorMessages[errorCode]
+        });
       }
     }
   }
@@ -87,7 +101,10 @@ function geolocationRemote(connect){
     if (position && errorCode < 0){
       success(position);
     } else {
-      error({code: errorCode*1});
+      error({
+        code: errorCode*1,
+        message: errorMessages[errorCode]
+      });
     }
   }
 

dist/remote/scripts/main.js

@@ -1,58 +1,18 @@
-var remote = {
-  defaults: {
-    distance: 1000,
-    angle: 45
-  },
-  socket: io.connect(
-    document.location.protocol + "//" +
-    document.location.hostname + ":" +
-    8888
-  )
-};
+var remote = remote || {};
 
 remote.log = new RemoteLog();
-
 remote.app = new App();
 remote.map = new MapModel();
 remote.route = new RouteModel();
 remote.controls = new ControlsModel();
 remote.webapp = new WebAppModel();
+remote.comm = new RemoteComm();
 
 initEvents();
 
 remote.controls.enable();
 remote.app.getPosition();
 
-/**
- * if we got a successfull socket connection we start listening to it
- */
-if (remote.socket) {
-  remote.socket.on('update:remote', function (data) {
-
-    remoteLog('update:remote @remote' + JSON.stringify(data));
-
-    remote.app.onDataReceived(data);
-  })
-}
-
-// listen to postMessages
-window.addEventListener("message", postMessageReceive, false);
-
-
-
-function postMessageReceive (data) {
-  if (event.origin !== window.location.origin)
-    return;
-
-  var data = event.data;
-
-  if (data.log) {
-    remote.log.receiveMessage('client-log', data.log)
-  } else {
-    remote.app.onDataReceived(data.data)
-  }
-}
-
 /**
  * Set initial values
  */
@@ -92,4 +52,6 @@ function initEvents() {
   remote.map.on('route:changed', remote.route.onRouteChange);
   remote.map.on('center:added', remote.webapp.updateNavigator);
   remote.map.on('center:updated', remote.webapp.updateNavigator);
+
+  remote.webapp.on('iframe:ready', remote.comm.iframeSetup);
 }

dist/remote/scripts/remote-comm.js

@@ -0,0 +1,56 @@
+var RemoteComm = Model({
+  init: function () {
+    this.socketSetup();
+  },
+
+  sendToClients: function (data) {
+    if (this.channel) {
+      this.channel.trigger('client-locationUpdate', data);
+    }
+
+    if (this.$iframe) {
+      this.$iframe.contentWindow.postMessage(data, window.location.origin);
+    }
+  },
+
+  onMessageReceived: function (data) {
+
+    if (data.log) {
+      remote.log.receiveMessage('clientLog', data.log)
+    } else {
+      remote.app.onDataReceived(data.data)
+    }
+
+  },
+
+  postMessageReceive: function(data) {
+    if (event.origin !== window.location.origin) {
+      return;
+    }
+
+    this.onMessageReceived(event.data);
+  },
+
+  iframeSetup: function () {
+    this.$iframe = document.querySelector('#webapp');
+    window.addEventListener("message", this.postMessageReceive, false);
+  },
+
+  socketSetup: function () {
+    var pusher = new Pusher(remote.pusherConfig.KEY, {
+      authEndpoint: remote.pusherConfig.authEndpoint
+    });
+
+    var channel = pusher.subscribe('private-remoteLocationManager');
+
+    channel.bind('pusher:subscription_succeeded', function() {
+      this.channel = channel;
+    }.bind(this));
+
+    var listenChannel = pusher.subscribe('remoteLocationManager');
+
+    channel.bind('locationUpdate', function(data) {
+      alert('An event was triggered with message: ' + data.message);
+    });
+  }
+});

dist/remote/scripts/remote-config.js

@@ -0,0 +1,11 @@
+var remote = {};
+
+remote.defaults = {
+  distance: 1000,
+  angle: 45
+};
+
+remote.pusherConfig = {
+  authEndpoint: 'http://localhost:5000/pusher/auth',
+  KEY: KEY
+};

dist/remote/scripts/remote-log.js

@@ -2,8 +2,8 @@ var RemoteLog = Model({
 
   logQueue: {},
   logContainers: {
-    clientLog: document.getElementById('client-log'),
-    rcLog: document.getElementById('rc-log')
+    clientLog: document.querySelector('#client-log'),
+    rcLog: document.querySelector('#rc-log')
   },
 
   receiveMessage: function(logType, msg)

dist/remote/scripts/remote-webapp.js

@@ -4,7 +4,7 @@ var WebAppModel = Model({
   iframe: '',
 
   /**
-   * Update the fake navigator of the client via socket.io.
+   * Prepare data for fake navigator of the clients
    * @param  {json} data
    */
   updateNavigator: function(data) {
@@ -24,18 +24,16 @@ var WebAppModel = Model({
 
     remoteLog('update:navigator' + JSON.stringify(data));
 
-    if (remote.socket) {
-      remote.socket.emit("update:navigator", data);
-    } else {
-      this.iframe.contentWindow.postMessage(data, window.location.origin);
-    }
+    remote.comm.sendToClients(data);
   },
 
   /**
    * Add an iFrame to the remote control for the webapp
    */
   addIframe: function () {
     this.iframe = document.createElement('iframe');
+    this.iframe.id = 'webapp';
+
     document.body.appendChild(this.iframe);
   },
 
@@ -65,7 +63,7 @@ var WebAppModel = Model({
     }
 
     var search = query || '?embed=true&' + window.location.search.replace('?','');
-    var href = window.location.origin  + search;
+    var href = window.location.href.replace('/remote', '')  + search;
 
     // set http if not
     href = (/^(http||https):\/\//.test(href)) ? href : 'http://' + href;
@@ -76,6 +74,8 @@ var WebAppModel = Model({
     // set src attr to iframe
     this.iframe.setAttribute('onload','remote.webapp.injectJavascript()');
     this.iframe.src = href;
+
+    this.trigger('iframe:ready');
   },
 
   /**
@@ -86,7 +86,6 @@ var WebAppModel = Model({
     var script;
 
     var jsLibs = [
-      'remote/scripts/vendor/socket.io.min.js',
       'remote/scripts/fake-geolocation.js',
       'remote/scripts/fake-navigator.js',
       'remote/scripts/client-scripts.js'