core, ui, judge: rewrite http & ws layer (#352)

packages/ui-default/components/message/index.page.js

@@ -6,60 +6,62 @@ import i18n from 'vj/utils/i18n';
 import tpl from 'vj/utils/tpl';
 
 const messagePage = new AutoloadPage('messagePage', (pagename) => {
-  if (pagename === 'home_messages') return;
-  let visible = true;
-  document.addEventListener('visibilitychange', () => {
-    const state = document.visibilityState;
-    if (state === 'hidden' && visible) visible = false;
-    if (state === 'visible' && !visible) visible = true;
-  });
+  if (pagename === 'home_messages' || !UserContext._id) return;
 
-  async function init() {
-    if (UserContext.unreadMsg) {
-      new VjNotification({
-        type: 'info',
-        message: i18n(`You have ${UserContext.unreadMsg > 1 ? 'new messages' : 'a new message'}.`),
-        duration: 5000,
-        action: () => window.open('/home/messages', '_blank'),
-      }).show();
-    }
-
-    const { default: SockJs } = await import('../socket');
-
-    const sock = new SockJs('/home/messages-conn', true, true);
-    sock.onmessage = (message) => {
-      const msg = JSON.parse(message.data);
-      console.log('Received message', msg);
-      if (msg.mdoc.flag & FLAG_ALERT) {
-        // Is alert
-        new InfoDialog({
-          cancelByClickingBack: false,
-          $body: tpl`
-            <div class="typo">
-              ${{ templateRaw: true, html: i18n('Message from {0}:', `<div data-user>${msg.mdoc.from}</div>`) }}
-              <p>${i18n(msg.mdoc.content)}</p>
-            </div>`,
-        }).open();
-      } else if (msg.udoc._id === 1 && msg.mdoc.flag & 4) {
-        new VjNotification({
-          message: i18n('You received a system message, click here to view.'),
-          duration: 15000,
-          action: () => window.open(`/home/messages?uid=${msg.udoc._id}`, '_blank'),
-        }).show();
-      } else {
-        // Is message
-        new VjNotification({
-          title: msg.udoc.uname,
-          avatar: msg.udoc.avatarUrl,
-          message: msg.mdoc.content,
-          duration: 15000,
-          action: () => window.open(`/home/messages?uid=${msg.udoc._id}`, '_blank'),
-        }).show();
-      }
-    };
+  if (UserContext.unreadMsg) {
+    new VjNotification({
+      type: 'info',
+      message: i18n(`You have ${UserContext.unreadMsg > 1 ? 'new messages' : 'a new message'}.`),
+      duration: 5000,
+      action: () => window.open('/home/messages', '_blank'),
+    }).show();
   }
 
-  if (UserContext._id !== 0) init();
+  const onmessage = (message) => {
+    const msg = JSON.parse(message);
+    console.log('Received message', msg);
+    if (msg.mdoc.flag & FLAG_ALERT) {
+      // Is alert
+      return new InfoDialog({
+        cancelByClickingBack: false,
+        $body: tpl`
+          <div class="typo">
+            ${{ templateRaw: true, html: i18n('Message from {0}:', `<div data-user>${msg.mdoc.from}</div>`) }}
+            <p>${i18n(msg.mdoc.content)}</p>
+          </div>`,
+      }).open();
+    }
+    if (msg.udoc._id === 1 && msg.mdoc.flag & 4) {
+      // System notification
+      return new VjNotification({
+        message: i18n('You received a system message, click here to view.'),
+        duration: 15000,
+        action: () => window.open(`/home/messages?uid=${msg.udoc._id}`, '_blank'),
+      }).show();
+    }
+    // Is message
+    return new VjNotification({
+      title: msg.udoc.uname,
+      avatar: msg.udoc.avatarUrl,
+      message: msg.mdoc.content,
+      duration: 15000,
+      action: () => window.open(`/home/messages?uid=${msg.udoc._id}`, '_blank'),
+    }).show();
+  };
+
+  const path = new URL('/home/messages-conn', window.location.href).toString();
+  const worker = new SharedWorker('/sharedworker.js', { name: 'Hydro Messages Shared Worker' });
+  worker.port.start();
+  worker.port.postMessage({ type: 'init', path, cookie: document.cookie });
+  worker.port.onmessage = (e) => {
+    if (e.data.type !== 'message') return;
+    if (document.hidden) {
+      worker.port.postMessage({ type: 'fail' });
+    } else {
+      worker.port.postMessage({ type: 'success' });
+      onmessage(e.data.payload);
+    }
+  };
 });
 
 export default messagePage;

packages/ui-default/components/navigation/navigation.page.js

@@ -35,7 +35,6 @@ function handlerSwitchAccount(ev) {
       </div>
     `,
     onDispatch(action) {
-      console.log(action, userSelector.value());
       if (action === 'ok' && userSelector.value() === null) {
         userSelector.focus();
         return false;

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

@@ -1,88 +1,38 @@
-import SockJS from 'sockjs-client';
-import $ from 'jquery';
-import Notification from 'vj/components/notification/index';
-import i18n from 'vj/utils/i18n';
-import tpl from 'vj/utils/tpl';
-
-const notification = tpl`<div style="position: fixed; left: 0px; bottom: -100px; width: 100%; \
-background: rgb(255, 241, 184); z-index: 2147483647; color: rgb(97, 52, 0); \
-text-align: center; font-size: 18px; font-family: Consolas, Menlo, Courier, monospace; \
-padding: 8px 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;" id="disconnect_notification" \
->${i18n('Disconnected from the server, trying to reconnect...')}</div>`;
-
-const $el = $(notification);
-$el.appendTo('body');
-$el.hide();
-function create() {
-  $el.show();
-  $el.animate({ bottom: 0 }, 100);
-}
-function remove() {
-  $el.animate({ bottom: -100 }, 100, () => $el.remove());
-}
+import ReconnectingWebSocket from 'reconnecting-websocket';
 
 export default class Sock {
-  constructor(url, showNotification = true, useShared = false) {
-    this.url = url;
-    this.shared = false;
-    this.isreconnect = false;
-    this.retryCount = 0;
-    if (useShared && window.SharedWorker) this.initShared();
-    else this.init();
-    this.showNotification = showNotification;
-  }
-
-  onauth() {
-    remove();
-    this.retryCount = 0;
-    if (this.onopen) this.onopen(this.sock);
-  }
-
-  init() {
-    this.sock = new SockJS(this.url);
-    // SockJS wouldn't send cookie. hack.
-    this.sock.onopen = () => this.send(document.cookie);
+  constructor(url) {
+    const i = new URL(url, window.location.href);
+    i.protocol = i.protocol.replace('http', 'ws');
+    this.url = i.toString();
+    this.closed = false;
+    this.sock = new ReconnectingWebSocket(this.url);
+    this.sock.onopen = () => {
+      console.log('Connected');
+      this.onopen?.(this.sock);
+    };
     this.sock.onclose = ({ code, reason }) => {
-      this.retryCount++;
       console.warn('Connection closed, ', code, reason);
       if (code >= 4000) this.closed = true;
-      if (!this.closed) {
-        this.isreconnect = setTimeout(this.init.bind(this), 3000);
-      }
-      if (this.showNotification && this.retryCount > 3) create();
-      if (this.onclose) this.onclose(code, reason);
+      this.onclose?.(code, reason);
     };
     this.sock.onmessage = (message) => {
       if (process.env.NODE_ENV !== 'production') console.log('Sock.onmessage: ', message);
       const msg = JSON.parse(message.data);
       if (msg.event === 'auth') {
         if (msg.error === 'PermissionError' || msg.error === 'PrivilegeError') {
-          if (this.showNotification) Notification.info(i18n('Connect fail: Permission denied.'));
-          this.closed = true;
-        } else this.onauth();
-      } else if (this.onmessage) this.onmessage(message);
+          this.close();
+        }
+      } else this.onmessage?.(message);
     };
   }
 
-  initShared() {
-    this.shared = true;
-    const worker = new SharedWorker('/sharedworker.js', { name: 'Hydro Shared Connections Worker' });
-    worker.port.start();
-    const path = `${new URL(this.url, window.location.href).href.replace('http', 'ws')}/websocket`;
-    worker.port.postMessage({ type: 'sharedConn', path, cookie: document.cookie });
-    worker.port.onmessage = (e) => {
-      if (e.data.type === 'message') this.onmessage({ data: e.data.payload });
-    };
-    this.worker = worker;
-  }
-
   send(data) {
-    if (this.shared) this.worker.port.postMessage({ type: 'message', path: this.url, payload: data });
-    else this.sock.send(data);
+    this.sock.send(data);
   }
 
   close() {
     this.closed = true;
-    if (!this.shared) this.sock.close();
+    this.sock?.close?.();
   }
 }