Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A simple project to explore shared web workers
branch: master
Failed to load latest commit information.
lib
.gitignore
README.md excusing myself
build.sh open multiple windows and iframes
index.jade added Desktop notifications
index.js added Desktop notifications
inner.jade remote control works
inner.js remote control works
package.json
shared-worker.js got peer communication going on

README.md

Shared WebWorkers + Desktop Notifications = Remote Control

Think of the possibilities...

Sorry that this isn't a great article / walkthrough. I was having a power-hour just banging my way through.

If you checkout the code and look at it, it's pretty simple though.

Stage 1

  1. Take a look at the examples here:

  2. Copy and paste the 3 pages from the spec example:

      mkdir shared-worker-example
      cd shared-worker-example
      touch test.js
      touch index.html
      touch inner.html
    
  3. Use some sort of static file server, this won't work from your filesystem

      npm install served 8888 &
      # open index.html in a browser
    

Cool. It works.

Stage 2

Without adding any functionality, I want to refactor the code.

  1. Refactor

      # move script from index.html to index.js
      touch index.js 
    
      # move script from inner.html to index.js
      touch inner.js
    
      # rename indescriptive 'test.js'
      mv test.js shared-worker.js
    
  2. De-html

      # convert html to jade
      html2jade index.html
      html2jade inner.html
    
  3. Create build system

      build.sh:
    
      rm *.html
      jade *.jade
    
  4. Test

      # open index.html in a browser
    

Cool. It still works.

Stage 3

The examples have really crummy javascript examples. Rewrite!

  1. strict mode

    Everything gets wrapped in a strict-mode closure for safe-keeping

      (function () {
        "use strict";
    
        ... previous content goes here ...
      }());
    
  2. No magic globals

    They broke strict mode by using onconnect = rather than self.onconnect =. Fixed

  3. No magic events

    onmessage automatically invokes port.start(). That's just weird.

    All events updated to use addEventListener

Awesome. Not broken yet.

Stage 4

Now I want to see interaction, so I need a DOM library and a form to send messages.

  1. Install pakmanager

      npm install pakmanager
    
  2. Create a package

      # just added a console.log (so that the file isn't empty), will convert main index.js later
      touch lib/index.js
      npm init
      # edit package.json to add `domReady`, `bean` (events), `bonzo` (DOM manipulations), and `qwery` (css selection)
      # add "main" as "lib/index" and "lib" as "lib"
    
  3. Add script tags for pakmanaged.js in index.jade and inner.jade

    These tags must come first so that the latter files have access

  4. Modify build script

      # add at end of build.sh
      pakmanager build
    
  5. Added button and event handlers to open new iFrames or windows for inner.html instances

Stage 5

Send a message from a form

  1. Add form with submit button

    Easy enough, no trickery here

  2. Get the message through the webworker to the peers

    Turns out that event.ports is a rabbit hole. It's useless. It isn't an Array or an Object. You can only ever access ports[0]. It's part of the spec that you can't access ports[i]! WTF!?!?!

    So inside the worker I did something like this:

      var channels = [];
    
      function connect(ev) {
        var newbie = ev.ports[0];
        channels.push(newbie)
        channels.forEach(function (port) {
          if (newbie === port) {
            return;
          }
          port.postMessage('a newcomer has arrived with the message: ' + event.data);
        });
      }
    

Stage 6

Added Desktop Notifications using webkitNotification and mozNotification.

  1. Request permission from user

    You can only do this once (without hardcore clearing the cache - so do it right!)

  2. Debugging is impossible... but oh well

W00T!

Stage 7

Houston, we have remote control!!!

Can't type from Notifications box, but can Bark!!! Ruff ruff!

Something went wrong with that request. Please try again.