Web Worker javascript multi-thread programming (2) and worker multi-thread programming
Two types of Web Worker are mentioned in Web Worker javascript multi-threaded programming (I): dedicated thread dedicated web worker and shared thread shared web worker. However, I mainly talked about the dedicated thread dedicated web worker, and did not mention the shared thread shared web worker. This article follows the previous article about shared web worker.
Shared web worker: It runs more universal code and can serve multiple pages. It can be accessed by multiple associated pages. The Shared web worker ends only when all associated pages are closed.
Note: To enable the sharing process to connect to multiple different pages, these pages must belong to the same domain (the same protocol, host, and port );
How to create a shared web worker
The method for creating a shared web worker is similar to that for creating a dedicated web worker.Worker()The constructor that specifies the uri of the script to be run in the worker thread.
The following code demonstrates how to use SharedWorker()Create a shared process object by using the constructor.
var myWorker = new SharedWorker("worker.js");
Unlike dedicated web worker, shared web worker creates a messageport object by accessing the worker through the sharedworker. port attribute. This object can be used for communication and control of sharing processes. When using addEventListener to listen to message events, the port needs to be manually started. The start () method is used and onmessage () is not used.
myWorker.port.start();
After the port is enabled, use port. postmessage () to send messages to SharedWorker, and use port. onmessage to listen to events to receive messages sent by SharedWorker. The Code is as follows:
first.onchange = function() { myWorker.port.postMessage([first.value,second.value]); console.log('Message posted to worker'); } second.onchange = function() { myWorker.port.postMessage([first.value,second.value]); console.log('Message posted to worker'); } myWorker.port.onmessage = function(e) { result1.textContent = e.data; console.log('Message received from worker'); }
In SharedWorker, The onconnect event is used to listen to all pages of SharedWorker connected to the same port. Similarly, port. onmessage is used to communicate with the page to receive messages, and port. postMessage is used to send back processed data to the page.
Onconnect = function (e) {var port = e. ports [0]; port. addEventListener ('message', function (e) {var workerResult = 'result: '+ (e. data [0] * e. data [1]); port. postMessage (workerResult) ;}); port. start (); // required when using addEventListener to listen to messages. onmessage is not required
}
The code for listening to events using onmessage is as follows:
onconnect = function(e) { var port = e.ports[0]; port.onmessage(function (e) { var workerResult = 'Result: ' + (e.data[0] * e.data[1]); port.postMessage(workerResult); })};
Note: SharedWorker itself is inherited from Worker, so it is subject to the same restrictions as Worker. The restrictions are introduced in Web Worker javascript multi-threaded programming (I) and added to the Worker scope.ApplicationCache application cache (but has been deleted from the web standard), and the other is name, an optional parameter when using constructors to create a SharedWorker object.
var myWorker = new SharedWorker("worker.js"，"workerName");
In this way, you can access the name in the global scope of the worker. The value in the code above is "workerName ".
The following is a simple example of sharing a SharedWorker on the previous two html pages:
Index1.html
<!DOCTYPE html>Index1.js
var first = document.querySelector('#number1'), second = document.querySelector('#number2'), result1 = document.querySelector('.result1');if (!!window.SharedWorker) { var myWorker = new SharedWorker("worker.js",'sw1_'); first.oninput = function() { myWorker.port.postMessage([first.value, second.value]); console.log('Message posted to worker'); }; second.oninput = function() { myWorker.port.postMessage([first.value, second.value]); console.log('Message posted to worker'); }; myWorker.port.onmessage = function(e) { result1.textContent = e.data; console.log('Message received from worker'); };}Index2.html
<!DOCTYPE html>Index2.js
var squareNumber = document.querySelector('#number3'), result2 = document.querySelector('.result2');if (!!window.SharedWorker) { var myWorker = new SharedWorker("worker.js",'sw2_'); squareNumber.oninput = function() { myWorker.port.postMessage([squareNumber.value, squareNumber.value]); console.log('Message posted to worker'); }; myWorker.port.onmessage = function(e) { result2.textContent = e.data; console.log('Message received from worker'); }}Worker. js
onconnect = function(e) { var port = e.ports[0]; port.onmessage = function(e) { var workerResult = name + 'Result: ' + (e.data[0] * e.data[1]); port.postMessage(workerResult); };};Style.css
html { background-color: #7D2663; font-family: sans-serif;}h1 { margin: 0; font-size: 15vw; letter-spacing: -0.2rem; position: absolute; top: 0; z-index: -1;}p { margin: 0 0 1rem 0;}.controls { padding: 4vw; width: 75%; margin: 3vw auto; background-color: rgba(255, 255, 255, 0.7); border: 5px solid black; opacity: 0.3; transition: 1s all;}.controls:hover, .controls:focus { opacity: 1;}.controls label, .controls p, .controls input { font-size: 3vw;}.controls div { padding-bottom: 1rem;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
