56
edits
Changes
→Web Workers API
I have leveraged this knowledge to complete a demo of a 2-player Battleships game that consists of 2 browser windows - 1 for each player. Rather than having a server coordiating the 2 players, the players would coordinate themselves by sending/receiving messages to/from each other through a shared worker acting as an arbitrator.
The demo is accessible here or through the following URL:<mark>[https://vitokhangnguyen.github.io/WebWorkerDemo/shared.html https://vitokhangnguyen.github.io/WebWorkerDemo/shared.html] == Additional Web Wroker's Features == === Load External Scripts === In the regular browser'scope, scripts can import to use data or functions from each other by using the <script> tag and adding them to the same HTML file. For example, by doing the following, script2 and script1 will have the same global scope: <pre><script src="/script1.js"></script><script src="/script2.js"></markscript></pre> However, with the web workers, that would not work because the worker processes do not load the HTML files. To achieve the same effect, the WorkerGlobalScope offers a function namely importScripts(). In the worker's source file, we can do the following so that we can access the global scope of 2 source files: script1.js, script2.js and foobar.js. <pre>importScripts("script1.js", "script2.js", "foobar.js")</pre> Notice that the function can take as many arguments as possible and the effect is going to be the same as importing one by one. === Transferable Objects === It is important to realize that in Web Worker communications, there are no real shared data! The data is transferred among the processes via message passing and the browser implements an algorithm called [https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm Structured Cloning] to perform this. In short, an object in JavaScript is recursively copied and represented in the JSON format to be parsed upon being received. The method has a weakness that if the copied object is too large in size, the process of copying and transmiting this object through a message can take very long. To remedy this issue, most modern browsers nowadays allow transferable objects which means an object would stay in memory and would not be copied while a reference to it is transferred over to the destination process, instead. The old reference to that object in the source process would no longer be available after the transfer. This makes a huge performance boost when transferring large objects. To utilize the feature, the following syntax of the Worker.postMessage() function is employed: <pre>let worker = new Worker('worker.js');worker.postMessage(data, [arrayBuffer1, arrayBuffer2]);</pre> Note that the 1st argument of the function call is the data you want to copy and send and the 2nd argument is an array of items you want to transfer. The array must only contain items of the ArrayBuffer type to be transferred. === Error Handling ===
== Other Workers ==