useBroadcastChannel

Demo

Supported:

Please open this page in at least two tabs

Aww, snap! The Broadcast Channel Web API is not supported in your browser.

Usage

The BroadcastChannel interface represents a named channel that any browsing context of a given origin can subscribe to. It allows communication between different documents (in different windows, tabs, frames, or iframes) of the same origin.

Messages are broadcasted via a message event fired at all BroadcastChannel objects listening to the channel.

import { ref } from 'vue-demi'
import { useBroadcastChannel } from '@vueuse/core'

const {
  isSupported,
  channel,
  post,
  close,
  error,
  isClosed,
} = useBroadcastChannel({ name: 'vueuse-demo-channel' })

const message = ref('')

message.value = 'Hello, VueUse World!'

// Post the message to the broadcast channel:
post(message.value)

// Option to close the channel if you wish:
close()

import { ref } from 'vue-demi'
import { useBroadcastChannel } from '@vueuse/core'

const {
  isSupported,
  channel,
  post,
  close,
  error,
  isClosed,
} = useBroadcastChannel({ name: 'vueuse-demo-channel' })

const message = ref('')

message.value = 'Hello, VueUse World!'

// Post the message to the broadcast channel:
post(message.value)

// Option to close the channel if you wish:
close()

Type Declarations

Show Type Declarations

export interface UseBroadcastChannelOptions extends ConfigurableWindow {
  /**
   * The name of the channel.
   */
  name: string
}
/**
 * Reactive BroadcastChannel
 *
 * @see https://vueuse.org/useBroadcastChannel
 * @see https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
 * @param options
 *
 */
export declare const useBroadcastChannel: (
  options: UseBroadcastChannelOptions
) => {
  isSupported: boolean | undefined
  channel: Ref<BroadcastChannel | undefined>
  data: Ref<any>
  post: (data: unknown) => void
  close: () => void
  error: Ref<{
    readonly bubbles: boolean
    cancelBubble: boolean
    readonly cancelable: boolean
    readonly composed: boolean
    readonly currentTarget: {
      addEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | AddEventListenerOptions | undefined
      ) => void
      dispatchEvent: (event: Event) => boolean
      removeEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | EventListenerOptions | undefined
      ) => void
    } | null
    readonly defaultPrevented: boolean
    readonly eventPhase: number
    readonly isTrusted: boolean
    returnValue: boolean
    readonly srcElement: {
      addEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | AddEventListenerOptions | undefined
      ) => void
      dispatchEvent: (event: Event) => boolean
      removeEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | EventListenerOptions | undefined
      ) => void
    } | null
    readonly target: {
      addEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | AddEventListenerOptions | undefined
      ) => void
      dispatchEvent: (event: Event) => boolean
      removeEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | EventListenerOptions | undefined
      ) => void
    } | null
    readonly timeStamp: number
    readonly type: string
    composedPath: () => EventTarget[]
    initEvent: (
      type: string,
      bubbles?: boolean | undefined,
      cancelable?: boolean | undefined
    ) => void
    preventDefault: () => void
    stopImmediatePropagation: () => void
    stopPropagation: () => void
    readonly AT_TARGET: number
    readonly BUBBLING_PHASE: number
    readonly CAPTURING_PHASE: number
    readonly NONE: number
  } | null>
  isClosed: Ref<boolean>
}
export declare type UseBroadcastChannelReturn = ReturnType<
  typeof useBroadcastChannel
>

export interface UseBroadcastChannelOptions extends ConfigurableWindow {
  /**
   * The name of the channel.
   */
  name: string
}
/**
 * Reactive BroadcastChannel
 *
 * @see https://vueuse.org/useBroadcastChannel
 * @see https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
 * @param options
 *
 */
export declare const useBroadcastChannel: (
  options: UseBroadcastChannelOptions
) => {
  isSupported: boolean | undefined
  channel: Ref<BroadcastChannel | undefined>
  data: Ref<any>
  post: (data: unknown) => void
  close: () => void
  error: Ref<{
    readonly bubbles: boolean
    cancelBubble: boolean
    readonly cancelable: boolean
    readonly composed: boolean
    readonly currentTarget: {
      addEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | AddEventListenerOptions | undefined
      ) => void
      dispatchEvent: (event: Event) => boolean
      removeEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | EventListenerOptions | undefined
      ) => void
    } | null
    readonly defaultPrevented: boolean
    readonly eventPhase: number
    readonly isTrusted: boolean
    returnValue: boolean
    readonly srcElement: {
      addEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | AddEventListenerOptions | undefined
      ) => void
      dispatchEvent: (event: Event) => boolean
      removeEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | EventListenerOptions | undefined
      ) => void
    } | null
    readonly target: {
      addEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | AddEventListenerOptions | undefined
      ) => void
      dispatchEvent: (event: Event) => boolean
      removeEventListener: (
        type: string,
        callback: EventListenerOrEventListenerObject | null,
        options?: boolean | EventListenerOptions | undefined
      ) => void
    } | null
    readonly timeStamp: number
    readonly type: string
    composedPath: () => EventTarget[]
    initEvent: (
      type: string,
      bubbles?: boolean | undefined,
      cancelable?: boolean | undefined
    ) => void
    preventDefault: () => void
    stopImmediatePropagation: () => void
    stopPropagation: () => void
    readonly AT_TARGET: number
    readonly BUBBLING_PHASE: number
    readonly CAPTURING_PHASE: number
    readonly NONE: number
  } | null>
  isClosed: Ref<boolean>
}
export declare type UseBroadcastChannelReturn = ReturnType<
  typeof useBroadcastChannel
>