gears/sdk/samples/hello_world_workerpool.html

   1 <!--
   2 Copyright 2007, Google Inc.
   3
   4 Redistribution and use in source and binary forms, with or without
   5 modification, are permitted provided that the following conditions are met:
   6
   7  1. Redistributions of source code must retain the above copyright notice,
   8     this list of conditions and the following disclaimer.
   9  2. Redistributions in binary form must reproduce the above copyright notice,
  10     this list of conditions and the following disclaimer in the documentation
  11     and/or other materials provided with the distribution.
  12  3. Neither the name of Google Inc. nor the names of its contributors may be
  13     used to endorse or promote products derived from this software without
  14     specific prior written permission.
  15
  16 THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR IMPLIED
  17 WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
  18 MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
  19 EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  20 SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  21 PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
  22 OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
  23 WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
  24 OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
  25 ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  26 -->
  27
  28 <!DOCTYPE html>
  29
  30 <html>
  31 <head>
  32 <title>Google Gears WorkerPool Demo</title>
  33 <link rel="stylesheet" type="text/css" href="sample.css">
  34 <style>
  35
  36 p.results {
  37   margin: 4px;
  38 }
  39
  40 </style>
  41 </head>
  42
  43 <body onload="init()" id="theBody">
  44 <h1>Google Gears WorkerPool Demo</h1>
  45 <div id="view-source">&nbsp;</div>
  46
  47 <p id="status">
  48
  49 <p>
  50 <table>
  51 <tr>
  52 <td valign=top>Interact with UI:</td>
  53 <td><input type="button" value="Interact" onclick="interact();">
  54 </td>
  55 <td></td>
  56 </tr>
  57 <tr>
  58 <td valign=top>Run expensive computation:</td>
  59 <td>
  60     <input type="button" id="syncButton"
  61            value="Synchronous" onclick="syncComputation();">
  62 </td>
  63 <td><i>Note the synchronous computation blocks UI interaction.</i>
  64 </td>
  65 </tr>
  66 <tr>
  67 <td>
  68 </td>
  69 <td>
  70     <input type="button" id="asyncButton"
  71            value="Asynchronous" onclick="asyncComputation();">
  72 </td>
  73 <td>
  74     <i>But you can still interact while the asynchronous computation
  75        runs in a JavaScript worker.</i>
  76 </td>
  77 </tr>
  78 </table>
  79
  80 <div id="results" style="font-size: 120%";>
  81 <p style="font-weight: bold;" class="results">Results
  82 </div>
  83
  84 <!-- ====================================== -->
  85 <!-- End HTML code.  Begin JavaScript code. -->
  86
  87 <script src="../gears_init.js"></script>
  88 <script src="sample.js"></script>
  89 <script>
  90
  91 function init() {
  92   insertRow('Hello, threaded JavaScript.');
  93   parentInit();
  94 }
  95
  96 function insertRow(message) {
  97   var results = getElementById('results');
  98   var id = 'message' + (childNodes(results).length + 1);
  99   results.innerHTML += '<p class="results" id="' + id + '">';
 100   setTextContent(getElementById(id), message);
 101 }
 102
 103 //
 104 // WorkerPool code
 105 //
 106
 107 var workerPool = null;
 108 var childId;
 109
 110 function parentInit() {
 111   if (!window.google || !google.gears) {
 112     return;
 113   }
 114
 115   try {
 116     workerPool =
 117         google.gears.factory.create('beta.workerpool');
 118   } catch (e) {
 119     document.getElementById('asyncButton').disabled = true;
 120     setError('Could not create workerpool: ' + e.message);
 121     return;
 122   }
 123
 124   // set the parent's message handler
 125   workerPool.onmessage = parentHandler;
 126
 127   // setup the entire body of JavsScript code to run in the worker
 128   var childCode = String(childInit) +
 129                   String(childHandler) +
 130                   'childInit();';  // runs init function
 131
 132   // create the worker
 133   try {
 134    childId = workerPool.createWorker(childCode);
 135   } catch (e) {
 136    setError('Could not create worker: ' + e.message);
 137   }
 138
 139   // Child workers will always set onmessage before createWorker() returns.
 140   insertRow('Parent initialized.');
 141 }
 142
 143 function parentHandler(msg, sender) {
 144   insertRow('Asynchronous result: ' + msg);
 145 }
 146
 147
 148 function childInit() {
 149   google.gears.workerPool.onmessage = childHandler;
 150 }
 151
 152 function childHandler(msg, sender) {
 153
 154   var cmd = msg.substr(0, 4);
 155   var arg = msg.substr(5);
 156   if (cmd == 'fibo') {
 157     var result = fibonacci(arg);
 158     google.gears.workerPool.sendMessage(String(result), sender);
 159   } else if (cmd == 'iden') {
 160     var result = identity(arg);
 161     google.gears.workerPool.sendMessage(String(result), sender);
 162   } else {
 163     google.gears.workerPool.sendMessage('Unknown command.', sender);
 164   }
 165
 166   function fibonacci(n) {
 167     var result = 1;
 168     var prevResult = 0;
 169     while (n > 0) {
 170       var temp = result;
 171       result += prevResult;
 172       prevResult = temp;
 173       n--;
 174     }
 175     return result;
 176   }
 177
 178   function identity(n) {
 179     var result = 0;
 180     while (n > 0) {
 181       result += 1;
 182       var tempString = 'abc' + '123';  // for slowdown
 183       n--;
 184     }
 185     return result;
 186   }
 187
 188 }
 189
 190 //
 191 // UI-related functions
 192 //
 193
 194 var uiToggleState = 0;
 195 function interact() {
 196   if (uiToggleState) {
 197     getElementById('theBody').style.backgroundColor = '#FFFFFF';
 198     uiToggleState = 0;
 199   } else {
 200     getElementById('theBody').style.backgroundColor = '#CCCCCC';
 201     uiToggleState = 1;
 202   }
 203 }
 204
 205 function asyncComputation() {
 206   if (workerPool) {
 207     var message = 'iden:2501234';
 208     workerPool.sendMessage(message, childId);
 209   }
 210 }
 211
 212 function syncComputation() {
 213   var result = identity(2501234);
 214   insertRow('Synchronous result: ' + String(result));
 215
 216   function identity(n) {
 217     var result = 0;
 218     while (n > 0) {
 219       result += 1;
 220       var tempString = 'abc' + '123';  // for slowdown
 221       n--;
 222     }
 223     return result;
 224   }
 225 }
 226
 227 </script>
 228 </body>
 229 </html>