微信小程序 網(wǎng)站開發(fā),做一個(gè)靜態(tài)網(wǎng)站需要多少錢,網(wǎng)站積分規(guī)則設(shè)計(jì),關(guān)鍵詞排名零芯互聯(lián)排名應(yīng)用場(chǎng)景#xff1a; 狀態(tài)同步#xff1a;多標(biāo)簽頁(yè)之間同步數(shù)據(jù)#xff0c;比如同步設(shè)備展示狀態(tài)#xff0c;同步數(shù)據(jù)信息。消息通知#xff1a;通知其余標(biāo)簽頁(yè)執(zhí)行動(dòng)作#xff0c;比如說(shuō)跳轉(zhuǎn)其他頁(yè)面#xff0c;完成后#xff0c;通知打開頁(yè)面執(zhí)行狀態(tài)變更或刷新燈操…應(yīng)用場(chǎng)景狀態(tài)同步多標(biāo)簽頁(yè)之間同步數(shù)據(jù)比如同步設(shè)備展示狀態(tài)同步數(shù)據(jù)信息。消息通知通知其余標(biāo)簽頁(yè)執(zhí)行動(dòng)作比如說(shuō)跳轉(zhuǎn)其他頁(yè)面完成后通知打開頁(yè)面執(zhí)行狀態(tài)變更或刷新燈操作。隱私數(shù)據(jù)通信基于加殼客戶端實(shí)現(xiàn) H5 頁(yè)面之間的本地通信機(jī)制不經(jīng)過(guò)網(wǎng)絡(luò)層傳輸還根據(jù)隨機(jī)加密值實(shí)現(xiàn)跨權(quán)限式加密信道。實(shí)現(xiàn)場(chǎng)景需要跨域Websocket、父子窗口。無(wú)需跨域LocalStorage、SharedWorker、BroadcastChannel。LocalStroage利用同域下 LocalStorage 共享策略。實(shí)現(xiàn)跨標(biāo)簽頁(yè)的信息同步。實(shí)現(xiàn)簡(jiǎn)單。存在問(wèn)題LocalStorage 有 5MB 大小限制需要注意消息限制問(wèn)題。使用A 頁(yè)面監(jiān)聽storage事件。B 頁(yè)面通過(guò)調(diào)用 LocalStorage 方法觸發(fā)事件傳給 A 頁(yè)面進(jìn)行使用通過(guò)獲取e.newValue變化即可得知當(dāng)前的傳送的消息。當(dāng)執(zhí)行removeItem時(shí)e.newValue會(huì)變?yōu)?null。通過(guò)e.url判斷消息是否為自己發(fā)出避免重復(fù)處理或者監(jiān)聽消息來(lái)源。// A 頁(yè)面window.addEventListener(storage,(e){console.log(e.key)// keyconsole.log(e.oldValue)// 舊值console.log(e.newValue)// 新值即設(shè)置的值console.log(e.storageArea)// 被操作的 storage 對(duì)象console.log(e.url)// 文檔改變的對(duì)象地址來(lái)源})// B 頁(yè)面window.LocalStorage.setItem(xx,xxx)window.LocalStorage.removeItem(xxx,xxx)SharedWorker基于共享線程來(lái)完成通信是獨(dú)立于主線程的后臺(tái)共享線程。SharedWorker 本身承載業(yè)務(wù)共享邏輯底層通信手段基于MessagePort實(shí)現(xiàn)。通過(guò)port通信降低主線程和 Shared Worker 的耦合度。生命周期和連接的主線程相關(guān)主線程全部釋放SharedWorker 也會(huì)終止可能會(huì)等待異步任務(wù)執(zhí)行完成但是每測(cè)試出來(lái)?？赡墚惓Ｇ闆rSecurityError不能正常啟動(dòng) Shraed Worker。NetworkErrorShared Worker 不是application/json格式。SyntaxErrorURL 無(wú)法解析。存在問(wèn)題兼容性問(wèn)題很多移動(dòng)端瀏覽器不支持。增加請(qǐng)求和維護(hù)成本定義額外的 js 文件。調(diào)試?yán)щy需要通過(guò)chrome://inspect#workers界面查看調(diào)試信息。使用主線程連接 SharedWorker。通過(guò)shareWorker.port.postMessage向所有連接的頁(yè)面發(fā)送消息。通過(guò)shareWorker.port.onmessage接收發(fā)來(lái)的消息。// 頁(yè)面內(nèi)主線程constshareWorkernewShareWorker(share-worker.js)shareWorker.port.onmessage(e){const{type,data}e.dataif(typeBROADCAST){// 處理邏輯}}// 處理連接錯(cuò)誤worker.port.onerrorfunction(error){console.error(Shared Worker 錯(cuò)誤:,error);};// 顯示激活shareWorker.port.start()functionsendMessage(){shareWorker.port.postMessage({type:MESSAGE,data:{...}})}functiondisconnect(){shareWorker.port.postMessage({type:DISCONNECT})shareWorker.port.close()}shared worker文件通過(guò)self.onconnect監(jiān)聽連接事件只要完成初始化就會(huì)觸發(fā)。使用 Set 集合connections存儲(chǔ)端口支持 O(1) 操作消耗。操作通過(guò)port.onmessage監(jiān)聽任一主線程發(fā)來(lái)的消息遍歷connections廣播消息。在使用完成時(shí)通過(guò)port.close關(guān)閉端口并清除端口在connections中的緩存一定要清除連接避免出現(xiàn)緩存端口導(dǎo)致廣播無(wú)效端口的情況出現(xiàn)。port.start用于觸發(fā)端口激活調(diào)用不會(huì)觸發(fā)什么內(nèi)容但是部分瀏覽器不調(diào)用可能會(huì)阻塞消息發(fā)送。// share-worker.js (share Worker線程)// 通過(guò) connections 管理端口constconnectionsnewSet();// 消息廣播functionbroadcast(){connections.forEach(p{// 排除自身if(p!port){p.postMessage({type:BROADCAST,data:${data}});}});}functiondisconnect(port){connections.delete(port);port.close();// 關(guān)閉端口}self.onconnect(e){// 1. 讀取端口自動(dòng)去重constporte.ports[0];connections.add(port);// 2. 監(jiān)聽消息port.onmessage(e){const{type,data}e.data;switch(type){caseMESSAGE:console.log(收到主線程消息,data);// 廣播給所有連接的主線程broadcast(data,port)break;caseDISCONNECT:disconnect(port)break;}};// 3. 監(jiān)聽端口錯(cuò)誤/關(guān)閉自動(dòng)清理無(wú)效端口port.onerror(err){console.log(端口錯(cuò)誤:,err);connections.delete(port);};// 顯示激活端口部分瀏覽器需顯式調(diào)用port.start();};Brocastchannel支持同源下跨標(biāo)簽頁(yè)通信方案適用于廣播消息方案。創(chuàng)建頻道名稱只要在同個(gè)頻道名稱下的標(biāo)簽都能接收廣播消息。無(wú)需像 SharedWorker 那樣遍歷廣播直接發(fā)送即可。實(shí)現(xiàn)簡(jiǎn)單幾行代碼即可搞定。存在問(wèn)題2022 年才穩(wěn)定的 API 需要考慮下兼容性問(wèn)題。無(wú)法控制廣播域需要通過(guò)多頻道來(lái)區(qū)分廣播形式或者通過(guò)標(biāo)識(shí)符判斷要處理消息的頁(yè)面。使用通過(guò)new BroadcastChannel(channelName)創(chuàng)建頻道。通過(guò)監(jiān)聽message來(lái)監(jiān)聽廣播消息。通過(guò)channel.postMessage()發(fā)送消息。constbroadcastChannelnewBroadcastChannel(channel);// 接收其他同頻道的廣播消息broadcastChannel.addEventListener(message,(e){const{type,data}e.data});// 為同頻道廣播消息broadcastChannle.postMessage({type:message,data})父子窗口當(dāng)使用window.open()打開窗口可以通過(guò)父子窗口執(zhí)行通信。利用 **瀏覽器窗口句柄Window Handle**和消息傳遞 支持了父子通信?？梢允褂酶复翱谧鳛橹虚g層實(shí)現(xiàn)各個(gè)子窗口的流通性以及廣播功能。兼容性好。存在問(wèn)題需要窗口之間存在父子引用關(guān)系。需要額外維護(hù)子窗口的引用信息。使用父窗口通過(guò)window.open打開子窗口同時(shí)保留子窗口的引用?；趙indow.name區(qū)分子窗口便于后續(xù)跨子窗口通信。監(jiān)聽各自window的message事件實(shí)現(xiàn)通信 。父窗口通過(guò)child.postMessage()發(fā)送消息子窗口通過(guò)window.opener.postMessage()回復(fù)消息如果要跨域可以通過(guò) postMessage 第二參數(shù)指定目標(biāo)源*代表向所有源發(fā)送消息。// 父窗口constchildwindow.open(/some-page)// 給子窗口定義唯一id便于通信child.namewin_id()window.addEventlistener(message,(){// 監(jiān)聽子窗口傳遞的消息})// 在子窗口 /some-page 頁(yè)面// 發(fā)送數(shù)據(jù)到父窗口window.opener.postMessage({type:message,name:window.name,data})window.addEventlistener(message,(){// 監(jiān)聽父窗口傳遞的消息})Websocket通過(guò) websocket 以服務(wù)端做中轉(zhuǎn)實(shí)現(xiàn)跨域通信方案。支持跨域同時(shí)支持跨瀏覽器跨設(shè)備?？梢越Y(jié)合其他跨標(biāo)簽方案實(shí)現(xiàn)復(fù)用 websocket 連接的操作。存在問(wèn)題需要服務(wù)端支持實(shí)現(xiàn)較為復(fù)雜。MessageChannel這個(gè)方案還是比較常用在 iframe 跨域通信機(jī)制中僅記錄。MessageChannel 本質(zhì)也是依賴 MessagePort 來(lái)實(shí)現(xiàn)的通信機(jī)制本質(zhì)和 SharedWorker 一樣。如果實(shí)現(xiàn)跨標(biāo)簽頁(yè)通訊需要有中間人且支持結(jié)構(gòu)化克隆算法來(lái)協(xié)助傳遞 port 端口信息。參考內(nèi)容Window: postMessage() 方法 - Web API | MDN - MDN 文檔BroadcastChannel - Web API | MDNSharedWorker - Web API | MDNMessagePort - Web API | MDN