tab-communication

跨标签页通信工具，使用 BroadcastChannel API 实现同标签页内组件通信和跨标签页通信。

特性

• ✅ 支持跨标签页通信（使用 BroadcastChannel API）
• ✅ 支持同标签页内组件通信
• ✅ 自动处理不可序列化的对象（函数、Symbol、响应式代理等）
• ✅ 零依赖，轻量级
• ✅ 支持 TypeScript
• ✅ 支持 ES Module 和 CommonJS

安装

npm install tab-communication

或

yarn add tab-communication

或

pnpm add tab-communication

使用方法

ES Module

import {
  sendMessage,
  onMessage,
  closeChannel,
  MessageTypes,
} from "tab-communication";

// 发送消息
sendMessage(MessageTypes.UPDATE, { id: 1, name: "Item 1" });

// 监听消息
const unsubscribe = onMessage((type, data) => {
  console.log("收到消息:", type, data);

  if (type === MessageTypes.UPDATE) {
    // 处理更新消息
    console.log("更新数据:", data);
  }
});

// 取消监听
unsubscribe();

// 关闭通道（通常在组件卸载时调用）
closeChannel();

CommonJS

const {
  sendMessage,
  onMessage,
  closeChannel,
  MessageTypes,
} = require("tab-communication");

// 使用方式同上

创建自定义通道实例

如果需要使用不同的通道名称，可以创建多个实例：

import { createTabCommunication } from "tab-communication";

// 创建自定义通道实例
const customChannel = createTabCommunication("my-custom-channel");

// 使用自定义实例
customChannel.sendMessage("CUSTOM_TYPE", { data: "test" });

const unsubscribe = customChannel.onMessage((type, data) => {
  console.log("收到消息:", type, data);
});

Vue 3 示例

<template>
  <div>
    <button @click="sendTestMessage">发送消息</button>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { sendMessage, onMessage, MessageTypes } from "tab-communication";

let unsubscribe = null;

onMounted(() => {
  // 监听消息
  unsubscribe = onMessage((type, data) => {
    console.log("收到消息:", type, data);
  });
});

onUnmounted(() => {
  // 清理监听
  if (unsubscribe) {
    unsubscribe();
  }
});

const sendTestMessage = () => {
  sendMessage(MessageTypes.UPDATE, { id: 1, name: "Test" });
};
</script>

React 示例

import { useEffect } from "react";
import { sendMessage, onMessage, MessageTypes } from "tab-communication";

function MyComponent() {
  useEffect(() => {
    // 监听消息
    const unsubscribe = onMessage((type, data) => {
      console.log("收到消息:", type, data);
    });

    // 清理函数
    return () => {
      unsubscribe();
    };
  }, []);

  const handleClick = () => {
    sendMessage(MessageTypes.UPDATE, { id: 1, name: "Test" });
  };

  return <button onClick={handleClick}>发送消息</button>;
}

API

sendMessage(type, data)

发送消息到所有标签页和同标签页内的其他组件。

参数：

• type (string): 消息类型
• data (any): 消息数据（会自动序列化，移除不可序列化的属性）

onMessage(callback)

监听消息。

参数：

• callback (Function): 回调函数，接收 (type, data) 参数

返回：

• Function: 清理函数，调用后取消监听

closeChannel()

关闭通信通道，清理所有监听器。

createTabCommunication(channelName?)

创建自定义通道实例。

参数：

• channelName (string, 可选): 通道名称，默认为 'app-channel'

返回：

• TabCommunication: 通信工具对象，包含 sendMessage、onMessage、closeChannel 方法

MessageTypes

预定义的消息类型常量（示例）：

{
  UPDATE: 'UPDATE',
  DELETE: 'DELETE',
  CREATE: 'CREATE',
  SELECT: 'SELECT',
  STATE_CHANGE: 'STATE_CHANGE',
  CUSTOM: 'CUSTOM'
}

你可以使用这些常量，或者定义自己的消息类型。

浏览器兼容性

• Chrome 54+
• Firefox 38+
• Edge 79+
• Safari 15.4+
• Opera 41+

在不支持 BroadcastChannel 的环境中，将仅使用本地事件通信（同标签页内通信）。

注意事项

1. 消息数据会被自动序列化，函数、Symbol 等不可序列化的属性会被移除
2. 响应式代理（如 Vue、React 等框架的响应式对象）会被自动转换为普通对象
3. 建议在组件卸载时调用清理函数或 closeChannel() 以避免内存泄漏
4. 如果使用自定义通道名称，确保所有需要通信的标签页使用相同的通道名称

许可证

MIT