viewerCounter and websocket JS modules

web/static/js/modules/viewerCounter.js

@@ -0,0 +1,29 @@
+/**
+ * ViewerCounter show the number of active viewers
+ */
+export class ViewerCounter {
+    /**
+     * @param {HTMLElement} element 
+     * @param {String} streamName 
+     */
+    constructor(element, streamName) {
+        this.element = element;
+        this.url = "/_stats/" + streamName;
+    }
+
+    /**
+     * Regulary update counter
+     * 
+     * @param {Number} updatePeriod 
+     */
+    regularUpdate(updatePeriod) {
+        setInterval(this._refreshViewersCounter, updatePeriod);
+    }
+
+    _refreshViewersCounter() {
+        fetch(this.url)
+            .then(response => response.json())
+            .then((data) => this.element.innerText = data.ConnectedViewers)
+            .catch(console.log);
+    }
+}

web/static/js/modules/websocket.js

@@ -0,0 +1,55 @@
+/**
+ * GsWebSocket to do Ghostream signalling
+ */
+export class GsWebSocket {
+    constructor() {
+        const protocol = (window.location.protocol === "https:") ? "wss://" : "ws://";
+        this.url = protocol + window.location.host + "/_ws/";
+    }
+
+    _open() {
+        this.socket = new WebSocket(this.url);
+    }
+
+    /**
+     * Open websocket.
+     * 
+     * @param {Function} openCallback Function called when connection is established. 
+     * @param {Function} closeCallback Function called when connection is lost. 
+     */
+    open(openCallback, closeCallback) {
+        this._open();
+        this.socket.addEventListener("open", (event) => {
+            console.log("WebSocket opened");
+            openCallback(event);
+        });
+        this.socket.addEventListener("close", (event) => {
+            console.log("WebSocket closed, retrying connection in 1s...");
+            setTimeout(this._open, 1000);
+            closeCallback(event);
+        });
+        this.socket.addEventListener("error", (event) => {
+            console.log("WebSocket errored, retrying connection in 1s...");
+            setTimeout(this._open, 1000);
+            closeCallback(event);
+        });
+    }
+
+    /**
+     * Exchange WebRTC session description with server.
+     * 
+     * @param {string} data JSON formated data 
+     * @param {Function} receiveCallback Function called when data is received
+     */
+    exchangeDescription(data, receiveCallback) {
+        if (this.socket.readyState !== 1) {
+            console.log("WebSocket not ready to send data");
+            return;
+        }
+        this.socket.send(data);
+        this.socket.addEventListener("message", (event) => {
+            console.log("Message from server ", event.data);
+            receiveCallback(event);
+        });
+    }
+}