Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use sharedWorker to achieve multi-page communication in html5". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use sharedWorker to achieve multi-page communication in html5".

One way we can think of is localStorage, which modifies the localStorage status when one page logs in, reads the latest status when the other pages are displayed, and then displays the prompt:

/ / login page localStorage.setItem ('login', true); / / other pages document.addEventListener ("visibilitychange", function () {if (localStorage.setItem (' login') = 'true') {alert (' you are logged in, please refresh the page');}}

However, github did not do this, and the relevant fields were not found in localStorage. After a search, it was found that they were implemented in sharedWorker. Then let's take a look at sharedworker.

What is sharedWorker?

SharedWorker, as its name implies, is a type of worker that can be shared by all homologous pages. Like the api of Worker, you can register a sharedWorker instance by passing the url of js:

Let myWorker = new SharedWorker ('worker.js')

But unlike normal Worker, it is:

1 the same js url will only create one sharedWorker, and other pages will use the same url to create a sharedWorker, which will reuse the created worker, and the worker will be shared by those pages.

2 sharedWorker sends and receives messages through port

Next, let's take a look at how messages are sent and received between the worker and the page.

MessagePort

Suppose we have two js, one is the page.js running in the page, the other is the worker.js running in the worker. So we need to register a sharedWorker in page.js with the following code:

/ / page.jslet myWorker = new SharedWorker ('worker.js'); / / page sends messages myWorker.port.postMessage (' hem') over worker port; / / page receives messages via worker port myWorker.port.onmessage = (e) = > console.log (e.data); / / worker.jsonconnect= function (e) {const port = e.ports [0]; port.postMessage ('ha hee') Port.onmessage = (e) = > {console.log (e.data);}} debug sharedWorker

In the above example, we used console.log in worker to print the message from the page, so where can I see the printed log? We can enter `chrome://inspect in the browser address bar, and then select shared workers in the sidebar, and we can see all the worker currently running in the browser. Clicking inspect will open a developer tool and you can see the output log.

Here we see that our worker name is untitled, because the sharedworker constructor also supports passing in the second parameter as the name:

Let myWorker = new SharedWorker ('worker.js',' awesome worker'); multi-page posting messages

Going back to the example at the beginning of the article, we implemented the communication between the page and worker, so how do we get worker to send messages to multiple pages? One idea is that we cache the port as a port pool so that when we need to broadcast a message to all pages, we can traverse the port and send the message:

/ / worker jsconst portPool = []; onconnect= function (e) {const port = e.ports [0]; / / add port to portPool when connect portPool.push (port); port.postMessage ('ha-hee'); port.onmessage = (e) = > {console.log (e.data) }} function boardcast (message) {portPool.forEach (port = > {port.portMessage (port);})}

In this way, we basically achieve the function of broadcasting messages to multiple pages.

Clear invalid port

A problem with the above implementation is that the port in workerPool is not automatically cleared after the page is closed, resulting in a waste of memory. We can notify shared worker that the page is going to be closed before the page closes, and then have worker remove the invalid messagePort from the portPool.

/ / Page _ window.onbeforeunload = () = > {myWorker.port.postMessage ('TO BE CLOSED');}; / / worker.jsconst 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);})}

In this way, we have implemented a simple multi-page broadcast sharedWorker. We can use it to broadcast the time:

SetInterval (()) = > boardcast (Date.now ()), 1000); thank you for reading, the above is the content of "how to use sharedWorker to achieve multi-page communication in html5". After the study of this article, I believe you have a deeper understanding of how to use sharedWorker to achieve multi-page communication in html5. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.