realtime persistence. (#1952)

* feat: websocket persistence

* feat: socketio persistence

* feat: sse persistence

* feat: mqtt persistence

* fix: added types

* fix: typescript issues

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -89,7 +89,7 @@
           class="hide-scrollbar !overflow-auto"
         >
           <AppSection label="response">
-            <RealtimeLog :title="$t('socketio.log')" :log="communication.log" />
+            <RealtimeLog :title="$t('socketio.log')" :log="log" />
           </AppSection>
         </Pane>
       </Splitpanes>
@@ -188,6 +188,24 @@ import debounce from "lodash/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
 import useWindowSize from "~/helpers/utils/useWindowSize"
+import {
+  SIOEndpoint$,
+  setSIOEndpoint,
+  SIOVersion$,
+  setSIOVersion,
+  SIOPath$,
+  setSIOPath,
+  SIOConnectionState$,
+  SIOConnectingState$,
+  setSIOConnectionState,
+  setSIOConnectingState,
+  SIOSocket$,
+  setSIOSocket,
+  SIOLog$,
+  setSIOLog,
+  addSIOLogLine,
+} from "~/newstore/SocketIOSession"
+import { useStream } from "~/helpers/utils/composables"
 
 const socketIoClients = {
   v4: ClientV4,
@@ -204,20 +222,27 @@ export default defineComponent({
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
       socketIoClients,
+      url: useStream(SIOEndpoint$, "", setSIOEndpoint),
+      clientVersion: useStream(SIOVersion$, "", setSIOVersion),
+      path: useStream(SIOPath$, "", setSIOPath),
+      connectingState: useStream(
+        SIOConnectingState$,
+        false,
+        setSIOConnectingState
+      ),
+      connectionState: useStream(
+        SIOConnectionState$,
+        false,
+        setSIOConnectionState
+      ),
+      io: useStream(SIOSocket$, null, setSIOSocket),
+      log: useStream(SIOLog$, [], setSIOLog),
     }
   },
   data() {
     return {
-      // default version is set to v4
-      clientVersion: "v4",
-      url: "wss://hoppscotch-socketio.herokuapp.com",
-      path: "/socket.io",
       isUrlValid: true,
-      connectingState: false,
-      connectionState: false,
-      io: null,
       communication: {
-        log: null,
         eventName: "",
         inputs: [""],
       },
@@ -267,7 +292,7 @@ export default defineComponent({
     },
     connect() {
       this.connectingState = true
-      this.communication.log = [
+      this.log = [
         {
           payload: this.$t("state.connecting_to", { name: this.url }),
           source: "info",
@@ -286,7 +311,7 @@ export default defineComponent({
         this.io.on("connect", () => {
           this.connectingState = false
           this.connectionState = true
-          this.communication.log = [
+          this.log = [
             {
               payload: this.$t("state.connected_to", { name: this.url }),
               source: "info",
@@ -298,7 +323,7 @@ export default defineComponent({
         })
         this.io.on("*", ({ data }) => {
           const [eventName, message] = data
-          this.communication.log.push({
+          addSIOLogLine({
             payload: `[${eventName}] ${message ? JSON.stringify(message) : ""}`,
             source: "server",
             ts: new Date().toLocaleTimeString(),
@@ -316,7 +341,7 @@ export default defineComponent({
         this.io.on("disconnect", () => {
           this.connectingState = false
           this.connectionState = false
-          this.communication.log.push({
+          addSIOLogLine({
             payload: this.$t("state.disconnected_from", { name: this.url }),
             source: "info",
             color: "#ff5555",
@@ -340,14 +365,14 @@ export default defineComponent({
       this.disconnect()
       this.connectingState = false
       this.connectionState = false
-      this.communication.log.push({
+      addSIOLogLine({
         payload: this.$t("error.something_went_wrong"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString(),
       })
       if (error !== null)
-        this.communication.log.push({
+        addSIOLogLine({
           payload: error,
           source: "info",
           color: "#ff5555",
@@ -369,14 +394,14 @@ export default defineComponent({
       if (this.io) {
         this.io.emit(eventName, ...messages, (data) => {
           // receive response from server
-          this.communication.log.push({
+          addSIOLogLine({
             payload: `[${eventName}] ${JSON.stringify(data)}`,
             source: "server",
             ts: new Date().toLocaleTimeString(),
           })
         })
 
-        this.communication.log.push({
+        addSIOLogLine({
           payload: `[${eventName}] ${JSON.stringify(messages)}`,
           source: "client",
           ts: new Date().toLocaleTimeString(),