欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中sharedWorker 實(shí)現(xiàn)多頁(yè)面通信的實(shí)例詳解

 更新時(shí)間:2021年04月26日 14:47:01   作者:飯?zhí)爻? 
這篇文章主要介紹了JavaScript中sharedWorker 實(shí)現(xiàn)多頁(yè)面通信,通過給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

是這樣的,今天玩github,先是在沒有登錄瀏覽了一些頁(yè)面,然后在某一頁(yè)面進(jìn)行了登錄。這時(shí)再切換的其他頁(yè)面時(shí)就看到了下面的提示:

那么這是怎么做到的呢?我們可以想到,一種辦法是 localStorage,在某一個(gè)頁(yè)面登錄時(shí),修改localStorage 狀態(tài),其他頁(yè)面在顯示的時(shí)候,讀取最新的狀態(tài),然后顯示提示:

// 登錄的頁(yè)面
localStorage.setItem('login', true);

// 其他頁(yè)面
document.addEventListener("visibilitychange", function() {
	if (localStorage.setItem('login') === 'true') {
		alert('你已登錄,請(qǐng)刷新頁(yè)面');
	}
}

然而,github并沒有這么做,localStorage里也找不到相關(guān)的字段,一番查找之后,發(fā)現(xiàn)他們是用 sharedWorker 實(shí)現(xiàn)的。那我們就來了解下sharedworker

什么是sharedWorker

sharedWorker 顧名思義,是 worker 的一種,可以由所有同源的頁(yè)面共享。同Worker的api一樣,傳入js的url,就可以注冊(cè)一個(gè) sharedWorker 實(shí)例:

let myWorker = new SharedWorker('worker.js');

但是與普通 Worker 不同的是:
1 同一個(gè)js url 只會(huì)創(chuàng)建一個(gè) sharedWorker,其他頁(yè)面再使用同樣的url創(chuàng)建sharedWorker,會(huì)復(fù)用已創(chuàng)建的 worker,這個(gè)worker由那幾個(gè)頁(yè)面共享。
2 sharedWorker通過port來發(fā)送和接收消息

接下來,我們看一下具體是 worker 和頁(yè)面之間是如何發(fā)送和接收消息的。

messagePort

假設(shè)我們有兩個(gè)js,一個(gè)是跑在頁(yè)面里的 page.js,另一個(gè)是跑在 worker里的 worker.js。那么我們要在 page.js 里注冊(cè)一個(gè) 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

在上面的例子中,我們?cè)趙orker中使用了console.log來打印來自頁(yè)面的message,那么到哪里可以看到打印的log呢?我們可以在瀏覽器地址欄里面輸入 `chrome://inspect
,然后在側(cè)邊欄選中shared workers了,就可以看到瀏覽器,目前在運(yùn)行的所有worker。點(diǎn)擊inspect會(huì)打開一個(gè)開發(fā)者工具,然后就可以看到輸出的log了。

這里我們看到我們的worker名字是untitled,那是因?yàn)閟haredworker 構(gòu)造函數(shù)還支持傳入第二個(gè)參數(shù)作為名字:

let myWorker = new SharedWorker('worker.js', 'awesome worker');

多頁(yè)面發(fā)布消息

回到文章一開始的例子,我們前面實(shí)現(xiàn)了頁(yè)面和worker之間的通信,那么該如何讓worker向多個(gè)頁(yè)面發(fā)送消息呢?一個(gè)思路就是我們把port緩存起來,作為一個(gè)port pool,這樣當(dāng)我們需要向所有頁(yè)面廣播消息的時(shí)候,就可以遍歷port,然后發(fā)送消息:

// worker js
const portPool = [];
onconnect= function(e) {
	const port = e.ports[0];
	// 在connect時(shí)將 port添加到 portPool中
	portPool.push(port);
	port.postMessage('哈嘿');
	port.onmessage = (e) => {
		console.log(e.data);
	}
}

function boardcast(message) {
	portPool.forEach(port => {
		port.portMessage(port);
	})
}

這樣我們就基本實(shí)現(xiàn)了向多個(gè)頁(yè)面廣播消息的功能。

清除無效的port

上面的實(shí)現(xiàn)中有一個(gè)問題,就是在頁(yè)面關(guān)閉后,workerPool中的port并不會(huì)自動(dòng)清除,造成內(nèi)存的白白浪費(fèi)。我們可以在頁(yè)面關(guān)閉前通知shared worker頁(yè)面將要關(guān)閉,然后讓worker將無效的 messagePort 從 portPool 中移除。

// 頁(yè)面
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);
	})
}

這樣,我們就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的多頁(yè)面廣播的sharedWorker。我們可以用它來廣播一下時(shí)間:

setInterval(() => boardcast(Date.now()), 1000);

參考

https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/SharedWorker
https://github.com/mdn/simple-shared-worker

到此這篇關(guān)于JavaScript中sharedWorker 實(shí)現(xiàn)多頁(yè)面通信的文章就介紹到這了,更多相關(guān)js sharedWorker多頁(yè)面通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解

    Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解

    這篇文章主要為大家介紹了Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-10-10
  • js實(shí)現(xiàn)圖片無縫滾動(dòng)特效

    js實(shí)現(xiàn)圖片無縫滾動(dòng)特效

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片無縫循環(huán)滾動(dòng)特效的相關(guān)資料,本實(shí)例在網(wǎng)頁(yè)中較為常見,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-01-01
  • 支付寶小程序?qū)崿F(xiàn)類似微信多行輸入功能(思路詳解)

    支付寶小程序?qū)崿F(xiàn)類似微信多行輸入功能(思路詳解)

    這篇文章主要介紹了支付寶小程序?qū)崿F(xiàn)類似微信多行輸入功能,輸入超過 8 行的時(shí)候會(huì)出現(xiàn)滾動(dòng),這樣做的好處就是輸入框不會(huì)直接頂?shù)巾?yè)面最頂部,支付寶小程序?qū)崿F(xiàn)多行輸入框:使用textarea多行輸入框?qū)崿F(xiàn),感興趣的朋友一起看看吧
    2024-02-02
  • 你可能不知道的JavaScript位運(yùn)算符詳解

    你可能不知道的JavaScript位運(yùn)算符詳解

    位運(yùn)算符是在數(shù)字底層(即表示數(shù)字的32個(gè)數(shù)位)進(jìn)行操作的,下面這篇文章主要給大家介紹了一些你可能不知道的JavaScript位運(yùn)算符的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06
  • BootstrapValidator實(shí)現(xiàn)表單驗(yàn)證功能

    BootstrapValidator實(shí)現(xiàn)表單驗(yàn)證功能

    這篇文章主要為大家詳細(xì)介紹了BootstrapValidator實(shí)現(xiàn)表單驗(yàn)證功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • JS實(shí)現(xiàn)加載和讀取XML文件的方法詳解

    JS實(shí)現(xiàn)加載和讀取XML文件的方法詳解

    這篇文章主要介紹了JS實(shí)現(xiàn)加載和讀取XML文件的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)xml文件的加載與讀取相關(guān)實(shí)現(xiàn)步驟與操作技巧,需要的朋友可以參考下
    2017-04-04
  • layui中l(wèi)ayer前端組件實(shí)現(xiàn)圖片顯示功能的方法分析

    layui中l(wèi)ayer前端組件實(shí)現(xiàn)圖片顯示功能的方法分析

    這篇文章主要介紹了layui中l(wèi)ayer前端組件實(shí)現(xiàn)圖片顯示功能的方法,結(jié)合實(shí)例形式分析了layui中l(wèi)ayer組件調(diào)用圖片顯示功能的操作方法與相關(guān)注意事項(xiàng),并提供了layer與layui源碼下載,需要的朋友可以參考下
    2017-10-10
  • 20170918 前端開發(fā)周報(bào)之JS前端開發(fā)必看

    20170918 前端開發(fā)周報(bào)之JS前端開發(fā)必看

    本文給大家分享了最新版js 前端開發(fā)周報(bào),內(nèi)容非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧
    2017-09-09
  • iScroll中事件點(diǎn)擊觸發(fā)兩次解決方案

    iScroll中事件點(diǎn)擊觸發(fā)兩次解決方案

    iScroll是我們?cè)谧鍪謾C(jī)網(wǎng)頁(yè)中常用的滑動(dòng)控件之一。單說其功能已相當(dāng)豐富。但個(gè)別時(shí)候也是會(huì)掉坑的,正好這次就遇上了。在android的app中嵌入網(wǎng)頁(yè)時(shí)不少手機(jī)會(huì)出現(xiàn)一次點(diǎn)擊兩次觸發(fā)的現(xiàn)象。經(jīng)過一段時(shí)間的折騰,總算想到了一個(gè)還算合理的解決放案。
    2015-03-03
  • layer彈出層 iframe層去掉滾動(dòng)條的實(shí)例代碼

    layer彈出層 iframe層去掉滾動(dòng)條的實(shí)例代碼

    今天小編就為大家分享一篇layer彈出層 iframe層去掉滾動(dòng)條的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08

最新評(píng)論