fix: lost socket reactivity (#2214)

Signed-off-by: Fernando Fernández <[email protected]>

frontend/src/composables/apis.ts

@@ -11,7 +11,7 @@ import { network } from '@/store';
 import { apiStore } from '@/store/api';
 import { isArray, isNil } from '@/utils/validation';
 
-/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-return */
 type OmittedKeys = 'fields' | 'userId' | 'enableImages' | 'enableTotalRecordCount' | 'enableImageTypes';
 type ParametersAsGetters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any
   ? { [K in keyof P]: () => BetterOmit<Mutable<P[K]>, OmittedKeys> }
@@ -274,7 +274,7 @@ function _sharedInternalLogic<T extends Record<K, (...args: any[]) => any>, K ex
           await runNormally();
         }
       });
-      watch(() => remote.socket.isConnected, runWithRetry);
+      watch(remote.socket.isConnected, runWithRetry);
       watch(network.isOnline, runWithRetry);
       isRef(api) && watch(api, runNormally);
       isRef(methodName) && watch(methodName, runNormally);
@@ -448,4 +448,4 @@ export function methodsAsObject<T extends Record<K, (...args: any[]) => any>, K
   };
 }
 
-/* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access */
+/* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-return */

frontend/src/plugins/remote/socket/index.ts

@@ -7,7 +7,9 @@ import type { WebSocketMessage } from './types';
 import { isNil } from '@/utils/validation';
 
 class RemotePluginSocket {
-  private _internalMessage: WebSocketMessage | undefined = undefined;
+  /**
+   * == STATE ==
+   */
   private readonly _socketUrl = computed(() => {
     if (
       auth.currentUserToken &&
@@ -26,9 +28,30 @@ class RemotePluginSocket {
     }
   });
   private readonly _keepAliveMessage = 'KeepAlive';
+  private readonly _forceKeepAliveMessage = 'ForceKeepAlive';
   /**
    * Formats the message to be sent to the socket
    */
+  private readonly _webSocket = useWebSocket(this._socketUrl, {
+    heartbeat: false,
+    autoReconnect: { retries: () => true },
+    immediate: true,
+    autoClose: false
+  });
+  private readonly _parsedmsg = computed<WebSocketMessage | undefined>(() => destr(this._webSocket.data.value));
+  public readonly message = computed<WebSocketMessage | undefined>((previous) => {
+    if (this._parsedmsg.value?.MessageType === this._keepAliveMessage ||
+      this._parsedmsg.value?.MessageType === this._forceKeepAliveMessage) {
+      return previous;
+    }
+
+    return this._parsedmsg.value;
+  });
+  public readonly isConnected = computed(() => this._webSocket.status.value === 'OPEN');
+
+  /**
+   * == METHODS ==
+   */
   private readonly _formatSocketMessage = (
     name: string,
     data?: WebSocketMessage['Data']
@@ -41,20 +64,6 @@ class RemotePluginSocket {
 
     return JSON.stringify(message);
   };
-  private readonly _webSocket = useWebSocket(this._socketUrl, {
-    heartbeat: false,
-    autoReconnect: { retries: () => true },
-    immediate: true,
-    autoClose: false
-  });
-
-  public get isConnected(): boolean {
-    return this._webSocket.status.value === 'OPEN';
-  }
-
-  public get message(): WebSocketMessage | undefined {
-    return this._internalMessage;
-  }
 
   /**
    * Send message to socket
@@ -72,13 +81,9 @@ class RemotePluginSocket {
      * Sending updates through this watcher to avoid sending KeepAlive messages to consumers of
      * of this plugin
      */
-    watch(this._webSocket.data, () => {
-      const message = destr<WebSocketMessage | undefined>(this._webSocket.data.value);
-
-      if (message?.MessageType === 'ForceKeepAlive') {
+    watch(this._parsedmsg, () => {
+      if (this._parsedmsg.value?.MessageType === this._forceKeepAliveMessage) {
         this.sendToSocket(this._keepAliveMessage);
-      } else if (message?.MessageType !== this._keepAliveMessage) {
-        this._internalMessage = message;
       }
     }, { flush: 'sync' }
     );

frontend/src/store/api.ts

@@ -161,13 +161,13 @@ class ApiStore {
 
   public constructor() {
     watch(
-      () => remote.socket.message,
+      remote.socket.message,
       async () => {
-        if (!remote.socket.message) {
+        if (!remote.socket.message.value) {
           return;
         }
 
-        const { MessageType, Data } = remote.socket.message;
+        const { MessageType, Data } = remote.socket.message.value;
 
         if (!Data || !isObj(Data)) {
           return;

frontend/src/store/taskManager.ts

@@ -181,13 +181,13 @@ class TaskManagerStore {
     };
 
     watch(
-      () => remote.socket.message,
+      remote.socket.message,
       () => {
-        if (!remote.socket.message) {
+        if (!remote.socket.message.value) {
           return;
         }
 
-        const { MessageType, Data } = remote.socket.message;
+        const { MessageType, Data } = remote.socket.message.value;
 
         if (!Data || !isObj(Data)) {
           return;

frontend/src/utils/items.ts

@@ -582,8 +582,8 @@ export async function ensureWebSocket(): Promise<void> {
 
   await new Promise<void>((resolve) => {
     scope.run(() => {
-      watch(() => remote.socket.isConnected, () => {
-        if (remote.socket.isConnected) {
+      watch(remote.socket.isConnected, () => {
+        if (remote.socket.isConnected.value) {
           resolve();
         }
       }, { immediate: true, flush: 'sync' });

frontend/types/global/util.d.ts

@@ -2,7 +2,7 @@
  * BetterOmit still provides IntelliSense fedback, unlike the built-in Omit type.
  * See https://github.com/microsoft/TypeScript/issues/56135
  */
-type BetterOmit<T, K extends keyof any> = T extends Record<any, any>
+type BetterOmit<T, K extends keyof never> = T extends Record<never, never>
   ? {
       [P in keyof T as P extends K ? never : P]: T[P]
     }