From a944faf0c119286543967e901e450f497c1ff895 Mon Sep 17 00:00:00 2001
From: Alexander Bazo <alexander.bazo@ur.de>
Date: Tue, 20 Aug 2019 16:31:41 +0200
Subject: [PATCH] Add observer interface to GazeClient

---
 Readme.md                  |  10 ++++++++++
 build/gazeclient.js        | 125 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
 demo/gazeclient.js         | 125 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
 demo/resources/js/index.js |   6 +++++-
 lib/Events.js              |   0
 lib/Observable.js          |  37 +++++++++++++++++++++++++++++++++++++
 lib/WebSocketClient.js     |  44 ++++++++++++++++++++++++++++++--------------
 lib/index.js               |  21 +++++++++++++++++++--
 8 files changed, 291 insertions(+), 77 deletions(-)
 create mode 100644 lib/Events.js
 create mode 100644 lib/Observable.js

diff --git a/Readme.md b/Readme.md
index f793455..ecce6d0 100644
--- a/Readme.md
+++ b/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
 
diff --git a/build/gazeclient.js b/build/gazeclient.js
index 70ccfc3..01f52e0 100644
--- a/build/gazeclient.js
+++ b/build/gazeclient.js
@@ -1,46 +1,111 @@
 (function () {
-	'use strict';
+  'use strict';
 
-	/* eslint-env browser */
+  /* eslint-env browser */
 
-	function onOpen(event) {
-		this.callback("Connection open");
-	}
+  class Event {
 
-	function onMessage(event) {
-		console.log(event);
-	}
+    constructor(type, data) {
+      this.type = type;
+      this.data = data;
+    }
 
-	class WebSocketClient {
+  }
 
-		constructor(url, callback) {
-			this.callback = callback;
-			this.ws = new WebSocket(url);
-			this.ws.onopen = onOpen.bind(this);
-			this.ws.onmessage = onMessage.bind(this);
-		}
+  class Observable {
 
-		send(msg) {
-			this.ws.send(msg);
-		}
+    constructor() {
+      this.listeners = {};
+    }
 
-	}
+    addEventListener(type, callback) {
+      if (this.listeners[type] === undefined) {
+        this.listeners[type] = [];
+      }
+      this.listeners[type].push(callback);
+    }
 
-	/* eslint-env browser */
+    notifyAll(event) {
+      let listeners = this.listeners[event.type];
+      if (listeners) {
+        for (let i = 0; i < listeners.length; i++) {
+          listeners[i](event);
+        }
+      }
+    }
 
-	class GazeClient {
+  }
 
-	  connect(url) {
-	    this.url = url;
-	    this.client = new WebSocketClient(url, this.onOpen.bind(this));
-	  }
+  /* eslint-env browser */
 
-	  onOpen() {
-	    this.client.send("hello server");
-	  }
+  class GazeDataEvent extends Event {
+    constructor(data) {
+      super("gazeDataAvailable", data);
+    }
+  }
 
-	}
+  class ConnectionEvent extends Event {
+    constructor() {
+      super("connected");
+    }
+  }
 
-	window.GazeClient = GazeClient;
+  class WebSocketClient extends Observable {
+
+    constructor() {
+      super();
+    }
+
+    connect(url) {
+
+      this.ws = new WebSocket(url);
+      this.ws.onopen = onOpen.bind(this);
+      this.ws.onmessage = onMessage.bind(this);
+    }
+
+  }
+
+  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 extends Observable {
+
+    constructor() {
+      super();
+    }
+
+    connect(url) {
+      this.url = url;
+      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;
 
 }());
diff --git a/demo/gazeclient.js b/demo/gazeclient.js
index 70ccfc3..01f52e0 100644
--- a/demo/gazeclient.js
+++ b/demo/gazeclient.js
@@ -1,46 +1,111 @@
 (function () {
-	'use strict';
+  'use strict';
 
-	/* eslint-env browser */
+  /* eslint-env browser */
 
-	function onOpen(event) {
-		this.callback("Connection open");
-	}
+  class Event {
 
-	function onMessage(event) {
-		console.log(event);
-	}
+    constructor(type, data) {
+      this.type = type;
+      this.data = data;
+    }
 
-	class WebSocketClient {
+  }
 
-		constructor(url, callback) {
-			this.callback = callback;
-			this.ws = new WebSocket(url);
-			this.ws.onopen = onOpen.bind(this);
-			this.ws.onmessage = onMessage.bind(this);
-		}
+  class Observable {
 
-		send(msg) {
-			this.ws.send(msg);
-		}
+    constructor() {
+      this.listeners = {};
+    }
 
-	}
+    addEventListener(type, callback) {
+      if (this.listeners[type] === undefined) {
+        this.listeners[type] = [];
+      }
+      this.listeners[type].push(callback);
+    }
 
-	/* eslint-env browser */
+    notifyAll(event) {
+      let listeners = this.listeners[event.type];
+      if (listeners) {
+        for (let i = 0; i < listeners.length; i++) {
+          listeners[i](event);
+        }
+      }
+    }
 
-	class GazeClient {
+  }
 
-	  connect(url) {
-	    this.url = url;
-	    this.client = new WebSocketClient(url, this.onOpen.bind(this));
-	  }
+  /* eslint-env browser */
 
-	  onOpen() {
-	    this.client.send("hello server");
-	  }
+  class GazeDataEvent extends Event {
+    constructor(data) {
+      super("gazeDataAvailable", data);
+    }
+  }
 
-	}
+  class ConnectionEvent extends Event {
+    constructor() {
+      super("connected");
+    }
+  }
 
-	window.GazeClient = GazeClient;
+  class WebSocketClient extends Observable {
+
+    constructor() {
+      super();
+    }
+
+    connect(url) {
+
+      this.ws = new WebSocket(url);
+      this.ws.onopen = onOpen.bind(this);
+      this.ws.onmessage = onMessage.bind(this);
+    }
+
+  }
+
+  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 extends Observable {
+
+    constructor() {
+      super();
+    }
+
+    connect(url) {
+      this.url = url;
+      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;
 
 }());
diff --git a/demo/resources/js/index.js b/demo/resources/js/index.js
index 6b8554c..cc57c45 100644
--- a/demo/resources/js/index.js
+++ b/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
diff --git a/lib/Events.js b/lib/Events.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/lib/Events.js
diff --git a/lib/Observable.js b/lib/Observable.js
new file mode 100644
index 0000000..fca342e
--- /dev/null
+++ b/lib/Observable.js
@@ -0,0 +1,37 @@
+/* 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
diff --git a/lib/WebSocketClient.js b/lib/WebSocketClient.js
index 3735116..446fa37 100644
--- a/lib/WebSocketClient.js
+++ b/lib/WebSocketClient.js
@@ -1,26 +1,42 @@
 /* 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);
-	}
+    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
diff --git a/lib/index.js b/lib/index.js
index b43a9db..59c5432 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,18 +1,35 @@
 /* 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
--
libgit2 0.26.0