numberoverzero/worker-transferrable.html

## worker-transferrable.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
</head>
<body>
  <div>Transferring an array</div>
  <button id='bPopulate' onclick='populateArray()'>Populate Array</button>
  <button id='bSend' onclick='sendArray()'>Send Array</button>
  <div id='output'></div>

  <script id='worker' type='javascript/worker'>
    // Runs on worker
    function send(object) {
      self.postMessage(object);
    }
    function receive(obj) {
      var buf = obj.transfer;
      var view = new Uint8Array(buf);

      var response = {
        byteLength: view.length,
        firstByte: view[0],
        string: obj.string
      };
      send(response);
    }

    self.onmessage = function(e) { receive(e.data); };
  </script>

  <script id='main'>
    // Data
    var sizeInMB = 64;
    var arrayBuffer = new ArrayBuffer(sizeInMB  * 1024 * 1024);
    var arrayBufferView = new Uint8Array(arrayBuffer);

    // Input stuff
    function reflow(elt){ elt.offsetHeight; }

    var output = document.getElementById('output');
    function log(text) {
      output.innerHTML = output.innerHTML + '<div><code>' + text + '</code></div>';
      reflow(output);
    }
    var bPopulate = document.getElementById('bPopulate');
    var bSend = document.getElementById('bSend');
    bPopulate.focus();

    function populateArray() {
      log('main$ creating ' + sizeInMB + 'MB arrayBuffer...');
      // Use timeout to allow reflow so previous log flushes
      // before populating
      setTimeout(function(){
        populate();
        log('main$ complete! first byte is ' + arrayBufferView[0]);
        log('-------------------------');
        bSend.focus();
      }, 15);
    }

    function sendArray() {
      log('main$ arrayBuffer.byteLength = ' + arrayBuffer.byteLength)
      transfer({string: 'otherField', transfer: arrayBuffer});
      log('main$ transferred arrayBuffer');
      log('main$ arrayBuffer.byteLength = ' + arrayBuffer.byteLength);
    }

    // Worker stuff
    var blob = new Blob([document.querySelector('#worker').textContent]);
    var worker = new Worker(window.URL.createObjectURL(blob));

    function transfer(obj) {
      log("main->worker$ " +'{"transfer":'+obj.transfer + ',"string":"'+obj.string+'}');
      worker.postMessage(obj, [obj.transfer]);
    }
    function receive(obj) {
      log('worker->main$ ' + JSON.stringify(obj));
      log('-------------------------');
    }
    worker.onmessage = function(e) { receive(e.data); };

    // Util
    function populate() {
      var r = function() { return Math.floor(Math.random()*256);}; // random byte
      for(var i =0; i < arrayBufferView.length; i++) {
        arrayBufferView[i] = r();
      }
    }
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	</head>
	<body>
	<div>Transferring an array</div>
	<button id='bPopulate' onclick='populateArray()'>Populate Array</button>
	<button id='bSend' onclick='sendArray()'>Send Array</button>
	<div id='output'></div>

	<script id='worker' type='javascript/worker'>
	// Runs on worker
	function send(object) {
	self.postMessage(object);
	}
	function receive(obj) {
	var buf = obj.transfer;
	var view = new Uint8Array(buf);

	var response = {
	byteLength: view.length,
	firstByte: view[0],
	string: obj.string
	};
	send(response);
	}

	self.onmessage = function(e) { receive(e.data); };
	</script>

	<script id='main'>
	// Data
	var sizeInMB = 64;
	var arrayBuffer = new ArrayBuffer(sizeInMB * 1024 * 1024);
	var arrayBufferView = new Uint8Array(arrayBuffer);

	// Input stuff
	function reflow(elt){ elt.offsetHeight; }

	var output = document.getElementById('output');
	function log(text) {
	output.innerHTML = output.innerHTML + '<div><code>' + text + '</code></div>';
	reflow(output);
	}
	var bPopulate = document.getElementById('bPopulate');
	var bSend = document.getElementById('bSend');
	bPopulate.focus();

	function populateArray() {
	log('main$ creating ' + sizeInMB + 'MB arrayBuffer...');
	// Use timeout to allow reflow so previous log flushes
	// before populating
	setTimeout(function(){
	populate();
	log('main$ complete! first byte is ' + arrayBufferView[0]);
	log('-------------------------');
	bSend.focus();
	}, 15);
	}

	function sendArray() {
	log('main$ arrayBuffer.byteLength = ' + arrayBuffer.byteLength)
	transfer({string: 'otherField', transfer: arrayBuffer});
	log('main$ transferred arrayBuffer');
	log('main$ arrayBuffer.byteLength = ' + arrayBuffer.byteLength);
	}

	// Worker stuff
	var blob = new Blob([document.querySelector('#worker').textContent]);
	var worker = new Worker(window.URL.createObjectURL(blob));

	function transfer(obj) {
	log("main->worker$ " +'{"transfer":'+obj.transfer + ',"string":"'+obj.string+'}');
	worker.postMessage(obj, [obj.transfer]);
	}
	function receive(obj) {
	log('worker->main$ ' + JSON.stringify(obj));
	log('-------------------------');
	}
	worker.onmessage = function(e) { receive(e.data); };

	// Util
	function populate() {
	var r = function() { return Math.floor(Math.random()*256);}; // random byte
	for(var i =0; i < arrayBufferView.length; i++) {
	arrayBufferView[i] = r();
	}
	}
	</script>

	</body>
	</html>
No results found