同源不同頁面之間的通信，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 = 0switch (message) {case 'add':result = value * 2breakcase 'multiply':result = value * valuebreakdefault: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>
結果
