Client-side connection lost

Author: bhasher

src/publics/js/dev/page/editor/socket.js

@@ -54,11 +54,6 @@ export default class EditorSocket{
     }
 
     send(name, data={}) {
-        if(Config.isDebug() && Array.isArray(data)){
-            for(const d of data){
-                Debug.debug('SEND to \'' + name + '\': ', d);
-            }
-        }
         this.ws.send({
             event: name,
             room: this.doc_id,

src/publics/js/dev/utils/stack.js

@@ -35,3 +35,75 @@ export default class Stack{
         return this.stack[n];
     }
 }
+
+export class WaitingStack{
+    /**
+     * Init waitingStack object
+     * @param size
+     */
+    constructor(size) {
+        this.size = size;
+        this.stack = {};
+        this.old = new Stack(size);
+    }
+
+    /**
+     * Push a new element
+     * @param {string} uuid
+     * @param {*} data
+     */
+    push(uuid, data){
+        this.stack[uuid] = data;
+    }
+
+    /**
+     * Get the element with the given uuid
+     * @param {string} uuid
+     * @return {*}
+     */
+    get(uuid){
+        return this.stack[uuid];
+    }
+
+    /**
+     * Append a new element in the stack
+     * @param {string} uuid
+     * @param {*} data
+     */
+    add(uuid, data){
+        this.push(uuid, {
+            send: Date.now(),
+            data: data,
+        })
+    }
+
+    /**
+     * Archive an element
+     * @param {string} uuid
+     * @param {number|null} server_time
+     * @param {number|null} time
+     */
+    archive(uuid, server_time, time=null){
+        const content = this.stack[uuid];
+        delete this.stack[uuid];
+        content['server'] = server_time;
+        content['received'] = time ? time: Date.now();
+        this.old.push(content);
+    }
+
+    /**
+     * Get all elements in stack
+     * @return {{}}
+     */
+    getAll(){
+        return this.stack;
+    }
+
+    /**
+     * Return the size of current stack
+     * @return {*}
+     */
+    getSize(){
+        return Object.keys(this.stack).length;
+    }
+}

src/publics/js/dev/utils/websocket/socket.js

@@ -5,8 +5,11 @@
  * @date Last modification on 16/11/2020
  * @version 1.0.0
  */
+import temporaryCardAlert from "/js/dev/component/text-alert.js";
 import Debug from "/js/dev/utils/debugging/debug.js";
 import EventManager from "/js/dev/utils/events.js";
+import Random from "/js/dev/utils/random.js";
+import Stack, {WaitingStack} from "/js/dev/utils/stack.js";
 
 export default class Socket{
     constructor(options) {
@@ -21,6 +24,23 @@ export default class Socket{
         this.ws = new WebSocket(this.uri().href);
 
         this.ws.onmessage = this.onMessage;
+
+        /**
+         * WaitingStack for sockets ; Check if connected is still alive
+         */
+        this.waitingStack = new WaitingStack(120);
+        document.addEventListener('socket.confirm', evt => {this.confirm(evt.detail);})
+
+        setInterval(() => {
+            const amount = this.waitingStack.getSize();
+            if(amount > 20){
+                temporaryCardAlert('Connexion', 'It seems than you are disconnected', 2000, '#ff501e')
+            }else if(amount > 5){
+                temporaryCardAlert('Connexion', 'It seems than you are disconnected', 2000, '#ff9000')
+            }
+        }, 1000);
+
+
     }
 
     /**
@@ -64,6 +84,16 @@ export default class Socket{
      * @param {{}} content
      */
     send(content){
+        if(content.event !== 'join'){
+            const uuid = Random.string(9);
+
+            this.waitingStack.add(uuid, content);
+
+            Debug.debug(`SEND ${uuid} to '${content.event}': `, content);
+
+            content['uuid'] = uuid;
+        }
+
         this.ws.send(JSON.stringify(content));
     }
 
@@ -75,12 +105,32 @@ export default class Socket{
         try{
             const data = JSON.parse(e.data);
             Debug.debug('RECEIVE PACKET', data);
-            if(data.event && data.data) EventManager.triggerCustom(`socket.receive.${data.event}`, data.data);
-            else {
+            if(data.event && data.data) {
+                EventManager.triggerCustom(`socket.receive.${data.event}`, data.data);
+            }else if(data.code && data.uuid && data.time){
+                EventManager.triggerCustom(`socket.confirm`, data);
+            } else {
                 Debug.error('This packet hasn\'t valid event and data.', data);
             }
         }catch (error){
+            Debug.debug(error);
             Debug.error('This packet can\'t be parsed as JSON.', e);
         }
     }
+
+    /**
+     * When a confirm message is received
+     * @param {{}} data
+     */
+    confirm(data){
+        const code = data.code;
+        const uuid = data.uuid;
+        const time = data.time;
+
+        if(code !== 'OK'){
+            Debug.warn(`${uuid} come back with a non OK code.`)
+        }
+
+        this.waitingStack.archive(uuid, time);
+    }
 }

src/socket/socket.js

@@ -47,11 +47,18 @@ module.exports = function (wss) {
 
 		socket.on('message', async data => {
 			data = JSON.parse(data);
+			if(!('uuid' in data)) data['uuid'] = 'None';
 			switch (data.event) {
 				case 'update':
 					try {
 						Object.entries(rooms[data.room]).forEach(([, sock]) => {
-							sock.send(JSON.stringify(data));
+							if(sock === socket) {
+								sock.send(JSON.stringify({
+									code: "OK",
+									uuid: data['uuid'],
+									time: Date.now(),
+								}));
+							}else sock.send(JSON.stringify(data));
 						});
 						if (Object.entries(data.data).filter(([,el]) => el.type !== 'cursor-moves').length > 0) {
 							let documentContent = (await db.getDocument(data["room"])).content;