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>
    <pre id="shared-worker-connection-log"></pre>
  </body>
</html>

## sharedworker.multi-connect.outer.html
<!DOCTYPE HTML>
<html>
  <head>
    <title>SharedWorker: Multiple Connections</title>
    <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 SW = {
  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 SW OBJECT
 console.log(SW);

 // LISTEN ON THE SHAREDWORKER'S PORT FOR NEW MESSAGES
 SW.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
   SW.logTo.textContent += "\n" + workerLog;

   return;
  }

  // REPORTED CONNECTION ID #
  if ( event.data.connectionId ) {
   console.log( event.data.connectionId );
  }


  // 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
     SW.reportTo.textContent += "\n" + connectionLog;
    }
   }
   return;
  }
 }, false);

 // START THE CONNECTION TO SHAREDWORKER
 // REQUIRED WHEN USING "addEventListener()"
 SW.worker.port.start();
 // FIRE CONNECTING MESSAGE TO SHAREDWORKER
 SW.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', function (event) {

 var port = event.ports[0];

 port.addEventListener('message', function (event) {


  // INCREMENT CONNECTION COUNT
  Connection.count++;

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

  // 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);


 }, false);

 // REQUIRES `start()` WHEN USING
 // `addEventListener` SYNTAX
 port.start();


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


}, false);
	<!DOCTYPE HTML>
	<html>
	<head>
	<script src="sharedworker.multi-connect.renderer.js"></script>
	</head>
	<body>
	<pre id="shared-worker-log"></pre>
	<pre id="shared-worker-connection-log"></pre>
	</body>
	</html>
	document.addEventListener('DOMContentLoaded', function () {

	var SW = {
	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 SW OBJECT
	console.log(SW);

	// LISTEN ON THE SHAREDWORKER'S PORT FOR NEW MESSAGES
	SW.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
	SW.logTo.textContent += "\n" + workerLog;

	return;
	}

	// REPORTED CONNECTION ID #
	if ( event.data.connectionId ) {
	console.log( event.data.connectionId );
	}


	// 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
	SW.reportTo.textContent += "\n" + connectionLog;
	}
	}
	return;
	}
	}, false);

	// START THE CONNECTION TO SHAREDWORKER
	// REQUIRED WHEN USING "addEventListener()"
	SW.worker.port.start();
	// FIRE CONNECTING MESSAGE TO SHAREDWORKER
	SW.worker.port.postMessage({
	'pathName': location.pathname,
	'connected' : false
	});
	}, false);
	var Connection = {
	count: 0,
	isConnected: false,
	paths: {
	length: 0
	}
	};

	self.addEventListener('connect', function (event) {

	var port = event.ports[0];

	port.addEventListener('message', function (event) {


	// INCREMENT CONNECTION COUNT
	Connection.count++;

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

	// 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);


	}, false);

	// REQUIRES `start()` WHEN USING
	// `addEventListener` SYNTAX
	port.start();


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


	}, false);