Web Worker regex test (#1354)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

Dockerfile

@@ -8,12 +8,13 @@ RUN apk add --update --no-cache \
 
 # Create app directory
 WORKDIR /app
-ADD . /app/
 
 COPY package*.json ./
 
 RUN npm install
 
+ADD . /app/
+
 COPY . .
 
 RUN npm run generate

assets/js/regex.worker.js

@@ -0,0 +1,31 @@
+function generateREForProtocol(protocol) {
+  return [
+    new RegExp(
+      `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
+    ),
+    new RegExp(
+      `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
+    ),
+  ]
+}
+
+const ws = generateREForProtocol("^(wss?:\\/\\/)?")
+const sse = generateREForProtocol("^(https?:\\/\\/)?")
+const socketio = generateREForProtocol("^((wss?:\\/\\/)|(https?:\\/\\/))?")
+const regex = { ws, sse, socketio }
+
+// type = ws/sse/socketio
+async function validator(type, url) {
+  console.time("validator " + url)
+  const [res1, res2] = await Promise.all([regex[type][0].test(url), regex[type][1].test(url)])
+  console.timeEnd("validator " + url)
+  return res1 || res2
+}
+
+onmessage = async function (event) {
+  var { type, url } = event.data
+
+  const result = await validator(type, url)
+
+  postMessage({ type, url, result })
+}

components/realtime/mqtt.vue

@@ -70,12 +70,13 @@
 
 <script>
 import Paho from "paho-mqtt"
-import { wsValid } from "~/helpers/utils/valid"
+import debounce from "~/helpers/utils/debounce"
 
 export default {
   data() {
     return {
       url: "wss://test.mosquitto.org:8081",
+      isUrlValid: true,
       client: null,
       pub_topic: "",
       sub_topic: "",
@@ -86,9 +87,23 @@ export default {
       subscriptionState: false,
     }
   },
+  mounted() {
+    if (process.browser) {
+      this.worker = this.$worker.createRejexWorker()
+      this.worker.addEventListener("message", this.workerResponseHandler)
+    }
+  },
+  destroyed() {
+    this.worker.terminate()
+  },
+  watch: {
+    url(val) {
+      this.debouncer()
+    },
+  },
   computed: {
     validUrl() {
-      return wsValid(this.url)
+      return this.isUrlValid
     },
     canpublish() {
       return this.pub_topic != "" && this.msg != "" && this.connectionState
@@ -98,6 +113,12 @@ export default {
     },
   },
   methods: {
+    debouncer: debounce(function () {
+      this.worker.postMessage({ type: "ws", url: this.url })
+    }, 1000),
+    workerResponseHandler(message) {
+      if (message.data.url === this.url) this.isUrlValid = message.data.result
+    },
     connect() {
       this.log = [
         {

components/realtime/socketio.vue

@@ -105,10 +105,10 @@
 </template>
 
 <script>
-import { socketioValid } from "~/helpers/utils/valid"
 import io from "socket.io-client"
 import wildcard from "socketio-wildcard"
 import deleteIcon from "~/static/icons/delete-24px.svg?inline"
+import debounce from "~/helpers/utils/debounce"
 
 export default {
   components: {
@@ -118,6 +118,7 @@ export default {
     return {
       url: "wss://main-daxrc78qyb411dls-gtw.qovery.io",
       path: "/socket.io",
+      isUrlValid: true,
       connectionState: false,
       io: null,
       communication: {
@@ -127,12 +128,32 @@ export default {
       },
     }
   },
+  mounted() {
+    if (process.browser) {
+      this.worker = this.$worker.createRejexWorker()
+      this.worker.addEventListener("message", this.workerResponseHandler)
+    }
+  },
+  destroyed() {
+    this.worker.terminate()
+  },
   computed: {
     urlValid() {
-      return socketioValid(this.url)
+      return this.isUrlValid
+    },
+  },
+  watch: {
+    url(val) {
+      this.debouncer()
     },
   },
   methods: {
+    debouncer: debounce(function () {
+      this.worker.postMessage({ type: "socketio", url: this.url })
+    }, 1000),
+    workerResponseHandler(message) {
+      if (message.data.url === this.url) this.isUrlValid = message.data.result
+    },
     removeCommunicationInput({ index }) {
       this.$delete(this.communication.inputs, index)
     },

components/realtime/sse.vue

@@ -40,13 +40,14 @@
 </template>
 
 <script>
-import { httpValid } from "~/helpers/utils/valid"
+import debounce from "~/helpers/utils/debounce"
 
 export default {
   data() {
     return {
       connectionSSEState: false,
       server: "https://express-eventsource.herokuapp.com/events",
+      isUrlValid: true,
       sse: null,
       events: {
         log: null,
@@ -54,12 +55,32 @@ export default {
       },
     }
   },
+  watch: {
+    server(val) {
+      this.debouncer()
+    },
+  },
+  mounted() {
+    if (process.browser) {
+      this.worker = this.$worker.createRejexWorker()
+      this.worker.addEventListener("message", this.workerResponseHandler)
+    }
+  },
+  destroyed() {
+    this.worker.terminate()
+  },
   computed: {
     serverValid() {
-      return httpValid(this.server)
+      return this.isUrlValid
     },
   },
   methods: {
+    debouncer: debounce(function () {
+      this.worker.postMessage({ type: "sse", url: this.server })
+    }, 1000),
+    workerResponseHandler(message) {
+      if (message.data.url === this.url) this.isUrlValid = message.data.result
+    },
     toggleSSEConnection() {
       // If it is connecting:
       if (!this.connectionSSEState) return this.start()

components/realtime/websocket.vue

@@ -66,13 +66,14 @@
 </template>
 
 <script>
-import { wsValid } from "~/helpers/utils/valid"
+import debounce from "~/helpers/utils/debounce"
 
 export default {
   data() {
     return {
       connectionState: false,
       url: "wss://echo.websocket.org",
+      isUrlValid: true,
       socket: null,
       communication: {
         log: null,
@@ -81,12 +82,32 @@ export default {
       currentIndex: -1, //index of the message log array to put in input box
     }
   },
+  mounted() {
+    if (process.browser) {
+      this.worker = this.$worker.createRejexWorker()
+      this.worker.addEventListener("message", this.workerResponseHandler)
+    }
+  },
+  destroyed() {
+    this.worker.terminate()
+  },
   computed: {
     urlValid() {
-      return wsValid(this.url)
+      return this.isUrlValid
+    },
+  },
+  watch: {
+    url(val) {
+      this.debouncer()
     },
   },
   methods: {
+    debouncer: debounce(function () {
+      this.worker.postMessage({ type: "ws", url: this.url })
+    }, 1000),
+    workerResponseHandler(message) {
+      if (message.data.url === this.url) this.isUrlValid = message.data.result
+    },
     toggleConnection() {
       // If it is connecting:
       if (!this.connectionState) return this.connect()

nuxt.config.js

@@ -89,7 +89,11 @@ export default {
   css: ["~/assets/scss/styles.scss", "~/assets/scss/themes.scss", "~/assets/scss/fonts.scss"],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-  plugins: ["~/plugins/vuex-persist", "~/plugins/v-tooltip"],
+  plugins: [
+    "~/plugins/vuex-persist",
+    "~/plugins/v-tooltip",
+    { src: "~/plugins/web-worker", ssr: false },
+  ],
 
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,
@@ -312,6 +316,14 @@ export default {
       config.node = {
         fs: "empty",
       }
+
+      if (ctx.isClient) {
+        config.module.rules.unshift({
+          test: /\.worker\.(c|m)?js$/i,
+          use: { loader: "worker-loader" },
+          exclude: /(node_modules)/,
+        })
+      }
     },
     parallel: true,
     cache: true,

package-lock.json

@@ -17700,6 +17700,58 @@
         "errno": "~0.1.7"
       }
     },
+    "worker-loader": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-3.0.5.tgz",
+      "integrity": "sha512-cOh4UqTtvT8eHpyuuTK2C66Fg/G5Pb7g11bwtKm7uyD0vj2hCGY1APlSzVD75V9ciYZt44VPbFPiSFTSLxkQ+w==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "@types/json-schema": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
+          "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
+          "dev": true
+        },
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",

package.json

@@ -69,7 +69,8 @@
     "pretty-quick": "^3.1.0",
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
-    "vue-jest": "^3.0.7"
+    "vue-jest": "^3.0.7",
+    "worker-loader": "^3.0.5"
   },
   "jest": {
     "moduleFileExtensions": [

plugins/web-worker.js

@@ -0,0 +1,9 @@
+import RegexWorker from "~/assets/js/regex.worker"
+
+export default (context, inject) => {
+  inject("worker", {
+    createRejexWorker() {
+      return new RegexWorker()
+    },
+  })
+}