socket 断线自动重连，文件上传功能

ui/components/message/index.page.js

@@ -1,25 +1,19 @@
 import { AutoloadPage } from 'vj/misc/PageLoader';
 import Notification from 'vj/components/notification';
-import i18n from 'vj/utils/i18n';
 
 const messagePage = new AutoloadPage('messagePage', () => {
-  async function init(isReconnect = false) {
-    const { default: SockJs } = await import('sockjs-client');
+  async function init() {
+    const { default: SockJs } = await import('../socket');
 
     const sock = new SockJs(`/home/messages-conn?token=${UiContext.token}`);
-    sock.onopen = () => {
-      if (isReconnect) Notification.info('Reconnected');
-    };
     sock.onmessage = (message) => {
       const msg = JSON.parse(message.data);
-      console.log(msg);
-      Notification.show({ title: msg.udoc.uname, message: msg.mdoc.content, duration: 0 });
-    };
-    sock.onclose = () => {
-      Notification.warn(i18n('Disconnected from the server. Reconnecting...'));
-      setTimeout(() => {
-        init(true);
-      }, 3000);
+      Notification.show({
+        title: msg.udoc.uname,
+        avatar: msg.udoc.gravatar,
+        message: msg.mdoc.content,
+        duration: 0,
+      });
     };
   }
 

ui/components/notification/index.js

@@ -22,16 +22,18 @@ export default class Notification {
   }
 
   static show({
-    avatar, title, message, type, duration = 3000,
+    avatar, title, message, type = '', duration = 3000,
     actionButtons = [],
   }) {
     if (duration && lastNotification) {
       Notification.hide();
     }
+    if (avatar) type += ' avatar';
+    if (title) type += ' title';
     const $dom = $(tpl`<div class="notification ${type} hide"></div>`);
     if (avatar) $(tpl`<img width="64" height="64" class="avatar" src="${avatar}"></img>`).appendTo($dom);
-    if (title) $(tpl`${title} `).appendTo($dom);
-    $(tpl`${message}`).appendTo($dom);
+    if (title) $(tpl`<h2>${title}</h2>`).appendTo($dom);
+    $(tpl`<p>${message}</p>`).appendTo($dom);
     actionButtons.forEach((button) => {
       $(tpl`<button class="${button.class}" onclick="javascript:window.${button.funcName}();">${button.name}</button>`).appendTo($dom);
     });

ui/components/notification/notification.page.styl

@@ -14,6 +14,9 @@
   box-shadow: 0 4px 10px rgba(#000, 0.4)
   min-width: rem(150px)
 
+  img
+    border-radius: 50%
+
   &.hide
     opacity: 0
     transform: translateY(20px) scale(0.9)

ui/components/socket/index.js

@@ -0,0 +1,42 @@
+import SockJS from 'sockjs-client';
+import Notification from 'vj/components/notification';
+import i18n from 'vj/utils/i18n';
+
+export default class Sock {
+  constructor(url) {
+    this.url = url;
+    this.reconnect = false;
+    this.init();
+  }
+
+  init() {
+    this.sock = new SockJS(this.url);
+    this.sock.onopen = () => {
+      if (this.reconnect) Notification.warn(i18n('Reconnected to the server.'));
+      if (this.onopen) this.onopen(this.reconnect);
+    };
+    this.sock.onclose = (code, reason) => {
+      console.warn('Connection closed, ', code, reason);
+      if (this.closed) {
+        if (this.onclose) this.onclose(code, reason);
+        return;
+      }
+      Notification.warn(i18n('Disconnected from the server. Reconnecting...'));
+      this.reconnect = setTimeout(() => { this.init(); }, 3000);
+      if (this.onclose) this.onclose(code, reason);
+    };
+    this.sock.onmessage = (message) => {
+      if (process.env.NODE_ENV !== 'production') console.log('Sock.onmessage: ', message);
+      if (this.onmessage) this.onmessage(message);
+    };
+  }
+
+  send(data) {
+    this.sock.send(data);
+  }
+
+  close() {
+    this.closed = true;
+    this.sock.close();
+  }
+}