⬅️ Back to Table of Contents

📄 useBroadcastChannel

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	9
📐 Interfaces	2

📚 Table of Contents

• Imports
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useBroadcastChannel/index.ts

📦 Imports

Name	Source
ShallowRef	vue
ConfigurableWindow	../_configurable
Supportable	../types
tryOnMounted	@vueuse/shared
tryOnScopeDispose	@vueuse/shared
shallowRef	vue
defaultWindow	../_configurable
useEventListener	../useEventListener
useSupported	../useSupported

---

Functions

useBroadcastChannel(options: UseBroadcastChannelOptions): UseBroadcastChannelReturn<D, P>

Reactive BroadcastChannel

Parameters:

• options any: No description

See: https://vueuse.org/useBroadcastChannel, https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel

Raw JSDoc

/**
 * Reactive BroadcastChannel
 *
 * @see https://vueuse.org/useBroadcastChannel
 * @see https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
 * @param options
 *
 */

Calls:

• useSupported (from ../useSupported)
• shallowRef (from vue)
• channel.value.postMessage
• channel.value.close
• tryOnMounted (from @vueuse/shared)
• useEventListener (from ../useEventListener)
• tryOnScopeDispose (from @vueuse/shared)
• close

Code

export function useBroadcastChannel<D, P>(options: UseBroadcastChannelOptions): UseBroadcastChannelReturn<D, P> {
  const {
    name,
    window = defaultWindow,
  } = options

  const isSupported = useSupported(() => window && 'BroadcastChannel' in window)
  const isClosed = shallowRef(false)

  const channel = shallowRef<BroadcastChannel | undefined>()
  const data = shallowRef()
  const error = shallowRef<Event | null>(null)

  const post = (data: unknown) => {
    if (channel.value)
      channel.value.postMessage(data)
  }

  const close = () => {
    if (channel.value)
      channel.value.close()
    isClosed.value = true
  }

  if (isSupported.value) {
    tryOnMounted(() => {
      error.value = null
      channel.value = new BroadcastChannel(name)

      const listenerOptions = {
        passive: true,
      }

      useEventListener(channel, 'message', (e: MessageEvent) => {
        data.value = e.data
      }, listenerOptions)

      useEventListener(channel, 'messageerror', (e: MessageEvent) => {
        error.value = e
      }, listenerOptions)

      useEventListener(channel, 'close', () => {
        isClosed.value = true
      }, listenerOptions)
    })
  }

  tryOnScopeDispose(() => {
    close()
  })

  return {
    isSupported,
    channel,
    data,
    post,
    close,
    error,
    isClosed,
  }
}

Internal helpers

Declared inside another function in this file.

post(data: unknown): void

Parameters:

• data unknown

Returns: void

Calls:

• channel.value.postMessage

Code

(data: unknown) => {
    if (channel.value)
      channel.value.postMessage(data)
  }

close(): void

Returns: void

Calls:

• channel.value.close

Code

() => {
    if (channel.value)
      channel.value.close()
    isClosed.value = true
  }

---

Interfaces

UseBroadcastChannelOptions

Interface Code

export interface UseBroadcastChannelOptions extends ConfigurableWindow {
  /**
   * The name of the channel.
   */
  name: string
}

Properties

Name	Type	Optional	Description
name	string	✗	not shown

UseBroadcastChannelReturn<D, P>

Interface Code

export interface UseBroadcastChannelReturn<D, P> extends Supportable {
  channel: ShallowRef<BroadcastChannel | undefined>
  data: ShallowRef<D>
  post: (data: P) => void
  close: () => void
  error: ShallowRef<Event | null>
  isClosed: ShallowRef<boolean>
}

Properties

Name	Type	Optional	Description
channel	ShallowRef<BroadcastChannel \| undefined>	✗	not shown
data	ShallowRef<D>	✗	not shown
post	(data: P) => void	✗	not shown
close	() => void	✗	not shown
error	ShallowRef<Event \| null>	✗	not shown
isClosed	ShallowRef<boolean>	✗	not shown

---

Generated by Syntax Scribe