compressed web socket support

.dist/localuser.js

@@ -106,7 +106,7 @@ class Localuser {
     async initwebsocket() {
         let returny = null;
         const promise = new Promise((res) => { returny = res; });
-        this.ws = new WebSocket(this.serverurls.gateway.toString());
+        this.ws = new WebSocket(this.serverurls.gateway.toString() + "?encoding=json&v=9" + (DecompressionStream ? "&compress=zlib-stream" : ""));
         this.ws.addEventListener('open', (event) => {
             console.log('WebSocket connected');
             this.ws.send(JSON.stringify({
@@ -120,7 +120,7 @@ class Localuser {
                         "release_channel": "Custom",
                         "browser_user_agent": navigator.userAgent
                     },
-                    "compress": false,
+                    "compress": !!DecompressionStream,
                     "presence": {
                         "status": "online",
                         "since": new Date().getTime(),
@@ -130,9 +130,80 @@ class Localuser {
                 }
             }));
         });
-        this.ws.addEventListener('message', (event) => {
+        const ds = new DecompressionStream("deflate");
-            const temp = JSON.parse(event.data);
+        const w = ds.writable.getWriter();
-            console.log(temp);
+        const r = ds.readable.getReader();
+        let arr = new Uint8Array();
+        let build = "";
+        this.ws.addEventListener('message', async (event) => {
+            let temp;
+            if (event.data instanceof Blob) {
+                const buff = await event.data.arrayBuffer();
+                const array = new Uint8Array(buff);
+                const temparr = new Uint8Array(array.length + arr.length);
+                temparr.set(arr, 0);
+                temparr.set(array, arr.length);
+                arr = temparr;
+                const len = array.length;
+                if (!(array[len - 1] === 255 && array[len - 2] === 255 && array[len - 3] === 0 && array[len - 4] === 0)) {
+                    return;
+                }
+                w.write(arr.buffer);
+                arr = new Uint8Array();
+                //console.log(data,test);
+                const read = (await r.read());
+                const data = new TextDecoder().decode(read.value);
+                build += data;
+                console.log("temp");
+                try {
+                    temp = JSON.parse(build);
+                    build = "";
+                }
+                catch {
+                    return;
+                }
+            }
+            else {
+                temp = JSON.parse(event.data);
+            }
+            if (temp.op === 0 && temp.t === "READY") {
+                returny();
+            }
+            this.handleEvent(temp);
+        });
+        this.ws.addEventListener("close", event => {
+            console.log("WebSocket closed with code " + event.code);
+            if (this.wsinterval)
+                clearInterval(this.wsinterval);
+            this.unload();
+            document.getElementById("loading").classList.remove("doneloading");
+            document.getElementById("loading").classList.add("loading");
+            if (((event.code > 1000 && event.code < 1016) || wsCodesRetry.has(event.code))) {
+                if (this.connectionSucceed !== 0 && Date.now() > this.connectionSucceed + 20000)
+                    this.errorBackoff = 0;
+                else
+                    this.errorBackoff++;
+                this.connectionSucceed = 0;
+                document.getElementById("load-desc").innerHTML = "Unable to connect to the Spacebar server, retrying in <b>" + Math.round(0.2 + (this.errorBackoff * 2.8)) + "</b> seconds...";
+                setTimeout(() => {
+                    document.getElementById("load-desc").textContent = "Retrying...";
+                    this.initwebsocket().then(() => {
+                        this.loaduser();
+                        this.init();
+                        document.getElementById("loading").classList.add("doneloading");
+                        document.getElementById("loading").classList.remove("loading");
+                        console.log("done loading");
+                    });
+                }, 200 + (this.errorBackoff * 2800));
+            }
+            else
+                document.getElementById("load-desc").textContent = "Unable to connect to the Spacebar server. Please try logging out and back in.";
+        });
+        await promise;
+        return;
+    }
+    handleEvent(temp) {
+        console.debug(temp);
         if (temp.s)
             this.lastSequence = temp.s;
         if (temp.op == 0) {
@@ -149,7 +220,6 @@ class Localuser {
                 case "READY":
                     this.gottenReady(temp);
                     this.genusersettings();
-                        returny();
                     break;
                 case "MESSAGE_UPDATE":
                     const message = SnowFlake.getSnowFlakeFromID(temp.d.id, Message).getObject();
@@ -209,37 +279,6 @@ class Localuser {
                 this.ws.send(JSON.stringify({ op: 1, d: this.lastSequence }));
             }, temp.d.heartbeat_interval);
         }
-        });
-        this.ws.addEventListener("close", event => {
-            console.log("WebSocket closed with code " + event.code);
-            if (this.wsinterval)
-                clearInterval(this.wsinterval);
-            this.unload();
-            document.getElementById("loading").classList.remove("doneloading");
-            document.getElementById("loading").classList.add("loading");
-            if (((event.code > 1000 && event.code < 1016) || wsCodesRetry.has(event.code))) {
-                if (this.connectionSucceed !== 0 && Date.now() > this.connectionSucceed + 20000)
-                    this.errorBackoff = 0;
-                else
-                    this.errorBackoff++;
-                this.connectionSucceed = 0;
-                document.getElementById("load-desc").innerHTML = "Unable to connect to the Spacebar server, retrying in <b>" + Math.round(0.2 + (this.errorBackoff * 2.8)) + "</b> seconds...";
-                setTimeout(() => {
-                    document.getElementById("load-desc").textContent = "Retrying...";
-                    this.initwebsocket().then(() => {
-                        this.loaduser();
-                        this.init();
-                        document.getElementById("loading").classList.add("doneloading");
-                        document.getElementById("loading").classList.remove("loading");
-                        console.log("done loading");
-                    });
-                }, 200 + (this.errorBackoff * 2800));
-            }
-            else
-                document.getElementById("load-desc").textContent = "Unable to connect to the Spacebar server. Please try logging out and back in.";
-        });
-        await promise;
-        return;
     }
     resolveChannelFromID(ID) {
         let resolve = this.guilds.find(guild => guild.channelids[ID]);

.dist/member.js

@@ -99,7 +99,9 @@ class Member {
             }
             return memb;
         }
-        const promoise = fetch(guild.info.api.toString() + "/users/" + id + "/profile?with_mutual_guilds=true&with_mutual_friends_count=true&guild_id=" + guild.snowflake, { headers: guild.headers }).then(_ => _.json()).then(json => {
+        const prom1 = fetch(guild.info.api.toString() + "/users/" + id + "/profile?with_mutual_guilds=true&with_mutual_friends_count=true&guild_id=" + guild.snowflake, { headers: guild.headers });
+        prom1.catch(_ => { console.log(_); });
+        const promoise = prom1.then(_ => _.json()).then(json => {
             const memb = new Member(json, guild);
             Member.already[guild.id][id] = memb;
             console.log("resolved");

webpage/localuser.ts

@@ -112,7 +112,7 @@ class Localuser{
     async initwebsocket():Promise<void>{
         let returny=null
         const promise=new Promise((res)=>{returny=res});
-        this.ws = new WebSocket(this.serverurls.gateway.toString());
+        this.ws = new WebSocket(this.serverurls.gateway.toString()+"?encoding=json&v=9"+(DecompressionStream?"&compress=zlib-stream":""));
         this.ws.addEventListener('open', (event) => {
         console.log('WebSocket connected');
         this.ws.send(JSON.stringify({
@@ -126,7 +126,7 @@ class Localuser{
                     "release_channel": "Custom",
                     "browser_user_agent": navigator.userAgent
                 },
-                "compress": false,
+                "compress": !!DecompressionStream,
                 "presence": {
                     "status": "online",
                     "since": new Date().getTime(),
@@ -136,14 +136,81 @@ class Localuser{
             }
         }))
         });
+        const ds = new DecompressionStream("deflate");
+        const w= ds.writable.getWriter();
+        const r=ds.readable.getReader();
+        let arr=new Uint8Array();
+        let build="";
+        this.ws.addEventListener('message', async (event) => {
+            let temp:{op:number,t:string};
+            if(event.data instanceof Blob){
+                const buff=await event.data.arrayBuffer()
+                const array=new Uint8Array(buff);
 
-        this.ws.addEventListener('message', (event) => {
+                const temparr=new Uint8Array(array.length+arr.length);
+                temparr.set(arr, 0);
+                temparr.set(array, arr.length);
+                arr=temparr;
 
+                const len=array.length;
+                if(!(array[len-1]===255&&array[len-2]===255&&array[len-3]===0&&array[len-4]===0)){
+                    return;
+                }
+                w.write(arr.buffer);
+                arr=new Uint8Array();
+                //console.log(data,test);
+                const read=(await r.read());
+                const data=new TextDecoder().decode(read.value);
+                build+=data;
+                console.log("temp");
+                try{
+                    temp=JSON.parse(build);
+                    build="";
+                }catch{
+                    return;
+                }
+            }else{
+                temp=JSON.parse(event.data);
+            }
+            if(temp.op===0&&temp.t==="READY"){
+                returny();
+            }
+            this.handleEvent(temp);
+        });
 
+        this.ws.addEventListener("close", event => {
+            console.log("WebSocket closed with code " + event.code);
+            if (this.wsinterval) clearInterval(this.wsinterval);
 
-            const temp=JSON.parse(event.data);
+            this.unload();
-            console.log(temp)
+            document.getElementById("loading").classList.remove("doneloading");
+            document.getElementById("loading").classList.add("loading");
+            if (((event.code>1000 && event.code<1016) || wsCodesRetry.has(event.code))) {
+                if (this.connectionSucceed!==0 && Date.now()>this.connectionSucceed+20000) this.errorBackoff=0;
+                else this.errorBackoff++;
+                this.connectionSucceed=0;
 
+                document.getElementById("load-desc").innerHTML="Unable to connect to the Spacebar server, retrying in <b>" + Math.round(0.2 + (this.errorBackoff*2.8)) + "</b> seconds...";
+
+                setTimeout(() => {
+                    document.getElementById("load-desc").textContent="Retrying...";
+
+                    this.initwebsocket().then(() => {
+                        this.loaduser();
+                        this.init();
+                        document.getElementById("loading").classList.add("doneloading");
+                        document.getElementById("loading").classList.remove("loading");
+                        console.log("done loading");
+                    });
+                }, 200 + (this.errorBackoff*2800));
+            } else document.getElementById("load-desc").textContent="Unable to connect to the Spacebar server. Please try logging out and back in.";
+        });
+
+        await promise;
+        return;
+    }
+    handleEvent(temp){
+        console.debug(temp);
         if (temp.s) this.lastSequence=temp.s;
         if(temp.op==0){
             switch(temp.t){
@@ -159,7 +226,6 @@ class Localuser{
                 case "READY":
                     this.gottenReady(temp as readyjson);
                     this.genusersettings();
-                        returny();
                     break;
                 case "MESSAGE_UPDATE":
                     const message=SnowFlake.getSnowFlakeFromID(temp.d.id,Message).getObject();
@@ -219,39 +285,6 @@ class Localuser{
                 this.ws.send(JSON.stringify({op:1,d:this.lastSequence}))
             },temp.d.heartbeat_interval)
         }
-
-        });
-
-        this.ws.addEventListener("close", event => {
-            console.log("WebSocket closed with code " + event.code);
-            if (this.wsinterval) clearInterval(this.wsinterval);
-
-            this.unload();
-            document.getElementById("loading").classList.remove("doneloading");
-            document.getElementById("loading").classList.add("loading");
-            if (((event.code>1000 && event.code<1016) || wsCodesRetry.has(event.code))) {
-                if (this.connectionSucceed!==0 && Date.now()>this.connectionSucceed+20000) this.errorBackoff=0;
-                else this.errorBackoff++;
-                this.connectionSucceed=0;
-
-                document.getElementById("load-desc").innerHTML="Unable to connect to the Spacebar server, retrying in <b>" + Math.round(0.2 + (this.errorBackoff*2.8)) + "</b> seconds...";
-
-                setTimeout(() => {
-                    document.getElementById("load-desc").textContent="Retrying...";
-
-                    this.initwebsocket().then(() => {
-                        this.loaduser();
-                        this.init();
-                        document.getElementById("loading").classList.add("doneloading");
-                        document.getElementById("loading").classList.remove("loading");
-                        console.log("done loading");
-                    });
-                }, 200 + (this.errorBackoff*2800));
-            } else document.getElementById("load-desc").textContent="Unable to connect to the Spacebar server. Please try logging out and back in.";
-        });
-
-        await promise;
-        return;
     }
     resolveChannelFromID(ID:string):Channel{
         let resolve=this.guilds.find(guild => guild.channelids[ID]);

webpage/member.ts

@@ -92,7 +92,9 @@ class Member{
             }
             return memb;
         }
-        const promoise= fetch(guild.info.api.toString()+"/users/"+id+"/profile?with_mutual_guilds=true&with_mutual_friends_count=true&guild_id="+guild.snowflake,{headers:guild.headers}).then(_=>_.json()).then(json=>{
+        const prom1= fetch(guild.info.api.toString()+"/users/"+id+"/profile?with_mutual_guilds=true&with_mutual_friends_count=true&guild_id="+guild.snowflake,{headers:guild.headers})
+        prom1.catch(_=>{console.log(_)})
+        const promoise=prom1.then(_=>_.json()).then(json=>{
             const memb=new Member(json,guild);
             Member.already[guild.id][id]=memb;
             console.log("resolved")

webpage/style.css

@@ -944,6 +944,7 @@ span {
 	text-align: center;
 	transition: transform .2s;
 	vertical-align: middle;
+	display: flex;
 }
 
 #centerdiv {
@@ -951,6 +952,8 @@ span {
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
+	display: flex;
+	flex-direction: column;
 }
 
 #loading.doneloading {