More Related Content
Similar to Web Workers (20)
Web Workers
- 2. JavaScriptでマルチスレッド
プログラミングをしたい
- 7. Web Workerでできること
navigatorオブジェクト
locationオブジェクト（読み取り専用）
XMLHttpRequest関数(Ajax)
アプリケーションキャッシュ
importScriptsを使ったJSONP
その他のWeb Workersの生成
下記windowオブジェクト
バイナリデータとBase64ASCⅡを相互変換する
atob(),bota()にsetTimeout()、clearTimeout()、
setInterval()、clearInterval()、dump()
- 16. 使い方
1. Workerコンストラクタを呼び出す
2. Web workersが送ってくるメッセー
ジを受け取るメソッド(onmessage)
を用意
3. Workerの開始(postMessage)
4. Web Worker側でもonmessageと
postMessageを用意する
- 17. メインスクリプト
//Workerの生成
var worker = new Worker('work.js');
//Web Workerからのメッセージ受信用メソッド
worker.onmessage = function(e) {
console.log(e.data);//return Worker Started
};
// Worker スタート
worker.postMessage('Worker Started’);
- 20. 使い方
1. BlobBuilderとcreateObjectURLを
使ってWorker用ファイルを構築する
2. 1を使ってWorkerオブジェクトを生
成する
3. ごにょごにょする
- 21. //worker用のスクリプト生成
var str = "onmessage = function(e) { postMessage(‘return ’ +e.data); }”;
//blobオブジェクト生成
var blob = new Blob([str], {type:"text/javascript"});
//createObjectURLをChromeでもFirefoxでも使えるように
var myUrl = window.webkitURL || window.URL;
//ファイル生成
var blobURL = myUrl.createObjectURL(blob);
var worker = new Worker(blobURL);
worker.onmessage = function(e) {
console.log(e.data); // return Worker Started
};
worker.postMessage('Worker Started');
- 24. メインスクリプト
//共有ワーカーを生成
var worker = new SharedWorker("sworker.js");
worker.port.onmessage = function(e){
console.log(e.data);// ports = xx
};
//共有ワーカーにメッセージ送信
Worker.port.postMessage();
