fix: websocket ref watch source warning

Author: NelsonYong

packages/hooks/src/useWebSocket/demo/demo.vue

@@ -41,7 +41,7 @@
   const { readyState, sendMessage, latestMessage, disconnect, connect } = useWebSocket(
     'wss://demo.piesocket.com/v3/channel_1?api_key=VCXCEuvhGcBDP7XhiJJUDvR1e1D3eiVjgZ9VRiaV&notify_self',
   )
-  const messageHistory = computed(() => latestMessage?.value)
+  const messageHistory = computed(() => latestMessage.value)
 
   const messageList = ref<any[]>([])
 

packages/hooks/src/useWebSocket/index.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import { watch, ref, Ref, onUnmounted, unref } from 'vue'
+import { watch, ref, Ref, onUnmounted, unref, isRef } from 'vue'
 
 export enum ReadyState {
   Connecting = 0,
@@ -21,7 +21,7 @@ export interface UseWebSocketOptions {
 }
 
 export interface UseWebSocketResult {
-  latestMessage?: Ref<WebSocketEventMap['message']>
+  latestMessage: Ref<WebSocketEventMap['message'] | undefined>
   sendMessage?: WebSocket['send']
   disconnect?: () => void
   connect?: () => void
@@ -144,18 +144,36 @@ export default function useWebSocket(
     websocketRef.value?.close()
   }
 
-  watch(
-    [socketUrl, manual],
-    c => {
-      const [_, manualWatch] = c
-      if (!manualWatch) {
-        connect()
-      }
-    },
-    {
-      immediate: true,
-    },
-  )
+  if (isRef(socketUrl) && isRef(manual))
+    watch(
+      [socketUrl, manual],
+      c => {
+        const [_, manualWatch] = c
+        if (!manualWatch) {
+          connect()
+        }
+      },
+      {
+        immediate: true,
+      },
+    )
+  else if (isRef(manual)) {
+    watch(
+      manual,
+      manualWatch => {
+        if (!manualWatch) {
+          connect()
+        }
+      },
+      {
+        immediate: true,
+      },
+    )
+  } else {
+    if (!manual) {
+      connect()
+    }
+  }
 
   onUnmounted(() => {
     unmountedRef.value = true