@mixd-id/web-scaffold 0.1.230406236 → 0.1.230406238

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406236",
+  "version": "0.1.230406238",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -11,8 +11,7 @@
   "exports": {
     ".": "./src/index.js",
     "./themes/default": "./src/themes/default/index.js",
-    "./components/Modal.vue": "./src/components/Modal.vue",
-    "./components/Textbox.vue": "./src/components/Textbox.vue",
+    "./components/*": "./src/components/*",
     "./mixin/component": "./src/mixin/component.js",
     "./mixin/edit-mode": "./src/mixin/edit-mode.js",
     "./middleware/http/trim-string": "./src/middleware/http/trim-string.js",
@@ -20,6 +19,10 @@
       "require": "./src/utils/helpers.js",
       "import": "./src/utils/helpers.mjs"
     },
+    "./wss": {
+      "require": "./src/utils/wss.js",
+      "import": "./src/utils/wss.mjs"
+    },
     "./importer": "./src/utils/importer.js",
     "./listpage1": "./src/utils/listpage1.js",
     "./listview": "./src/utils/listview.js",
@@ -36,10 +39,12 @@
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
+    "crypto-js": "^4.2.0",
     "daisyui": "^2.19.0",
     "dayjs": "^1.11.2",
     "exceljs": "^4.3.0",
     "express": "^4.18.1",
+    "eventemitter2": "^6.4.7",
     "file-type": "^18.2.1",
     "glob": "^8.0.3",
     "lodash": "^4.17.21",
@@ -51,7 +56,8 @@
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.25",
     "vue-chartjs": "^5.2.0",
-    "vue-router": "^4.0.14"
+    "vue-router": "^4.0.14",
+    "ws": "^8.16.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.2.0",

package/src/utils/wss.js

@@ -0,0 +1,238 @@
+const WebSocket = require('ws');
+const CryptoJS = require("crypto-js");
+const crypto = require("crypto-js");
+const EventEmitter2 = require("eventemitter2");
+
+const convertDataUrlObj = async(obj) => {
+
+  const processObjectProperties = async (inputObj) => {
+
+    let outputObj
+
+    if(Array.isArray(inputObj)){
+      outputObj = []
+
+      for(let i = 0; i < inputObj.length; i++){
+        const value = inputObj[i];
+
+        if (Buffer.isBuffer(value)) {
+          outputObj[i] = value.toString('base64')
+        } else if (typeof value === 'object' && value !== null) {
+          outputObj[i] = await processObjectProperties(value);
+        } else {
+          outputObj[i] = value;
+        }
+      }
+    }
+    else if(typeof inputObj === 'object' && inputObj !== null){
+      outputObj = {};
+      for (const key in inputObj) {
+        if (inputObj.hasOwnProperty(key)) {
+          const value = inputObj[key];
+
+          if (Buffer.isBuffer(value)) {
+            outputObj[key] = value.toString('base64')
+          } else if (typeof value === 'object' && value !== null) {
+            outputObj[key] = await processObjectProperties(value);
+          } else {
+            outputObj[key] = value;
+          }
+        }
+      }
+    }
+
+    return outputObj;
+  };
+
+  return processObjectProperties(obj);
+}
+
+const revertDataUrlObj = (obj) => {
+
+  // Recursive function to process each property of the object
+  const processObjectProperties = async (inputObj) => {
+    let outputObj;
+
+    if(Array.isArray(inputObj)){
+      outputObj = []
+      for (let i = 0; i < inputObj.length; i++) {
+        let value = inputObj[i];
+
+        if (typeof value === 'string' && value.startsWith('data:')) {
+          if(value.indexOf(',') >= 0){
+            value = value.substring(value.indexOf(',') + 1)
+          }
+          outputObj[i] = Buffer.from(value, 'base64');
+        } else if (typeof value === 'object' && value !== null) {
+          outputObj[i] = await processObjectProperties(value);
+        } else {
+          outputObj[i] = value;
+        }
+      }
+    }
+    else{
+      outputObj = {}
+
+      for (const key in inputObj) {
+        if (inputObj.hasOwnProperty(key)) {
+          let value = inputObj[key];
+
+          if (typeof value === 'string' && value.startsWith('data:')) {
+            if(value.indexOf(',') >= 0){
+              value = value.substring(value.indexOf(',') + 1)
+            }
+            outputObj[key] = Buffer.from(value, 'base64');
+          } else if (typeof value === 'object' && value !== null) {
+            outputObj[key] = await processObjectProperties(value);
+          } else {
+            outputObj[key] = value;
+          }
+        }
+      }
+    }
+
+
+    return outputObj;
+  };
+
+  // Start processing the top-level object
+  return processObjectProperties(obj);
+}
+
+
+class WSS extends EventEmitter2{
+
+  _instance
+  _opt
+
+  emits = [ ]
+
+  _authFn = []
+  _reqFn = []
+
+  async fromBinaryData(binaryData){
+    const secretKey = this._opt.key;
+    const encryptedString = Buffer.from(binaryData).toString('utf-8');
+    const decryptedData = CryptoJS.AES.decrypt(encryptedString, secretKey).toString(CryptoJS.enc.Utf8);
+    const receivedObject = JSON.parse(decryptedData);
+    return await revertDataUrlObj(receivedObject);
+  }
+
+  async toBinaryData(obj){
+    const secretKey = this._opt.key;
+    const dataUrlObj = await convertDataUrlObj(obj)
+    const encryptedData = crypto.AES.encrypt(JSON.stringify(dataUrlObj), secretKey).toString();
+    return new TextEncoder().encode(encryptedData);
+  }
+
+  constructor(opt) {
+    super()
+
+    this._opt = opt
+    this._instance = new WebSocket.Server(opt);
+
+    this._instance.on('connection', (socket, req) => {
+
+      socket.leave = (channel) => {
+        if((socket.channels ?? {})[channel]){
+          delete socket.channels[channel]
+          //console.log('leave', channel)
+        }
+      }
+
+      socket.join = (channel) => {
+        if(!socket.channels){
+          socket.channels = {}
+        }
+
+        socket.channels[channel] = 1
+        //console.log('join', channel)
+      }
+
+      socket.to = (channel) => {
+        return {
+          emit: (model, event, items) => {
+            this.broadcast(channel, { model, event, items }).then()
+          }
+        }
+      }
+
+      socket.on('message', async (binaryData) => {
+
+        const { _requestId, path, params } = await this.fromBinaryData(binaryData);
+
+        let status = 200
+        let data
+        switch(path){
+
+          case '_auth':
+            try{
+              for(let fn of this._authFn){
+                await fn(params, socket)
+              }
+            }
+            catch(e){
+              socket.close(1002, e.message);
+            }
+            break
+
+          case 'ping':
+            data = { type:'pong' }
+            break
+
+          default:
+            try{
+              const arr = (await Promise.all(this._reqFn.map(fn => fn({ path, params }, socket))))
+                .filter(_ => _)
+
+              data = arr.length > 0 ? JSON.parse(JSON.stringify(arr.pop())) : data
+            }
+            catch(e){
+              status = 500
+              data = {
+                name: e.name,
+                message: e.message,
+                errors: e.errors,
+                stack: process.env.APP_DEBUG === 'true' ?
+                  e.stack : undefined
+              }
+            }
+            break
+        }
+
+        socket.send(await this.toBinaryData({
+          _requestId,
+          status,
+          data
+        }))
+      });
+
+      socket.on('close', (e) => {
+        this.emit('close', e, socket)
+      });
+    })
+  }
+
+  auth(fn){
+    this._authFn.push(fn)
+  }
+
+  req(fn){
+    this._reqFn.push(fn)
+  }
+
+  async broadcast(channel, { model, event, items }){
+    //console.log('broadcast', channel, JSON.stringify({ model, event, items }).substring(0, 70))
+
+    for(let socket of this._instance.clients){
+      if(socket.readyState === WebSocket.OPEN && (socket.channels ?? {})[channel]){
+        socket.send(await this.toBinaryData({ data:{ model, event, items } }))
+      }
+    }
+  }
+
+}
+
+module.exports = {
+  WSS
+}

package/src/utils/wss.mjs

@@ -0,0 +1,289 @@
+import CryptoJS from "crypto-js";
+import EventEmitter2 from "eventemitter2";
+
+class WSS extends EventEmitter2{
+
+  _instance
+  _opt
+  _counter = 0
+  _callbacks = {}
+  _pendingSend = []
+  _lastBlurAt
+
+  static async convertDataUrlObj(obj){
+
+    const fileToDataURL = (file) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (event) => resolve(event.target.result);
+        reader.onerror = (error) => reject(error);
+        reader.readAsDataURL(file);
+      });
+    };
+
+    const processObjectProperties = async (inputObj) => {
+      let outputObj;
+
+      if(Array.isArray(inputObj)){
+        outputObj = []
+        for(let i = 0; i < inputObj.length; i++){
+          const value = inputObj[i];
+
+          if (value instanceof File) {
+            outputObj[i] = await fileToDataURL(value);
+          } else if (typeof value === 'object' && value !== null) {
+            outputObj[i] = await processObjectProperties(value);
+          } else {
+            outputObj[i] = value;
+          }
+        }
+      }
+      else{
+        outputObj = {}
+
+        for (const key in inputObj) {
+          if (inputObj.hasOwnProperty(key)) {
+            const value = inputObj[key];
+
+            if (value instanceof File) {
+              outputObj[key] = await fileToDataURL(value);
+            } else if (typeof value === 'object' && value !== null) {
+              outputObj[key] = await processObjectProperties(value);
+            } else {
+              outputObj[key] = value;
+            }
+          }
+        }
+      }
+
+
+      return outputObj;
+    };
+
+    return processObjectProperties(obj);
+  }
+
+  static async revertDataUrlObj(obj){
+
+    const processObjectProperties = async (inputObj) => {
+      let outputObj;
+
+      if(Array.isArray(inputObj)){
+        outputObj = []
+        for (let i = 0; i < inputObj.length; i++) {
+          let value = inputObj[i];
+
+          if (typeof value === 'object' && value !== null) {
+            outputObj[i] = await processObjectProperties(value);
+          } else {
+            outputObj[i] = value;
+          }
+        }
+      }
+      else if(typeof inputObj === 'object' && inputObj !== null){
+        outputObj = {}
+        for (const key in inputObj) {
+          if (inputObj.hasOwnProperty(key)) {
+            let value = inputObj[key];
+
+            if (typeof value === 'object' && value !== null) {
+              outputObj[key] = await processObjectProperties(value);
+            } else {
+              outputObj[key] = value;
+            }
+          }
+        }
+      }
+
+      return outputObj;
+    };
+
+    return processObjectProperties(obj);
+  }
+
+  constructor(opt) {
+    super();
+
+    this._opt = Object.assign({
+      auth: {},
+      debug: false,
+      key: '',
+      onConnect: null,
+      onConnectError: null,
+      onDisconnect: null,
+      timeout: 30000,
+      url: '',
+    }, opt ?? {})
+
+    if(typeof window !== 'undefined'){
+      window.addEventListener('online', this._onOnlineChanged)
+      window.addEventListener('offline', this._onOnlineChanged)
+      window.addEventListener('blur', this._onBlur)
+      window.addEventListener('focus', this._onFocus)
+    }
+
+    this.connect().then()
+  }
+
+  _onBlur = () => {
+    this._lastBlurAt = new Date().getTime()
+  }
+
+  _onFocus = () => {
+    this.emit('focus')
+
+    if(this._lastBlurAt){
+      this.send('ping', {}, { timeout:1000 })
+        .catch(_ => {
+          this.reconnect().then()
+        })
+    }
+  }
+
+  _onOnlineChanged = (e) => {
+    if(!navigator.onLine){
+      this.emit('disconnect', e)
+    }
+    else{
+      this.emit('connect')
+    }
+  }
+
+  async fromBinaryData(binaryData){
+    const secretKey = this._opt.key;
+    const encryptedString = new TextDecoder().decode(binaryData)
+    const decryptedData = CryptoJS.AES.decrypt(encryptedString, secretKey).toString(CryptoJS.enc.Utf8);
+    const receivedObject = JSON.parse(decryptedData);
+    return await WSS.revertDataUrlObj(receivedObject);
+  }
+
+  async toBinaryData(obj){
+    const secretKey = this._opt.key;
+    const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(obj), secretKey).toString();
+    return new TextEncoder().encode(encryptedData)
+  }
+
+  async connect(reconnect = false){
+
+    this._instance = new WebSocket(this._opt.url)
+
+    this._instance.binaryType = 'arraybuffer';
+
+    this._instance.onopen = () => {
+      this.send('_auth', this._opt.auth)
+        .then(() => {
+          reconnect ? this.emit('reconnect') : this.emit('connect')
+
+          for(let sendParams of this._pendingSend){
+            this.sendSync(sendParams.path, sendParams.params, sendParams.cb, sendParams.err)
+          }
+          this._pendingSend = []
+        })
+    };
+
+    this._instance.onmessage = async (event) => {
+      const obj = await this.fromBinaryData(event.data);
+
+      const { _requestId, status, data } = obj
+
+      if(_requestId){
+        if(this._callbacks[_requestId]){
+          const { cb, err, path, params, t1 } = this._callbacks[_requestId]
+          status === 200 ? cb(data) : err(data)
+          delete this._callbacks[_requestId]
+
+          if(this._opt.debug){
+            console.log(new Date().getTime() - t1, path, params, data)
+          }
+        }
+      }
+      else{
+        const { model, event, items } = data
+        this.emit(model, event, items)
+
+        if(this._opt.debug){
+          console.log('SIGNAL', model, event, items)
+        }
+      }
+
+    };
+
+    this._instance.onerror = (e) => {
+      this.emit('error', e)
+    }
+
+    this._instance.onclose = (e) => {
+
+      switch(e.code){
+
+        case 1002:
+          this.emit('connect_error', e)
+          break
+
+        default:
+          this.emit('disconnect')
+          break
+      }
+    };
+  }
+
+  async reconnect(){
+    if(this._instance){
+      this._instance.close()
+    }
+
+    await this.connect(true)
+  }
+
+  sendSync(path, params, cb, err, override){
+    if(this._instance.readyState !== 1){
+      this._pendingSend.push({ path, params, cb, err })
+      return
+    }
+
+    if(!navigator.onLine){
+      err({ message: 'Unable to send, network disconnected' })
+      return
+    }
+
+    const _requestId = ++this._counter
+
+    WSS.convertDataUrlObj({
+      _requestId,
+      path,
+      params
+    })
+      .then(async(dataUrlObj) => {
+        const binaryData = await this.toBinaryData(dataUrlObj)
+        this._instance.send(binaryData)
+
+        this._callbacks[_requestId] = {
+          cb,
+          err,
+          path,
+          params,
+          t1: new Date().getTime()
+        }
+
+        setTimeout(() => {
+          if(this._callbacks[_requestId]){
+            err({ message: 'Timeout' })
+            delete this._callbacks[_requestId]
+
+            this.reconnect()
+          }
+        }, (override ?? {}).timeout ?? this._opt.timeout)
+      })
+  }
+
+  send(path, params, override){
+    return new Promise((resolve, reject) => {
+      this.sendSync(path, params, resolve, reject, override)
+    })
+  }
+
+}
+
+export {
+  WSS
+}