feat: add useBroadcastChannelPlugin from @vue-hooks-plus/use-request-plugins

Author: NelsonYong

package.json

@@ -73,7 +73,9 @@
 		"vue-tsc": "1.0.9",
 		"vue-typical": "^2.1.0",
     "pinia":"^2.0.34",
+    "broadcast-channel":"^5.1.0",
     "three":"0.147.0",
+    "axios": "^0.24.0",
     "vue-demi": "^0.13.11"
 	},
 	"lint-staged": {

packages/hooks/docs/.vitepress/router.ts

@@ -170,6 +170,10 @@ const useRequestPlugins = [
         text: '全局请求状态管理',
         link: '/useRequest/plugins/fetchsing/',
       },
+      {
+        text: "同源跨窗口广播",
+        link: "/useRequest/plugins/broadcastChannel/"
+      }
     ],
   },
 ]
@@ -179,9 +183,13 @@ const useRequestPluginsEN = [
     text: 'UseRequest External Plugins',
     items: [
       {
-        text: 'Global Fetching',
+        text: 'global Fetching',
         link: '/en/useRequest/plugins/fetchsing/',
       },
+      {
+        text: "broadcastChannel",
+        link: "/en/useRequest/plugins/broadcastChannel/"
+      }
     ],
   },
 ]

packages/hooks/src/useRequest/docs/plugins/broadcastChannel/demo/demo.vue

@@ -0,0 +1,52 @@
+<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,
+      broadcastChannel: 'nice-broadcastChannel',
+      onBroadcastChannel: (message: any, channel: any) => {
+        other.value.push(message.data)
+      },
+    },
+    [useBroadcastChannelPlugin],
+  )
+</script>
+
+<style scoped lang="less"></style>

packages/hooks/src/useRequest/docs/plugins/broadcastChannel/index.en-US.md

@@ -0,0 +1,66 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useRequest/plugins/broadcastChannel
+source:
+  path: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/use-request-plugins/src/useBroadcastChannelPlugin/index.ts
+  demoPath: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/plugins/broadcastChannel/demo/demo.vue
+---
+
+# 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.
+
+`useBroadcastChannelPlugin` is a utility for broadcasting 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
+
+```bash
+
+# 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
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="Same origin cross window communication"
+  desc="Opening the same new window, sending and refreshing data will result in data being transmitted across windows."> </demo>
+
+## API
+
+```typescript
+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` |

packages/hooks/src/useRequest/docs/plugins/broadcastChannel/index.zh-CN.md

@@ -0,0 +1,68 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useRequest/plugins/broadcastChannel
+source:
+  path: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/use-request-plugins/src/useBroadcastChannelPlugin/index.ts
+  demoPath: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/plugins/broadcastChannel/demo/demo.vue
+---
+
+# BroadcastChannel(实验)
+
+> 非常重要：此实用程序目前处于试验阶段。这意味着重大更改将在次要和补丁版本中发生。使用风险自负。如果您选择在实验阶段的生产中依赖它，请将您的版本锁定为补丁级别版本以避免意外损坏
+
+基于 `broadcast-channel` 实现的 `useRequest` 的插件，用于在具有`相同来源`的浏览器选项卡/窗口之间广播和同步 `useRequest` 的状态。
+
+## 功能
+
+- `broadcast-channel` 功能的集成。
+- 相同来源的浏览器选项卡/窗口之间数据的广播和同步。
+- 支持自定义信息发送和 `channel` 的使用。
+
+## 安装
+
+```bash
+
+# 需要保证应用含有 `broadcast-channel`。
+
+1. npm i broadcast-channel
+
+2. npm i @vue-hooks-plus/use-request-plugins
+
+```
+
+## 代码演示
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="同源跨窗口通信"
+  desc="打开一个同样的新窗口，发送和刷新数据会发现数据跨窗口传递。"> </demo>
+
+## API
+
+```typescript
+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 | 必填，频道的名称，需要频道名称一样才能接收到同频数据。 | `string` |
+| broadcastChannelKey | 非必填，用于区分不同应用类型的标识符。 | `string` |
+| broadcastChannelOptions | `broadcast-channel` 的配置项，默认配置`{ webWorkerSupport:false }` | `BroadcastChannelOptions` |
+| customPostMessage | 用户自定义收集发送数据，默认发送方式为 `type`,`data`,`params`,`error` | `(postMessage: (msg?: any) => Promise<void>, channel?: BroadcastChannel) => void` |
+| onBroadcastChannel | 监听收集其他应用（包括同一应用的多窗口）发送的同频数据 | `(value?: MessageType, channel?: BroadcastChannel, setFetchState?: Fetch<any, []>['setFetchState']) => void` |

packages/hooks/src/useRequest/docs/refreshOnWindowFocus/demo/demo.vue

@@ -1,19 +1,24 @@
 <template>
   <div style="margin-top: 16px;">读取值：{{ loading ? 'loading' : data }}</div>
+  <vhp-button @click="refresh()">刷新</vhp-button>
 </template>
 
 <script lang="ts" setup>
   import { useRequest } from 'vue-hooks-plus'
 
   function getUsername(): Promise<string> {
+    console.log('刷新')
+
     return new Promise((resolve, reject) => {
       setTimeout(() => {
         resolve(`${String(Date.now())}`)
       }, 1000)
     })
   }
 
-  const { data, loading } = useRequest(() => getUsername(), {
+  const { data, loading, refresh } = useRequest(() => getUsername(), {
     refreshOnWindowFocus: true,
+    focusTimespan: 0,
+    debounceWait: 500,
   })
 </script>

packages/use-request-plugins/src/index.ts

@@ -1,3 +1,4 @@
+import useBroadcastChannelPlugin from './useBroadcastChannelPlugin'
 import useFetchingPlugin from './useFetchingPlugin'
 
-export { useFetchingPlugin }
+export { useFetchingPlugin, useBroadcastChannelPlugin }

packages/use-request-plugins/src/useBroadcastChannelPlugin/index.ts

@@ -0,0 +1,3 @@
+import { useBroadcastChannelPlugin } from './useBroadcastChannel'
+
+export default useBroadcastChannelPlugin

packages/use-request-plugins/src/useBroadcastChannelPlugin/useBroadcastChannel.ts

@@ -0,0 +1,62 @@
+import { ref } from 'vue';
+import { BroadcastChannel, BroadcastChannelOptions } from 'broadcast-channel'
+import { UseRequestPlugin, UseRequestFetchState } from "@vue-hooks-plus/use-request/dist/types/types";
+import Fetch from '@vue-hooks-plus/use-request/dist/types/Fetch';
+
+type MessageType = UseRequestFetchState<any, any> & { type: string }
+
+export interface BroadcastChannelType {
+  broadcastChannel?: string
+  broadcastChannelKey?: string
+  broadcastChannelOptions?: BroadcastChannelOptions
+  customPostMessage?: (postMessage: (msg?: any) => Promise<void>, channel?: BroadcastChannel, setFetchState?: Fetch<any, []>['setFetchState']) => void
+  onBroadcastChannel?: (value?: MessageType, channel?: BroadcastChannel, setFetchState?: Fetch<any, []>['setFetchState']) => void
+}
+
+export const useBroadcastChannelPlugin: UseRequestPlugin<any, [], BroadcastChannelType> = (fetchInstance, { broadcastChannel, broadcastChannelKey, broadcastChannelOptions = { webWorkerSupport: false }, customPostMessage, onBroadcastChannel }) => {
+  let transaction = false
+  const channel = ref<BroadcastChannel>()
+
+  const tx = (callback: () => void) => {
+    transaction = true
+    callback()
+    transaction = false
+  }
+
+  if (broadcastChannel) {
+    channel.value = new BroadcastChannel(broadcastChannel, broadcastChannelOptions)
+
+    if (customPostMessage) {
+      customPostMessage(channel.value?.postMessage, channel.value)
+    }
+
+    channel.value.onmessage = message => {
+      tx(() => {
+        onBroadcastChannel?.(message, channel.value, fetchInstance.setFetchState)
+      })
+    }
+  }
+
+  return {
+    onSuccess: (data, params) => {
+      if (broadcastChannel && transaction === false && !customPostMessage) {
+        channel.value?.postMessage({
+          type: broadcastChannelKey ?? broadcastChannel,
+          data,
+          params,
+          error: null
+        })
+      }
+    },
+    onError: (error, params) => {
+      if (broadcastChannel && transaction === false && !customPostMessage) {
+        channel.value?.postMessage({
+          type: broadcastChannelKey ?? broadcastChannel,
+          params,
+          error
+        })
+      }
+    }
+  }
+
+}