feat(useWebsocket): support ref or getter as message (#4116)

SnowGuest · antfu · web-flow · commit a72c02e3bef6 · 2024-12-22T12:23:37.000+08:00
Co-authored-by: Anthony Fu &lt;anthonyfu117@hotmail.com&gt;
Co-authored-by: Anthony Fu &lt;github@antfu.me&gt;
diff --git a/packages/core/useWebSocket/index.ts b/packages/core/useWebSocket/index.ts
@@ -1,10 +1,11 @@
 import type { Fn, MaybeRefOrGetter } from '@vueuse/shared'
 import type { Ref } from 'vue'
-import { isClient, isWorker, toRef, tryOnScopeDispose, useIntervalFn } from '@vueuse/shared'
+import { isClient, isWorker, toRef, toValue, tryOnScopeDispose, useIntervalFn } from '@vueuse/shared'
 import { ref, watch } from 'vue'
 import { useEventListener } from '../useEventListener'
 
 export type WebSocketStatus = 'OPEN' | 'CONNECTING' | 'CLOSED'
+export type WebSocketHeartbeatMessage = string | ArrayBuffer | Blob
 
 const DEFAULT_PING_MESSAGE = 'ping'
 
@@ -25,12 +26,12 @@ export interface UseWebSocketOptions {
      *
      * @default 'ping'
      */
-    message?: string | ArrayBuffer | Blob
+    message?: MaybeRefOrGetter<WebSocketHeartbeatMessage>
 
     /**
      * Response message for the heartbeat, if undefined the message will be used
      */
-    responseMessage?: string | ArrayBuffer | Blob
+    responseMessage?: MaybeRefOrGetter<WebSocketHeartbeatMessage>
 
     /**
      * Interval, in milliseconds
@@ -262,7 +263,7 @@ export function useWebSocket<Data = any>(
           message = DEFAULT_PING_MESSAGE,
           responseMessage = message,
         } = resolveNestedOptions(options.heartbeat)
-        if (e.data === responseMessage)
+        if (e.data === toValue(responseMessage))
           return
       }
 
@@ -280,7 +281,7 @@ export function useWebSocket<Data = any>(
 
     const { pause, resume } = useIntervalFn(
       () => {
-        send(message, false)
+        send(toValue(message), false)
         if (pongTimeoutWait != null)
           return
         pongTimeoutWait = setTimeout(() => {
