Web Worker regex test (#1354)

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

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()