BroadcastChannel(Experimental)

VERY IMPORTANT: This utility is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Use at your own risk. If you choose to rely on this in production in an experimental stage, please lock your version to a patch-level version to avoid unexpected breakages.

A plugin for useRequest based on broadcast-channel implementation and syncing the state of your useRequest State between browser tabs/windows with the same origin.

Feature

• Act as the intermediate state for all requests, where users can operate on the collected request results.

Install

# It is necessary to ensure that the application contains `broadcast-channel` .

1. npm i broadcast-channel

2. npm i @vue-hooks-plus/use-request-plugins

Demo

Current: loading..

Desc

Channel History:

Same origin cross window communicationOpening the same new window, sending and refreshing data will result in data being transmitted across windows.

复制成功!

<template>
  <div>Current: {{ loading ? 'loading..' : data }}</div>

  <div>
    <vhp-button @click="refresh()">Refresh</vhp-button>
    <div style="margin-top: 8px;">
      <h4>Desc</h4>
      <input v-model="input" />
      <vhp-button style="margin-left: 4px;" @click="submit()">Send</vhp-button>
    </div>
  </div>
  <div>
    <h3>Channel History:</h3>
    <div v-for="(item, index) in other" :key="index">{{ item }}</div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useRequest } from 'vue-hooks-plus'
  import { useBroadcastChannelPlugin } from '@vue-hooks-plus/use-request-plugins'

  function getUsername(params: { desc: string }): Promise<string> {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(`${params.desc}-${String(Date.now())}`)
      }, 1000)
    })
  }

  const other = ref<string[]>([])
  const input = ref('')
  const desc = ref('good')

  const submit = () => {
    desc.value = `send-other-${input.value}`
  }

  const { data, loading, refresh } = useRequest(
    () => getUsername({ desc: desc.value }),
    {
      refreshDeps: true,
      pluginOptions: {
        broadcastChannel: 'nice-broadcastChannel',
        onBroadcastChannel: (message: any, channel: any) => {
          other.value.push(message.data)
        },
      },
    },
    [useBroadcastChannelPlugin],
  )
</script>

<style scoped lang="less"></style>

API

import { useRequest } from 'vue-hooks-plus'
import { useBroadcastChannelPlugin } from '@vue-hooks-plus/use-request-plugins'

useRequest(
  service,
  {
    broadcastChannel?: string
    broadcastChannelKey?: string
    broadcastChannelOptions?: BroadcastChannelOptions
    customPostMessage?: (postMessage: (msg?: any) => Promise<void>, channel?: BroadcastChannel) => void
    onBroadcastChannel?: (value?: MessageType, channel?: BroadcastChannel, setFetchState?: Fetch<any, []>['setFetchState']) => void
  },
  [useBroadcastChannelPlugin],
)

Options

Property	Description	Type
broadcastChannel	Required, the name of the channel, which must be the same as the channel name to receive the same frequency data.	string
broadcastChannelKey	Non mandatory identifier used to distinguish different application types.	string
broadcastChannelOptions	The configuration item for broadcast-channel has a default configuration of {webWorkerSupport: false}	BroadcastChannelOptions
customPostMessage	User defined collection and sending of data. The default sending method is type, data, param, error	(potMessage: (msg?: any)=>Promise<void>, channel?: BroadcastChannel) => void
onBroadcastChannel	Monitor and collect the same frequency data sent by other applications (including multiple windows of the same application)	(value?: MessageType, channel?: BroadcastChannel, setFetchState?: Fetch<any, []>['setFetchState']) => void

Source

Source · Document · Demo