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

最新推荐文章于 2024-06-25 05:48:33 发布

zhanle_huang

最新推荐文章于 2024-06-25 05:48:33 发布

阅读量621

点赞数 10

分类专栏： ES6 前端 JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/ta_huang/article/details/136293463

版权

JavaScript 同时被 3 个专栏收录

45 篇文章 1 订阅

订阅专栏

前端

42 篇文章 0 订阅

订阅专栏

ES6

10 篇文章 0 订阅

订阅专栏

同源不同页面之间的通信，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>