Skip to content

Eye-Tracking Classroom / gaze-client.js

Go to a project
Commit a944faf0 by Alexander Bazo
Options

Add observer interface to GazeClient

parent 1acd0be3
Inline Side-by-side
Showing with 253 additions and 36 deletions
Readme.md
...@@ -17,6 +17,16 @@ var gclient = new GazeClient(); ...@@ -17,6 +17,16 @@ var gclient = new GazeClient();
gclient.connect("ws://localhost:8001/gaze"); gclient.connect("ws://localhost:8001/gaze");
``` ```
Subscribe to gaze events:
```
gclient.addEventListener("gazeDataAvailable", onGazeDataAvailable);
function onGazeDataAvailable(event) {
console.log(event);
}
```
## Build ## Build
......
build/gazeclient.js
...@@ -3,42 +3,107 @@ ...@@ -3,42 +3,107 @@
/* eslint-env browser */ /* eslint-env browser */
function onOpen(event) { class Event {
this.callback("Connection open");
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 = new WebSocket(url);
this.ws.onopen = onOpen.bind(this); this.ws.onopen = onOpen.bind(this);
this.ws.onmessage = onMessage.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 */ /* eslint-env browser */
class GazeClient { class GazeClient extends Observable {
constructor() {
super();
}
connect(url) { connect(url) {
this.url = 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() { onOpen() {
this.client.send("hello server"); this.client.send("hello server");
} }
onConnected(event) {
// TODO: Implement event broadcasting
}
onGazeDataAvailable(event) {
this.notifyAll(event);
}
} }
window.GazeClient = GazeClient; window.GazeClient = GazeClient;
......
demo/gazeclient.js
...@@ -3,42 +3,107 @@ ...@@ -3,42 +3,107 @@
/* eslint-env browser */ /* eslint-env browser */
function onOpen(event) { class Event {
this.callback("Connection open");
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 = new WebSocket(url);
this.ws.onopen = onOpen.bind(this); this.ws.onopen = onOpen.bind(this);
this.ws.onmessage = onMessage.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 */ /* eslint-env browser */
class GazeClient { class GazeClient extends Observable {
constructor() {
super();
}
connect(url) { connect(url) {
this.url = 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() { onOpen() {
this.client.send("hello server"); this.client.send("hello server");
} }
onConnected(event) {
// TODO: Implement event broadcasting
}
onGazeDataAvailable(event) {
this.notifyAll(event);
}
} }
window.GazeClient = GazeClient; window.GazeClient = GazeClient;
......
demo/resources/js/index.js
...@@ -3,4 +3,8 @@ ...@@ -3,4 +3,8 @@
var gclient = new GazeClient(); var gclient = new GazeClient();
gclient.connect("ws://localhost:8001/gaze"); gclient.connect("ws://localhost:8001/gaze");
// gclient.send("Hello World"); gclient.addEventListener("gazeDataAvailable", onGazeDataAvailable);
\ No newline at end of file
function onGazeDataAvailable(event) {
console.log(event);
}
\ No newline at end of file
lib/Observable.js 0 → 100644
/* 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 */ /* eslint-env browser */
function onOpen(event) { import { Observable, Event } from "./Observable.js";
this.callback("Connection open");
class GazeDataEvent extends Event {
constructor(data) {
super("gazeDataAvailable", data);
}
} }
function onMessage(event) { class ConnectionEvent extends Event {
console.log(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 = new WebSocket(url);
this.ws.onopen = onOpen.bind(this); this.ws.onopen = onOpen.bind(this);
this.ws.onmessage = onMessage.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; export default WebSocketClient;
\ No newline at end of file
lib/index.js
/* eslint-env browser */ /* eslint-env browser */
import { Event, Observable } from "./Observable.js";
import WebSocketClient from "./WebSocketClient.js"; import WebSocketClient from "./WebSocketClient.js";
class GazeClient { class GazeClient extends Observable {
constructor() {
super();
}
connect(url) { connect(url) {
this.url = 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() { onOpen() {
this.client.send("hello server"); this.client.send("hello server");
} }
onConnected(event) {
// TODO: Implement event broadcasting
}
onGazeDataAvailable(event) {
this.notifyAll(event);
}
} }
window.GazeClient = GazeClient; window.GazeClient = GazeClient;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment