rwaldron/sharedworker.multi-connect-inner.html

## sharedworker.multi-connect-inner.html
<!DOCTYPE HTML>
<html>
  <head>
    <script src="sharedworker.multi-connect.renderer.js"></script>
  </head>
  <body>
    <pre id="shared-worker-log"></pre>
  </body>
</html>

## sharedworker.multi-connect.html
<!DOCTYPE HTML>
<html>
  <head>
    <title>SharedWorker: Multiple Connections</title>
    <!-- Include Firebug Lite Because Dragonfly is terrible -->
    <script src="https://getfirebug.com/releases/lite/beta/firebug.jgz">
    {
      startOpened: true
    }
    </script>
    <script src="sharedworker.multi-connect.renderer.js"></script>
  </head>
  <body>
    <pre id="shared-worker-log"></pre>
    <iframe style="width:100%" src="sharedworker.multi-connect-inner.html"></iframe>

    <pre id="shared-worker-connection-log"></pre>
  </body>
</html>


## sharedworker.multi-connect.renderer.js
document.addEventListener('DOMContentLoaded', function () {

  var Share  = {
    worker: (function () {
              //  CREATE SHARED WORKER AND RETURN IT
              return new SharedWorker('sharedworker.multi-connect.worker.js');
            })(),
    logTo:    document.getElementById('shared-worker-log'),
    reportTo: document.getElementById('shared-worker-connection-log')
  };


  //  REFLECT Share OBJECT
  console.log(Share);

  //  LISTEN ON THE SHAREDWORKER'S PORT FOR NEW MESSAGES
  Share.worker.port.addEventListener('message', function(event) {

    //  INITIAL CONNECTION
    if ( event.data.connected ) {
      var workerLog = 'ConnectionId #' + event.data.connectionId +
                                   ' ' + event.data.pathName +
                      ' - Connected: ' + event.data.connected ;

      //  APPEND TO LOG FIELD
      Share.logTo.textContent  += "\n" + workerLog;

      return;
    }

    //  REPORTING CONNECTIONS TO SHARED WORKER
    if ( event.data.connections ) {
      var connectionPaths = event.data.connections;

      console.log('Total Connections: ' + connectionPaths.length);

      for ( var id in connectionPaths ) {

        if ( id !== 'length' )  {

          var connectionLog = '#' + id + ' ' + connectionPaths[id];

          //  WRITE TO CONSOLE
          console.log( connectionLog  );

          //  APPEND TO REPORT FIELD
          Share.reportTo.textContent  += "\n" + connectionLog;
        }
      }
      return;
    }


  }, false);

  //  START THE CONNECTION TO SHAREDWORKER
  //  REQUIRED WHEN USING "addEventListener()"
  Share.worker.port.start();
  //  FIRE CONNECTING MESSAGE TO SHAREDWORKER
  Share.worker.port.postMessage({
    'pathName': location.pathname,
    'connected' : false
  });


}, false);

## sharedworker.multi-connect.worker.js

var Connection = {
  count:        0,
  isConnected:  false,
  paths:        {
    length: 0
  }
};

/*
  self.addEventListener('connect', callback, false);
  does not work
*/
onconnect = function(event) {

  //  ASSIGN PORT TO VAR POINTER
  var port = event.ports[0];

  //  INCREMENT CONNECTION COUNT
  Connection.count++;

  //  REPLY TO RENDERER, CONFIRMING CONNECTION
  port.postMessage({
    'connectionId'  : Connection.count
  });

  /*
    port.addEventListener('message', callback, false);
    does not work
  */
  //  SET UP LISTENER ON PORT
  port.onmessage = function(event) {

    //  STORE A REF TO THE CONNECTING RENDERER PAGE
    Connection.paths[Connection.count]  = event.data.pathName;
    Connection.paths.length++;

    //  UPDATE CONNECTION TO TRUE
    event.data.connected    = true;

    //  UPDATE WITH THIS CONNECTION ID
    event.data.connectionId = Connection.count;

    //  REPLY TO RENDERER
    port.postMessage(event.data);
  }


  //  REPORT CONNECTIONS
  setTimeout(function () {
    port.postMessage({
      'connections' : Connection.paths
    });
  }, 1000);
}
	<!DOCTYPE HTML>
	<html>
	<head>
	<script src="sharedworker.multi-connect.renderer.js"></script>
	</head>
	<body>
	<pre id="shared-worker-log"></pre>
	</body>
	</html>
	document.addEventListener('DOMContentLoaded', function () {

	var Share = {
	worker: (function () {
	// CREATE SHARED WORKER AND RETURN IT
	return new SharedWorker('sharedworker.multi-connect.worker.js');
	})(),
	logTo: document.getElementById('shared-worker-log'),
	reportTo: document.getElementById('shared-worker-connection-log')
	};


	// REFLECT Share OBJECT
	console.log(Share);

	// LISTEN ON THE SHAREDWORKER'S PORT FOR NEW MESSAGES
	Share.worker.port.addEventListener('message', function(event) {

	// INITIAL CONNECTION
	if ( event.data.connected ) {
	var workerLog = 'ConnectionId #' + event.data.connectionId +
	' ' + event.data.pathName +
	' - Connected: ' + event.data.connected ;

	// APPEND TO LOG FIELD
	Share.logTo.textContent += "\n" + workerLog;

	return;
	}

	// REPORTING CONNECTIONS TO SHARED WORKER
	if ( event.data.connections ) {
	var connectionPaths = event.data.connections;

	console.log('Total Connections: ' + connectionPaths.length);

	for ( var id in connectionPaths ) {

	if ( id !== 'length' ) {

	var connectionLog = '#' + id + ' ' + connectionPaths[id];

	// WRITE TO CONSOLE
	console.log( connectionLog );

	// APPEND TO REPORT FIELD
	Share.reportTo.textContent += "\n" + connectionLog;
	}
	}
	return;
	}


	}, false);

	// START THE CONNECTION TO SHAREDWORKER
	// REQUIRED WHEN USING "addEventListener()"
	Share.worker.port.start();
	// FIRE CONNECTING MESSAGE TO SHAREDWORKER
	Share.worker.port.postMessage({
	'pathName': location.pathname,
	'connected' : false
	});


	}, false);

	var Connection = {
	count: 0,
	isConnected: false,
	paths: {
	length: 0
	}
	};

	/*
	self.addEventListener('connect', callback, false);
	does not work
	*/
	onconnect = function(event) {

	// ASSIGN PORT TO VAR POINTER
	var port = event.ports[0];

	// INCREMENT CONNECTION COUNT
	Connection.count++;

	// REPLY TO RENDERER, CONFIRMING CONNECTION
	port.postMessage({
	'connectionId' : Connection.count
	});

	/*
	port.addEventListener('message', callback, false);
	does not work
	*/
	// SET UP LISTENER ON PORT
	port.onmessage = function(event) {

	// STORE A REF TO THE CONNECTING RENDERER PAGE
	Connection.paths[Connection.count] = event.data.pathName;
	Connection.paths.length++;

	// UPDATE CONNECTION TO TRUE
	event.data.connected = true;

	// UPDATE WITH THIS CONNECTION ID
	event.data.connectionId = Connection.count;

	// REPLY TO RENDERER
	port.postMessage(event.data);
	}


	// REPORT CONNECTIONS
	setTimeout(function () {
	port.postMessage({
	'connections' : Connection.paths
	});
	}, 1000);
	}