Share your knowledge: HTML5 Web Workers demo

	<!DOCTYPE html>
	<html>
	<!-- This demo only works in you serve the files from tomcat or any other webserver -->
	<head>
	<title>Webworker demo</title>
	<script data-main="scripts/app" src="scripts/require.js"></script>
	</head>
	<body>
	<div><button id="mean">get mean</button></div>
	<div><button id="max">get max</button></div>
	</body>
	</html>

view raw gistfile1.html hosted with ❤ by GitHub

	/** data.js

	// data generated using http://repl.it/languages/JavaScript
	var numbers = [];
	for (var i =0; i < 1000; i++) {
	numbers.push(Math.round(Math.random() * 1000));
	}
	console.log(JSON.stringify(numbers));
	**/
	define({
	"numbers": [375,797,951,183,732,780,599,597,156,446,156,100,58,459,866,334,601,143,708,651,21,56,970,722,832,939,212,1,182,992,183,617,304,612,525,7,432,23,291,525,612,400,139,47,292,974,366,233,456,91,785,618,200,382,514,983,592,467,46,860,608,680,171,450,65,13,949,942,966,563,808,385,305,16,98,231,684,241,440,683,122,610,495,833,34,173,909,391,259,182,663,755,312,425,520,208,547,568,185,31,970,842,775,450,939,395,895,927,598,727,922,327,88,570,196,521,45,961,325,845,389,747,271,540,829,587,357,965,281,607,543,276,141,296,802,165,75,16,987,423,772,395,199,293,6,14,815,199,707,711,729,790,771,606,74,926,358,651,116,915,863,850,623,449,331,95,64,371,311,669,325,666,730,591,638,275,887,561,472,383,120,972,713,849,761,722,561,236,771,256,494,40,523,711,428,111,25,439,108,202,31,896,636,475,314,563,509,696,908,139,249,604,410,540,756,203,229,943,77,599,290,695,161,880,930,624,808,296,633,105,871,457,804,218,187,417,893,883,539,324,807,122,896,356,318,907,110,272,228,648,427,1,818,353,861,305,7,165,511,534,417,485,222,692,120,269,338,244,943,168,323,219,519,558,703,404,364,65,972,254,962,247,252,696,497,712,301,148,285,998,37,267,610,977,503,411,51,33,279,345,908,634,240,681,145,531,489,448,986,553,242,593,672,81,762,370,238,242,728,803,368,470,632,983,634,399,536,816,90,798,835,151,321,508,187,696,41,858,591,326,678,220,17,711,512,810,226,349,645,96,174,941,691,398,387,518,937,838,138,676,341,735,113,209,925,541,877,696,258,229,660,175,817,982,555,517,530,261,242,996,93,965,897,558,900,883,633,189,339,279,349,700,726,847,897,856,887,405,780,888,642,851,84,936,162,785,899,669,606,581,9,372,101,940,664,974,5,284,161,305,549,486,692,448,652,994,224,176,712,18,237,494,325,179,746,366,650,744,849,721,658,308,568,543,94,509,368,636,265,250,244,590,973,979,393,487,892,906,631,434,795,350,503,645,577,669,493,864,195,230,722,499,281,572,24,769,645,44,177,995,940,470,954,280,915,883,370,748,15,953,928,331,428,553,967,572,964,980,853,75,294,306,385,191,851,268,317,485,169,373,557,395,936,844,696,930,570,70,97,209,615,671,990,359,140,254,518,295,877,323,741,849,697,137,702,709,359,553,294,297,809,420,810,256,867,612,913,82,511,5,502,628,798,194,650,71,702,397,796,51,890,887,338,28,376,579,94,438,578,672,36,328,466,155,543,982,287,839,591,860,31,250,37,39,823,303,360,537,127,327,522,828,770,272,216,965,623,457,85,842,52,194,531,411,541,700,637,138,726,133,976,970,516,715,323,41,795,399,271,434,439,744,78,251,25,184,963,81,836,428,696,688,409,58,173,915,156,442,250,240,549,94,715,183,660,935,280,638,955,517,738,657,554,436,612,730,420,48,248,566,356,159,758,120,14,342,116,92,46,94,41,311,855,980,704,175,474,17,98,763,492,807,473,346,173,465,434,650,399,48,616,949,635,887,45,261,375,15,626,933,503,501,856,539,659,684,163,616,71,944,642,944,27,867,586,636,940,801,575,677,388,573,643,129,458,811,546,821,941,626,386,820,961,651,905,207,196,274,69,215,101,377,18,39,94,618,683,337,71,656,319,385,845,682,23,341,814,261,282,496,118,693,697,348,629,937,877,39,735,418,803,968,282,548,177,423,751,569,807,576,991,732,413,128,372,250,776,581,341,867,931,562,858,239,429,680,751,740,755,238,103,378,903,534,505,497,826,390,320,298,896,100,389,53,11,959,905,847,91,355,319,957,950,677,951,483,573,493,632,83,448,92,293,602,329,554,673,213,752,946,792,781,790,113,91,931,494,974,58,996,550,56,442,737,888,546,351,706,117,969,143,688,762,837,618,867,101,838,84,426,701,223,73,397,822,892,706,147,81,513,85,233,987,581,374,863,371,880,813,237,947,908,986,592,753,350,376,708,84,482,777,378,558,705,424,249,906,330,111,434,493,254,11,405,469,571,56,741,119,767,118,823,649,744,746,681,583,238,962,400,375,478,286,83,869,528,224,436,963,802,12,978,970,556,43,323,891,43,528,925,993,919,74,253,554,695,969,75,523,166,629,217,696,294,455,996,628,697,584,384,901,737,45,915,281,959,950,58,890,395,456,107,620,336,277,170,188,647,464,388,353,229,584,266,78,360,974,260,986,453]
	});

view raw gistfile1.js hosted with ❤ by GitHub

	/ mathworker.js /

	function max(numbers) {
	return Math.max.apply(Math, numbers);
	}

	function mean(numbers) {
	var sum = numbers.reduce(function(acc, num){ return acc + num; }, 0);
	return sum / numbers.length;
	}

	onmessage = function(event) {
	var message = event.data;
	var command = message.command;
	var numbers = message.numbers;
	switch (command) {
	case "max":
	postMessage("The max number is " + max(numbers));
	break;
	case "mean":
	postMessage("The mean of these numbers is " + mean(numbers));
	break;
	default:
	postMessage("Unknown command issued!!");
	break;
	}
	}

view raw gistfile1.js hosted with ❤ by GitHub

	require.config({
	baseUrl: 'scripts',
	paths: {
	// the left side is the module ID,
	// the right side is the path to
	// the jQuery file, relative to baseUrl.
	// Also, the path should NOT include
	// the '.js' file extension. This example
	// is using jQuery 2.1.0 located at
	// scripts/jquery-2.1.0.min.js, relative to
	// the HTML page.
	jquery: 'jquery-2.1.0.min'
	}
	});

	requirejs(["jquery","./data"], function($, staticdata) {

	function createMathWorker() {
	var worker = new Worker("scripts/mathworker.js");
	worker.onmessage = function(e) {
	alert(e.data);
	}
	return worker;
	}


	function getValue(event) {
	var numbers = staticdata.numbers;
	var command = event.data.command;
	console.log("dispatching calculating " + command + " to worker");
	var message = { "command": command, "numbers": numbers};
	worker.postMessage(message);
	}

	var worker = createMathWorker();
	$("#max").on("click", {"command": "max"}, getValue);
	$("#mean").on("click", {"command": "mean"}, getValue);
	});

view raw gistfile1.js hosted with ❤ by GitHub

Share your knowledge

Saturday, April 12, 2014

HTML5 Web Workers demo

1 comment: