core&ui: add websocket compression

packages/ui-default/components/socket/index.ts

@@ -1,11 +1,15 @@
 import ReconnectingWebSocket from 'reconnecting-websocket';
+import { Shorty } from 'shorty.js';
 
 export default class Sock {
   sock: ReconnectingWebSocket;
   interval: NodeJS.Timeout;
 
-  constructor(public url: string, nocookie = false) {
+  constructor(public url: string, nocookie = false, shorty = false) {
     const i = new URL(url, window.location.href);
+    if (shorty) {
+      i.searchParams.append('shorty', 'on');
+    }
     if (i.host !== window.location.host && !nocookie && document.cookie.includes('sid=')) {
       i.searchParams.append('sid', document.cookie.split('sid=')[1].split(';')[0]);
     }
@@ -26,20 +30,27 @@ export default class Sock {
       if (this.interval) clearInterval(this.interval);
       this.onclose?.(code, reason);
     };
+    let decompress: Shorty = null;
     this.sock.onmessage = (message) => {
       if (message.data === 'pong') return;
       if (message.data === 'ping') {
         this.sock.send('pong');
         return;
       }
+      if (message.data === 'shorty') {
+        decompress = new Shorty();
+        return;
+      }
       if (process.env.NODE_ENV !== 'production') console.log('Sock.onmessage: ', message);
-      const msg = JSON.parse(message.data);
+      let data = message.data;
+      if (decompress) data = decompress.inflate(data);
+      const msg = JSON.parse(data);
       if (msg.error === 'PermissionError' || msg.error === 'PrivilegeError') this.close();
-      else this.onmessage?.(message);
+      else this.onmessage?.(message, data);
     };
   }
 
-  onmessage: (message: MessageEvent<any>) => void;
+  onmessage: (message: MessageEvent<any>, data: string) => void;
   onclose: (code: number, reason: string) => void;
   onopen: (sock: ReconnectingWebSocket) => void;