VUE--使用BroadcastChannel频道实现同源策略不同工程页面通信

背景

在 Vue.js 中，不同工程（通常指的是两个完全独立的 Vue 项目）之间的页面通信是不能直接通过 Vue 的内部机制（如 props、Vuex、Event Bus 等）来实现的，因为这些机制都仅限于单个 Vue 应用内部。但是，你可以通过一些其他方法来实现这种跨应用的通信。

以下是一些可能的解决方案：

1. 使用浏览器存储（如 localStorage、sessionStorage 或 IndexedDB）

两个 Vue应用可以共享浏览器存储来交换数据。一个应用可以将数据写入存储，另一个应用可以读取这些数据。但是，这种方法可能会遇到并发问题（如两个应用同时写入数据），并且不适合处理大量数据或复杂的数据结构。

2. 使用服务器端存储（如数据库）

你可以创建一个后端服务，用于存储和检索数据。两个 Vue 应用都可以通过 API调用与这个后端服务进行通信，从而间接地实现跨应用通信。这种方法更加健壮和灵活，但需要额外的后端开发工作。

3. 使用 WebSockets WebSockets 提供了一种在单个 TCP 连接上进行全双工通信的机制。

你可以创建一个WebSocket 服务器，并让两个 Vue应用都连接到这个服务器。然后，它们就可以通过服务器进行通信了。这种方法适用于实时通信场景，但也需要额外的后端开发工作。

4. 使用 URL 参数或查询字符串

如果你的通信需求比较简单，只是需要在两个页面之间传递一些参数或状态，那么你可以考虑使用 URL参数或查询字符串。当用户从第一个 Vue 应用导航到第二个 Vue 应用时，可以将需要传递的数据附加到 URL中。然后，第二个应用可以从 URL 中读取这些数据。但是，这种方法只适用于简单的数据传递场景，并且可能会受到 URL 长度限制的影响。

5. 使用第三方服务（如 Firebase、PubNub 等）

有些第三方服务提供了实时数据库或消息传递功能，可以用于实现跨应用通信。你可以将这些服务集成到你的 Vue 应用中，并利用它们的功能来实现跨应用通信。但是，这种方法可能会增加你的项目依赖性和复杂性。

6. 使用浏览器扩展或插件

如果你的用户群体允许安装浏览器扩展或插件，你可以考虑使用这种方法来实现跨应用通信。通过扩展或插件，你可以访问更多的浏览器 API和功能，从而更容易地实现跨应用通信。但是，这种方法可能会受到浏览器限制和用户体验问题的影响。

在选择解决方案时，请根据你的具体需求和项目环境进行权衡和选择。

1.在A页面创建发送和接受数据

注：必须同源策略才能使用

<!-- SendAndReceive.vue -->
<template>
  <div>
    <p>Vue App A</p>
    <input v-model="message" placeholder="输入要发送的消息">
    <button @click="sendMessage">发送</button>
    <p>已收到消息: {{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      receivedMessage: '',
      bc: null,
    };
  },
  mounted() {
    this.bc = new BroadcastChannel('my-channel');

    this.bc.onmessage = event => {
      this.receivedMessage = event.data;
    };
  },
  methods: {
    sendMessage() {
      if (this.message) {
        this.bc.postMessage(`Vue App A: ${this.message}`);
        this.message = ''; // Reset input field
      }
    },
  },
  beforeDestroy() {
    if (this.bc) {
      this.bc.close(); // Close the channel when the component is destroyed
    }
  },
};
</script>

2.在B页面创建发送和接受数据

<!-- ReceiveAndSend.vue -->
<template>
  <div>
    <p>Vue App B</p>
    <p>已收到消息: {{ receivedMessage }}</p>
    <input v-model="message" placeholder="输入要发送的消息">
    <button @click="sendMessage">发送</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      receivedMessage: '',
      bc: null,
    };
  },
  mounted() {
    this.bc = new BroadcastChannel('my-channel');

    this.bc.onmessage = event => {
      this.receivedMessage = event.data;
    };
  },
  methods: {
    sendMessage() {
      if (this.message) {
        this.bc.postMessage(`Vue App B: ${this.message}`);
        this.message = ''; // Reset input field
      }
    },
  },
  beforeDestroy() {
    if (this.bc) {
      this.bc.close(); // Close the channel when the component is destroyed
    }
  },
};
</script>