JavaScript中sharedWorker 實現(xiàn)多頁面通信的實例詳解
是這樣的,今天玩github,先是在沒有登錄瀏覽了一些頁面,然后在某一頁面進行了登錄。這時再切換的其他頁面時就看到了下面的提示:
那么這是怎么做到的呢?我們可以想到,一種辦法是 localStorage,在某一個頁面登錄時,修改localStorage 狀態(tài),其他頁面在顯示的時候,讀取最新的狀態(tài),然后顯示提示:
// 登錄的頁面 localStorage.setItem('login', true); // 其他頁面 document.addEventListener("visibilitychange", function() { if (localStorage.setItem('login') === 'true') { alert('你已登錄,請刷新頁面'); } }
然而,github并沒有這么做,localStorage里也找不到相關的字段,一番查找之后,發(fā)現(xiàn)他們是用 sharedWorker 實現(xiàn)的。那我們就來了解下sharedworker
什么是sharedWorker
sharedWorker 顧名思義,是 worker 的一種,可以由所有同源的頁面共享。同Worker的api一樣,傳入js的url,就可以注冊一個 sharedWorker 實例:
let myWorker = new SharedWorker('worker.js');
但是與普通 Worker 不同的是:
1 同一個js url 只會創(chuàng)建一個 sharedWorker,其他頁面再使用同樣的url創(chuàng)建sharedWorker,會復用已創(chuàng)建的 worker,這個worker由那幾個頁面共享。
2 sharedWorker通過port來發(fā)送和接收消息
接下來,我們看一下具體是 worker 和頁面之間是如何發(fā)送和接收消息的。
messagePort
假設我們有兩個js,一個是跑在頁面里的 page.js,另一個是跑在 worker里的 worker.js。那么我們要在 page.js 里注冊一個 sharedWorker,代碼如下:
// page.js let myWorker = new SharedWorker('worker.js'); // page通過worker port發(fā)送消息 myWorker.port.postMessage('哼哼'); // page通過worker port接收消息 myWorker.port.onmessage = (e) => console.log(e.data); // worker.js onconnect= function(e) { const port = e.ports[0]; port.postMessage('哈嘿'); port.onmessage = (e) => { console.log(e.data); } }
調(diào)試sharedWorker
在上面的例子中,我們在worker中使用了console.log來打印來自頁面的message,那么到哪里可以看到打印的log呢?我們可以在瀏覽器地址欄里面輸入 `chrome://inspect
,然后在側(cè)邊欄選中shared workers了,就可以看到瀏覽器,目前在運行的所有worker。點擊inspect會打開一個開發(fā)者工具,然后就可以看到輸出的log了。
這里我們看到我們的worker名字是untitled,那是因為sharedworker 構(gòu)造函數(shù)還支持傳入第二個參數(shù)作為名字:
let myWorker = new SharedWorker('worker.js', 'awesome worker');
多頁面發(fā)布消息
回到文章一開始的例子,我們前面實現(xiàn)了頁面和worker之間的通信,那么該如何讓worker向多個頁面發(fā)送消息呢?一個思路就是我們把port緩存起來,作為一個port pool,這樣當我們需要向所有頁面廣播消息的時候,就可以遍歷port,然后發(fā)送消息:
// worker js const portPool = []; onconnect= function(e) { const port = e.ports[0]; // 在connect時將 port添加到 portPool中 portPool.push(port); port.postMessage('哈嘿'); port.onmessage = (e) => { console.log(e.data); } } function boardcast(message) { portPool.forEach(port => { port.portMessage(port); }) }
這樣我們就基本實現(xiàn)了向多個頁面廣播消息的功能。
清除無效的port
上面的實現(xiàn)中有一個問題,就是在頁面關閉后,workerPool中的port并不會自動清除,造成內(nèi)存的白白浪費。我們可以在頁面關閉前通知shared worker頁面將要關閉,然后讓worker將無效的 messagePort 從 portPool 中移除。
// 頁面 window.onbeforeunload = () => { myWorker.port.postMessage('TO BE CLOSED'); }; // worker.js const portPool = []; onconnect = function(e) { var port = e.ports[0]; portPool.push(port); port.onmessage = function(e) { console.log(e); if (e.data === 'TO BE CLOSED') { const index = ports.findIndex(p => p === port); portPool.splice(index, 1); } var workerResult = 'Result: ' + (e.data[0] * e.data[1]); port.postMessage(workerResult); } } function boardcast(message) { portPool.forEach(port => { port.portMessage(port); }) }
這樣,我們就實現(xiàn)了一個簡單的多頁面廣播的sharedWorker。我們可以用它來廣播一下時間:
setInterval(() => boardcast(Date.now()), 1000);
參考
https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/SharedWorker
https://github.com/mdn/simple-shared-worker
到此這篇關于JavaScript中sharedWorker 實現(xiàn)多頁面通信的文章就介紹到這了,更多相關js sharedWorker多頁面通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10支付寶小程序?qū)崿F(xiàn)類似微信多行輸入功能(思路詳解)
這篇文章主要介紹了支付寶小程序?qū)崿F(xiàn)類似微信多行輸入功能,輸入超過 8 行的時候會出現(xiàn)滾動,這樣做的好處就是輸入框不會直接頂?shù)巾撁孀铐敳?支付寶小程序?qū)崿F(xiàn)多行輸入框:使用textarea多行輸入框?qū)崿F(xiàn),感興趣的朋友一起看看吧2024-02-02BootstrapValidator實現(xiàn)表單驗證功能
這篇文章主要為大家詳細介紹了BootstrapValidator實現(xiàn)表單驗證功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11layui中l(wèi)ayer前端組件實現(xiàn)圖片顯示功能的方法分析
這篇文章主要介紹了layui中l(wèi)ayer前端組件實現(xiàn)圖片顯示功能的方法,結(jié)合實例形式分析了layui中l(wèi)ayer組件調(diào)用圖片顯示功能的操作方法與相關注意事項,并提供了layer與layui源碼下載,需要的朋友可以參考下2017-10-1020170918 前端開發(fā)周報之JS前端開發(fā)必看
本文給大家分享了最新版js 前端開發(fā)周報,內(nèi)容非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-09-09