同源不同页面之间的通信，SharedWorker使用

news2025/2/25 15:49:56

同源不同页面之间的通信，SharedWorker使用

- - 描述
  - 实现
  - 结果

描述

同源不同页面之间的通信，使用SharedWorker，或者使用全局方法通信，这里使用SharedWorker来实现
mdn地址：https://developer.mozilla.org/zh-CN/docs/Web/API/SharedWorker

实现

/**
 * @description 所有连接这个worker的集合
 */
const portsList = []

/**
 * @description 连接成功回调
 */
self.onconnect = (event) => {
    console.log('self', self)
    // 当前触发连接的端口
    const port = event.ports[0]
    // 添加进去
    portsList.push(port)
    // 接收到消息的回调
    port.onmessage = (event) => {
        // 获取传递的消息
        const { message, value } = event.data
        // 计算
        let result = 0
        switch (message) {
            case 'add':
                result = value * 2
                break
            case 'multiply':
                result = value * value
                break
            default:
                result = value
        }
        // 给所有连接的目标发送消息
        portsList.forEach((port) => port.postMessage(`${message}结果是22：${result}`))
    }
}
console.log('self', self)

const sharedWorker = new SharedWorker(new URL('./worker.js', import.meta.url))
console.log('url', new URL('./worker.js', import.meta.url), import.meta.url)
export default sharedWorker

// 为何用这个文件统一new  因为不统一在这里new的话，会因为模块文件不同，导致new的文件不同而不是同一个实例，会不能共享线程
// 用URL来处理文件路径，转换成打包后的正确地址

为何用这个文件统一new 因为不统一在这里new的话，会因为模块文件不同，导致new的文件不同而不是同一个实例，会不能共享线程
用URL来处理文件路径，转换成打包后的正确地址
test1.vue

<template>
    <div>
        <div @click="sendMessage">666</div>
    </div>
</template>
<script>
import hook from './hook.js'
export default {
    mounted() {
        hook.port.start()
        // // 接收SharedWorker返回的结果
        hook.port.onmessage = (event) => {
            console.log(event.data, '666')
        }
    },
    methods: {
    	sendMessage() {
            console.log('hook66', hook)
            hook.port.postMessage({ message: 'add', value: 1 })
        },
    }
}
</script>

text2.vue

<template>
    <div>
        <div @click="sendMessage">777</div>
    </div>
</template>
<script>
import hook from './hook.js'
export default {
    mounted() {
        hook.port.start()
        // // 接收SharedWorker返回的结果
        hook.port.onmessage = (event) => {
            console.log(event.data, '777')
        }
    },
    methods: {
        sendMessage() {
            console.log('hook77', hook)
            hook.port.postMessage({ message: 'multiply', value: 3 })
        },
    }
}
</script>

ceshi.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            iframe {
                width: 300px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <iframe src="http://localhost:8080/#/s1" frameborder="0"></iframe>
        <iframe src="http://localhost:8080/#/s2" frameborder="0"></iframe>
    </body>
</html>