debugger-examples/examples/workers/shared.html at master · firefox-devtools/debugger-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8" />
   <title>Shared Web Workers: Basic Example</title>
 </head>
 <style>
    #result {
      position: relative;
      background: yellow;
      border-radius: 15px;
      padding: 15px;
      margin: 25px;
    }
    article {
      background: lightSalmon;
      border-radius: 15px;
      padding: 15px;
      margin: 25px;
      width: 440px;
    }
  </style>
 <body>
   <h1>Shared Web Workers: Basic Example</h1>
   <article>
     To create a shared Web Worker, you pass a JavaScript file name to a new instance of the SharedWorker object:
     <br/>var worker = new SharedWorker("jsworker.js");
     <br/>
     Our web shared Web Worker will count the connection and return the data back to our listener in this page. You might want to open the Chrome DevTools in order to see the process.

   </article>
   <output id="result"></output>

   <script>
   var worker = new SharedWorker("shared.js");

worker.port.addEventListener(
  "message",
  function(e) {
    document.getElementById("result").textContent += " | " + e.data;
  },
  false
);

worker.port.start();

// post a message to the shared Web Worker
console.log("Calling the worker from script section 1");
worker.port.postMessage("script-1");
</script>

   <script>
   // This new script block might be found on separate tab/window
// of our web app. Here it’s just for the example on the same page.
console.log("Calling the worker from script section 2");
worker.port.postMessage("script-2");
</script>
 </body>
</html>