examples/workers/shared-tweets.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Shared Web Workers: Twitter Example</title>
    <meta name="author" content="Ido Green">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style>
      #result {
        background: lightblue;
        padding: 20px;
        border-radius: 18px;
      }
      #tweets {
        background: yellow;
        border-radius: 28px;
        padding: 20px;
      }
    </style>
  </head>
  <body>

    <h1>Shared Web Workers: Twitter Example</h1>
    <nav>
      <button id="start-button">Start The Shared Worker</button>
      <button id="stop-button">Stop The Shared Worker</button>
    </nav>
    <article>In this example we used a Shared Worker in order to read tweets and then send them to the main UI thread. <br/>You will see the messages that we are getting from the SharedWorker and then the tweets for @greenido user (yep, that's my user on Twitter)<br/>
      Let’s have a look how it's working internally by opening Chrome DevTool on the Console tab.
      <br/>
      <div id="result"></div>
      <div id="tweets"></div>
    </article>

    <iframe style="width:90%; height: 600px; background: lightgray;"
          src="shared-tweets-b.html"></iframe>>

    <script>
    var worker;

function startWorker() {
  console.log("WebWorker: Starting");
  worker = new SharedWorker("shared-tweets.js");
  worker.port.addEventListener(
    "message",
    function(e) {
      var curTime = new Date();
      // here we will show the messages between our page and the shared Worker
      $("#result").append(curTime + " ) " + e.data + "<br/>");
      var source = e.data[0].source;
      // in case we have some data from Twitter - let's show it to the user
      if (typeof source != "undefined") {
        var tweets = document.createElement("ul");
        for (var i = 0; i < 10; i++) {
          if (
            typeof e.data[i] != "undefined" &&
            e.data[i].text != "undefined"
          ) {
            var tweetTextItem = document.createElement("li");
            var tweetText = document.createTextNode(
              e.data[i].text +
                " | " +
                e.data[i].source +
                " (" +
                e.data[i].created_at +
                ")"
            );
            tweetTextItem.appendChild(tweetText);
            tweets.appendChild(tweetTextItem);
          }
        }
        // update the DOM outside our loop so it will be efficient action
        console.log("WebWorker: Updated the DOM with Tweets");
        $("#tweets").append(tweets);
      }
      // just to help us analyze what we got as data form the shared worker
      console.log("msg we got back: " + JSON.stringify(e));
    },
    false
  );
  worker.onerror = function(e) {
    throw new Error(e.message + " (" + e.filename + ":" + e.lineno + ")");
  };

  worker.port.start();
  // post a message to the shared Web Worker
  console.log("Calling the worker with @greenido as user");
  worker.port.postMessage({
    cmd: "start",
    user: "greenido"
  });
}

function stopWorker() {
  if (worker != undefined) {
    worker.port.postMessage({ cmd: "stop" });
    console.log("WebWorker: Stop the party");
    // You might use worker = null if you wish not to use the worker from now
  }
}

// when the DOM is ready - attached our 2 actions to the buttons
$(function() {
  $("#start-button").click(function() {
    startWorker();
  });
  $("#stop-button").click(function() {
    stopWorker();
  });
});
</script>
  </body>
</html>