Shared Worker with Multiple Pages

This example demonstrates how to create a shared worker that is accessed by multiple pages in JavaScript.

SharedWorkerPages.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>XoaX.net's Workers Demo</title>
		<style type="text/css">
			iframe {
				width: 500px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<span>Pages may load out of order.<br />
			Right-click a frame and select <b>Reload frame</b> to refresh it.</span>
		<div><iframe src="Page.html"></iframe></div>
		<div><iframe src="Page.html"></iframe></div>
		<div><iframe src="Page.html"></iframe></div>
		<div><iframe src="Page.html"></iframe></div>
	</body>
</html>

Page.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>XoaX.net's Workers Demo</title>
		<script type="text/javascript">
			function Initialization() { 
				var qSharedWorker = new SharedWorker("SharedWorkerPages.js");
				var qOutput = document.getElementById('idOutput');
				qSharedWorker.port.addEventListener('message', function(e) {
					qOutput.textContent  += e.data;
				});
				// Required for addEventListener
				qSharedWorker.port.start();
				let dRandom = Math.random();
				qOutput.textContent += "Sent " + dRandom + "\n";
				qSharedWorker.port.postMessage('XoaX.net ' + dRandom);
			}
		</script>
		<style type="text/css">
			#idOutput {
				color: lime;
				background-color: black;
				border: 1px solid black;
				padding: 5px;
				margin: 5px;
				float: left;
			}
		</style>
	</head>
	<body onload="Initialization()">
		<pre id="idOutput">Received: </pre>
	</body>
</html>

SharedWorkerPages.js

// NOTE: THIS REQUIRES A WEB SERVER TO RUN
var iCount = 0;
onconnect = function(e) {
	++iCount;
	var qPort = e.ports[0];
	qPort.postMessage('Hello Page '+iCount+' from worker!\n');
	qPort.onmessage = function(e) {
		e.target.postMessage('Message received and sent back: ' + e.data);
	}
}