Add observer interface to GazeClient

Readme.md

@@ -17,6 +17,16 @@ var gclient = new GazeClient();
 gclient.connect("ws://localhost:8001/gaze");
 ```
 
+Subscribe to gaze events:
+
+```
+gclient.addEventListener("gazeDataAvailable", onGazeDataAvailable);
+
+function onGazeDataAvailable(event) {
+	console.log(event);
+}
+```
+
 
 ## Build
 

build/gazeclient.js

@@ -3,42 +3,107 @@
 
   /* eslint-env browser */
 
-	function onOpen(event) {
-		this.callback("Connection open");
+  class Event {
+
+    constructor(type, data) {
+      this.type = type;
+      this.data = data;
+    }
+
+  }
+
+  class Observable {
+
+    constructor() {
+      this.listeners = {};
+    }
+
+    addEventListener(type, callback) {
+      if (this.listeners[type] === undefined) {
+        this.listeners[type] = [];
+      }
+      this.listeners[type].push(callback);
+    }
+
+    notifyAll(event) {
+      let listeners = this.listeners[event.type];
+      if (listeners) {
+        for (let i = 0; i < listeners.length; i++) {
+          listeners[i](event);
+        }
+      }
     }
 
-	function onMessage(event) {
-		console.log(event);
   }
 
-	class WebSocketClient {
+  /* eslint-env browser */
+
+  class GazeDataEvent extends Event {
+    constructor(data) {
+      super("gazeDataAvailable", data);
+    }
+  }
+
+  class ConnectionEvent extends Event {
+    constructor() {
+      super("connected");
+    }
+  }
+
+  class WebSocketClient extends Observable {
+
+    constructor() {
+      super();
+    }
+
+    connect(url) {
 
-		constructor(url, callback) {
-			this.callback = callback;
       this.ws = new WebSocket(url);
       this.ws.onopen = onOpen.bind(this);
       this.ws.onmessage = onMessage.bind(this);
     }
 
-		send(msg) {
-			this.ws.send(msg);
   }
 
+  function onOpen() {
+    let connectionEvent = new ConnectionEvent();
+    this.notifyAll(connectionEvent);
+  }
+
+  function onMessage(event) {
+    let gazeEvent = new GazeDataEvent(event.data);
+    this.notifyAll(gazeEvent);
   }
 
   /* eslint-env browser */
 
-	class GazeClient {
+  class GazeClient extends Observable {
+
+    constructor() {
+      super();
+    }
 
     connect(url) {
       this.url = url;
-	    this.client = new WebSocketClient(url, this.onOpen.bind(this));
+      this.client = new WebSocketClient();
+      this.client.addEventListener("connected", this.onConnected.bind(this));
+      this.client.addEventListener("gazeDataAvailable", this.onGazeDataAvailable
+        .bind(this));
+      this.client.connect(url);
     }
 
     onOpen() {
       this.client.send("hello server");
     }
 
+    onConnected(event) {
+      // TODO: Implement event broadcasting
+    }
+
+    onGazeDataAvailable(event) {
+      this.notifyAll(event);
+    }
+
   }
 
   window.GazeClient = GazeClient;

demo/gazeclient.js

@@ -3,42 +3,107 @@
 
   /* eslint-env browser */
 
-	function onOpen(event) {
-		this.callback("Connection open");
+  class Event {
+
+    constructor(type, data) {
+      this.type = type;
+      this.data = data;
+    }
+
+  }
+
+  class Observable {
+
+    constructor() {
+      this.listeners = {};
+    }
+
+    addEventListener(type, callback) {
+      if (this.listeners[type] === undefined) {
+        this.listeners[type] = [];
+      }
+      this.listeners[type].push(callback);
+    }
+
+    notifyAll(event) {
+      let listeners = this.listeners[event.type];
+      if (listeners) {
+        for (let i = 0; i < listeners.length; i++) {
+          listeners[i](event);
+        }
+      }
     }
 
-	function onMessage(event) {
-		console.log(event);
   }
 
-	class WebSocketClient {
+  /* eslint-env browser */
+
+  class GazeDataEvent extends Event {
+    constructor(data) {
+      super("gazeDataAvailable", data);
+    }
+  }
+
+  class ConnectionEvent extends Event {
+    constructor() {
+      super("connected");
+    }
+  }
+
+  class WebSocketClient extends Observable {
+
+    constructor() {
+      super();
+    }
+
+    connect(url) {
 
-		constructor(url, callback) {
-			this.callback = callback;
       this.ws = new WebSocket(url);
       this.ws.onopen = onOpen.bind(this);
       this.ws.onmessage = onMessage.bind(this);
     }
 
-		send(msg) {
-			this.ws.send(msg);
   }
 
+  function onOpen() {
+    let connectionEvent = new ConnectionEvent();
+    this.notifyAll(connectionEvent);
+  }
+
+  function onMessage(event) {
+    let gazeEvent = new GazeDataEvent(event.data);
+    this.notifyAll(gazeEvent);
   }
 
   /* eslint-env browser */
 
-	class GazeClient {
+  class GazeClient extends Observable {
+
+    constructor() {
+      super();
+    }
 
     connect(url) {
       this.url = url;
-	    this.client = new WebSocketClient(url, this.onOpen.bind(this));
+      this.client = new WebSocketClient();
+      this.client.addEventListener("connected", this.onConnected.bind(this));
+      this.client.addEventListener("gazeDataAvailable", this.onGazeDataAvailable
+        .bind(this));
+      this.client.connect(url);
     }
 
     onOpen() {
       this.client.send("hello server");
     }
 
+    onConnected(event) {
+      // TODO: Implement event broadcasting
+    }
+
+    onGazeDataAvailable(event) {
+      this.notifyAll(event);
+    }
+
   }
 
   window.GazeClient = GazeClient;

demo/resources/js/index.js

@@ -3,4 +3,8 @@
 
 var gclient = new GazeClient();
 gclient.connect("ws://localhost:8001/gaze");
-// gclient.send("Hello World");
\ No newline at end of file
+gclient.addEventListener("gazeDataAvailable", onGazeDataAvailable);
+
+function onGazeDataAvailable(event) {
+	console.log(event);
+}
\ No newline at end of file

lib/Observable.js

+/* eslint-env browser */
+
+class Event {
+
+  constructor(type, data) {
+    this.type = type;
+    this.data = data;
+  }
+
+}
+
+class Observable {
+
+  constructor() {
+    this.listeners = {};
+  }
+
+  addEventListener(type, callback) {
+    if (this.listeners[type] === undefined) {
+      this.listeners[type] = [];
+    }
+    this.listeners[type].push(callback);
+  }
+
+  notifyAll(event) {
+    let listeners = this.listeners[event.type];
+    if (listeners) {
+      for (let i = 0; i < listeners.length; i++) {
+        listeners[i](event);
+      }
+    }
+  }
+
+}
+
+export default Observable;
+export { Event, Observable };
\ No newline at end of file

lib/WebSocketClient.js

 /* eslint-env browser */
 
-function onOpen(event) {
-	this.callback("Connection open");
+import { Observable, Event } from "./Observable.js";
+
+class GazeDataEvent extends Event {
+  constructor(data) {
+    super("gazeDataAvailable", data);
+  }
 }
 
-function onMessage(event) {
-	console.log(event);
+class ConnectionEvent extends Event {
+  constructor() {
+    super("connected");
+  }
 }
 
-class WebSocketClient {
+class WebSocketClient extends Observable {
+
+  constructor() {
+    super();
+  }
+
+  connect(url) {
 
-	constructor(url, callback) {
-		this.callback = callback;
     this.ws = new WebSocket(url);
     this.ws.onopen = onOpen.bind(this);
     this.ws.onmessage = onMessage.bind(this);
   }
 
-	send(msg) {
-		this.ws.send(msg);
-	}
+}
 
+function onOpen() {
+  let connectionEvent = new ConnectionEvent();
+  this.notifyAll(connectionEvent);
+}
+
+function onMessage(event) {
+  let gazeEvent = new GazeDataEvent(event.data);
+  this.notifyAll(gazeEvent);
 }
 
 export default WebSocketClient;
\ No newline at end of file

lib/index.js

 /* eslint-env browser */
 
+import { Event, Observable } from "./Observable.js";
 import WebSocketClient from "./WebSocketClient.js";
 
-class GazeClient {
+class GazeClient extends Observable {
+
+  constructor() {
+    super();
+  }
 
   connect(url) {
     this.url = url;
-    this.client = new WebSocketClient(url, this.onOpen.bind(this));
+    this.client = new WebSocketClient();
+    this.client.addEventListener("connected", this.onConnected.bind(this));
+    this.client.addEventListener("gazeDataAvailable", this.onGazeDataAvailable
+      .bind(this));
+    this.client.connect(url);
   }
 
   onOpen() {
     this.client.send("hello server");
   }
 
+  onConnected(event) {
+    // TODO: Implement event broadcasting
+  }
+
+  onGazeDataAvailable(event) {
+    this.notifyAll(event);
+  }
+
 }
 
 window.GazeClient = GazeClient;
\ No newline at end of file