- 在线时间
- 318 小时
- 最后登录
- 2024-4-27
- 注册时间
- 2023-7-11
- 听众数
- 1
- 收听数
- 0
- 能力
- 0 分
- 体力
- 5172 点
- 威望
- 0 点
- 阅读权限
- 255
- 积分
- 1930
- 相册
- 0
- 日志
- 0
- 记录
- 0
- 帖子
- 756
- 主题
- 754
- 精华
- 0
- 分享
- 0
- 好友
- 1
该用户从未签到
|
一. 使用BroadcastChannel. L4 Y% _* b* ~' j/ x% ~ d
. b% K8 f% a( X% S2 i3 j! s* u* q; _const sendMsg = new BroadcastChannel('logout_channel')% N( I3 b" A9 E( v4 z( L
sendMsg.postMessage('清除缓存')
0 E+ Y1 {; p& UonMsg.onmessage = async (event) => {* G7 T1 F8 P% g% |: B" m
console.log('event清除缓存', event.data)
9 {4 I' b) ^6 N6 M4 l- b# p% N8 A& }}6 Q# {% p' }9 Q$ @% ]6 r
. l7 N0 S' X: B( J1 p, C/ T" |: L
二. 使用SharedWorker
$ o$ [9 C* l* E+ F+ w5 p1.创建一个SharedWorker实例,并在其中编写处理消息的代码。2 u! F: \* v Y4 E2 H6 e* u
1 w' [* d5 ]1 X* v% L3 n// shared-worker.js
0 Z; K7 f3 _$ O! g N8 \. n( tonconnect = function(e) {
3 O# T% q' N) M' m: S% R% K2 ~6 o. ? var port = e.ports[0];( o7 H$ k& C6 \( y+ U: J
5 K3 x3 q8 @2 ?% a# {
port.onmessage = function(e) {
2 B) Q! E1 Q0 E7 V var message = e.data;! I% s5 W% n1 Z7 H. T6 F
// 在这里处理接收到的消息+ J' U6 J! o8 D, G7 r6 T
};
6 b7 ^$ q- D# @
% d- S' e* x; p7 K( J port.start();3 z6 L3 n& V' C3 i; r% Z6 |/ ^
};+ R# @7 p C8 \ E
/ H2 t6 b- u+ |
在多个窗口中分别创建SharedWorker的端口,并发送消息。9 I. B0 c, \: j; J: N, n$ h5 D
// window1.js( Z# x/ |+ Y' f; H
var worker = new SharedWorker('shared-worker.js');
' Y* L( z6 Q, T, Ivar port = worker.port;
8 x0 v! \# W) l1 @; ?9 L8 p7 G' H6 k
( N8 ^9 w& v# x4 h( Y9 kport.onmessage = function(e) {1 }/ G" ?. @2 t6 V- |3 {$ T* m1 f
var message = e.data;9 K+ q1 s2 R6 h* O" J. j) w
// 在这里处理接收到的消息
- L' m& g- P8 }( }7 ]% P};$ @, d; y6 A+ l- c3 }! a) C
2 j( D; g) h$ e5 I: n% Q; t
port.postMessage('Hello from window1!');) D0 U6 `' S6 r. C* c2 x6 N
( g4 v5 x8 J' y* k1 a- Z5 |3 y0 R+ L// window2.js
5 ]3 M, u6 e: {8 nvar worker = new SharedWorker('shared-worker.js');
% V7 }$ A1 _7 N& R6 O! xvar port = worker.port;
6 b, C1 e3 g4 b1 c6 L4 I. d/ v9 C& d( D3 q5 H
port.onmessage = function(e) {
$ S/ Y- r8 k9 ] var message = e.data;9 ]6 J0 b2 g% ], S
// 在这里处理接收到的消息
6 k2 V! _/ ?$ @3 d& e};$ f8 V8 U! b0 U$ a
6 i- L( X, R" a u c5 J2 r% o7 _: cport.postMessage('Hello from window2!');
: I) r: [7 s3 v- U& y; E" n* f/ i7 ]9 }! T N7 q
在SharedWorker中处理接收到的消息,并向所有连接的窗口发送消息。9 Q6 C; ?: ]4 B0 a6 t
// shared-worker.js
6 |( I* n9 t1 i( m0 X5 T2 q9 konconnect = function(e) {
/ x8 K7 L& i/ m1 d, ~6 n1 @ var port = e.ports[0];8 P4 s9 F# R# ~* f9 u n0 F5 u" k
4 r) V( g* |/ |4 j7 f- G
port.onmessage = function(e) {
# X8 ^9 K3 f- r& m& x var message = e.data;
/ `4 W0 {$ X6 A8 O // 在这里处理接收到的消息
/ i) b. D' G1 ?9 F0 ~4 a
# ?! Y% v. o- X8 x. Z( U // 向所有连接的窗口发送消息9 o' m) t" L2 J3 O% w* `8 f
e.source.postMessage('Hello from SharedWorker!');- J, j; V f& z( x6 |# s
};9 @& d3 ^7 e: b/ z
9 ~) r K E1 q9 _8 s8 D5 a port.start();
3 U' R$ x7 H% F2 d};
9 P4 j) Y s1 t! \$ {! t' D& j/ e+ j5 j/ [- T6 c% U
8 Q# ?( ^/ B" g! j. A0 ]! T, ^
/ V; N6 q' f' {1 k5 s+ B+ D! K) @ |
zan
|