From d5006ac5206b0d66bf7367ae657c8786e244001b Mon Sep 17 00:00:00 2001 From: Dan Rose Date: Wed, 26 Oct 2022 13:16:42 -0500 Subject: [PATCH 1/3] Allow url to be a ref and react to changes --- packages/core/useWebSocket/index.ts | 65 +++++++++++++++-------------- 1 file changed, 33 insertions(+), 32 deletions(-) diff --git a/packages/core/useWebSocket/index.ts b/packages/core/useWebSocket/index.ts index 48e68da7d12..289399ef57f 100644 --- a/packages/core/useWebSocket/index.ts +++ b/packages/core/useWebSocket/index.ts @@ -1,7 +1,7 @@ import type { Ref } from 'vue-demi' -import { ref } from 'vue-demi' -import type { Fn } from '@vueuse/shared' -import { tryOnScopeDispose, useIntervalFn } from '@vueuse/shared' +import { ref, watch } from 'vue-demi' +import type { Fn, MaybeComputedRef } from '@vueuse/shared' +import { resolveRef, tryOnScopeDispose, useIntervalFn } from '@vueuse/shared' import { useEventListener } from '../useEventListener' export type WebSocketStatus = 'OPEN' | 'CONNECTING' | 'CLOSED' @@ -21,24 +21,24 @@ export interface UseWebSocketOptions { */ heartbeat?: boolean | { /** - * Message for the heartbeat - * - * @default 'ping' - */ + * Message for the heartbeat + * + * @default 'ping' + */ message?: string | ArrayBuffer | Blob /** - * Interval, in milliseconds - * - * @default 1000 - */ + * Interval, in milliseconds + * + * @default 1000 + */ interval?: number /** - * Heartbeat response timeout, in milliseconds - * - * @default 1000 - */ + * Heartbeat response timeout, in milliseconds + * + * @default 1000 + */ pongTimeout?: number } @@ -49,24 +49,24 @@ export interface UseWebSocketOptions { */ autoReconnect?: boolean | { /** - * Maximum retry times. - * - * Or you can pass a predicate function (which returns true if you want to retry). - * - * @default -1 - */ + * Maximum retry times. + * + * Or you can pass a predicate function (which returns true if you want to retry). + * + * @default -1 + */ retries?: number | (() => boolean) /** - * Delay for reconnect, in milliseconds - * - * @default 1000 - */ + * Delay for reconnect, in milliseconds + * + * @default 1000 + */ delay?: number /** - * On maximum retry times reached. - */ + * On maximum retry times reached. + */ onFailed?: Fn } @@ -143,7 +143,7 @@ function resolveNestedOptions(options: T | true): T { * @param url */ export function useWebSocket( - url: string, + url: MaybeComputedRef, options: UseWebSocketOptions = {}, ): UseWebSocketReturn { const { @@ -159,6 +159,7 @@ export function useWebSocket( const data: Ref = ref(null) const status = ref('CLOSED') const wsRef = ref() + const urlRef = resolveRef(url) let heartbeatPause: Fn | undefined let heartbeatResume: Fn | undefined @@ -206,7 +207,7 @@ export function useWebSocket( if (explicitlyClosed) return - const ws = new WebSocket(url, protocols) + const ws = new WebSocket(urlRef.value, protocols) wsRef.value = ws status.value = 'CONNECTING' @@ -281,9 +282,6 @@ export function useWebSocket( heartbeatResume = resume } - if (immediate) - _init() - if (autoClose) { useEventListener(window, 'beforeunload', () => close()) tryOnScopeDispose(close) @@ -296,6 +294,9 @@ export function useWebSocket( _init() } + if (immediate) + watch(urlRef, open, { immediate: true }) + return { data, status, From 41ce3a97395baabb9ef000aee0efcf68e12993de Mon Sep 17 00:00:00 2001 From: Dan Rose Date: Wed, 26 Oct 2022 13:16:42 -0500 Subject: [PATCH 2/3] Allow url to be a ref and respond to changes --- packages/core/useWebSocket/index.md | 2 + packages/core/useWebSocket/index.ts | 65 +++++++++++++++-------------- 2 files changed, 35 insertions(+), 32 deletions(-) diff --git a/packages/core/useWebSocket/index.md b/packages/core/useWebSocket/index.md index 4fa9c1b9c11..fa6e16fc70b 100644 --- a/packages/core/useWebSocket/index.md +++ b/packages/core/useWebSocket/index.md @@ -22,6 +22,8 @@ Auto-connect (enabled by default). This will call `open()` automatically for you and you don't need to call it by yourself. +If url is provided as a ref, this also controls whether a connection is re-established when its value is changed (or whether you need to call open() again for the change to take effect). + ### Auto-close Auto-close-connection (enabled by default). diff --git a/packages/core/useWebSocket/index.ts b/packages/core/useWebSocket/index.ts index 48e68da7d12..289399ef57f 100644 --- a/packages/core/useWebSocket/index.ts +++ b/packages/core/useWebSocket/index.ts @@ -1,7 +1,7 @@ import type { Ref } from 'vue-demi' -import { ref } from 'vue-demi' -import type { Fn } from '@vueuse/shared' -import { tryOnScopeDispose, useIntervalFn } from '@vueuse/shared' +import { ref, watch } from 'vue-demi' +import type { Fn, MaybeComputedRef } from '@vueuse/shared' +import { resolveRef, tryOnScopeDispose, useIntervalFn } from '@vueuse/shared' import { useEventListener } from '../useEventListener' export type WebSocketStatus = 'OPEN' | 'CONNECTING' | 'CLOSED' @@ -21,24 +21,24 @@ export interface UseWebSocketOptions { */ heartbeat?: boolean | { /** - * Message for the heartbeat - * - * @default 'ping' - */ + * Message for the heartbeat + * + * @default 'ping' + */ message?: string | ArrayBuffer | Blob /** - * Interval, in milliseconds - * - * @default 1000 - */ + * Interval, in milliseconds + * + * @default 1000 + */ interval?: number /** - * Heartbeat response timeout, in milliseconds - * - * @default 1000 - */ + * Heartbeat response timeout, in milliseconds + * + * @default 1000 + */ pongTimeout?: number } @@ -49,24 +49,24 @@ export interface UseWebSocketOptions { */ autoReconnect?: boolean | { /** - * Maximum retry times. - * - * Or you can pass a predicate function (which returns true if you want to retry). - * - * @default -1 - */ + * Maximum retry times. + * + * Or you can pass a predicate function (which returns true if you want to retry). + * + * @default -1 + */ retries?: number | (() => boolean) /** - * Delay for reconnect, in milliseconds - * - * @default 1000 - */ + * Delay for reconnect, in milliseconds + * + * @default 1000 + */ delay?: number /** - * On maximum retry times reached. - */ + * On maximum retry times reached. + */ onFailed?: Fn } @@ -143,7 +143,7 @@ function resolveNestedOptions(options: T | true): T { * @param url */ export function useWebSocket( - url: string, + url: MaybeComputedRef, options: UseWebSocketOptions = {}, ): UseWebSocketReturn { const { @@ -159,6 +159,7 @@ export function useWebSocket( const data: Ref = ref(null) const status = ref('CLOSED') const wsRef = ref() + const urlRef = resolveRef(url) let heartbeatPause: Fn | undefined let heartbeatResume: Fn | undefined @@ -206,7 +207,7 @@ export function useWebSocket( if (explicitlyClosed) return - const ws = new WebSocket(url, protocols) + const ws = new WebSocket(urlRef.value, protocols) wsRef.value = ws status.value = 'CONNECTING' @@ -281,9 +282,6 @@ export function useWebSocket( heartbeatResume = resume } - if (immediate) - _init() - if (autoClose) { useEventListener(window, 'beforeunload', () => close()) tryOnScopeDispose(close) @@ -296,6 +294,9 @@ export function useWebSocket( _init() } + if (immediate) + watch(urlRef, open, { immediate: true }) + return { data, status, From e46a02beb0914a96b2ab7472032df55d0c975ea3 Mon Sep 17 00:00:00 2001 From: Dan Rose Date: Wed, 26 Oct 2022 15:09:47 -0500 Subject: [PATCH 3/3] undo accidental formatting changes --- packages/core/useWebSocket/index.ts | 48 ++++++++++++++--------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/core/useWebSocket/index.ts b/packages/core/useWebSocket/index.ts index 289399ef57f..a79459db79a 100644 --- a/packages/core/useWebSocket/index.ts +++ b/packages/core/useWebSocket/index.ts @@ -21,24 +21,24 @@ export interface UseWebSocketOptions { */ heartbeat?: boolean | { /** - * Message for the heartbeat - * - * @default 'ping' - */ + * Message for the heartbeat + * + * @default 'ping' + */ message?: string | ArrayBuffer | Blob /** - * Interval, in milliseconds - * - * @default 1000 - */ + * Interval, in milliseconds + * + * @default 1000 + */ interval?: number /** - * Heartbeat response timeout, in milliseconds - * - * @default 1000 - */ + * Heartbeat response timeout, in milliseconds + * + * @default 1000 + */ pongTimeout?: number } @@ -49,24 +49,24 @@ export interface UseWebSocketOptions { */ autoReconnect?: boolean | { /** - * Maximum retry times. - * - * Or you can pass a predicate function (which returns true if you want to retry). - * - * @default -1 - */ + * Maximum retry times. + * + * Or you can pass a predicate function (which returns true if you want to retry). + * + * @default -1 + */ retries?: number | (() => boolean) /** - * Delay for reconnect, in milliseconds - * - * @default 1000 - */ + * Delay for reconnect, in milliseconds + * + * @default 1000 + */ delay?: number /** - * On maximum retry times reached. - */ + * On maximum retry times reached. + */ onFailed?: Fn }