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