Download to read offline
![//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');](https://image.slidesharecdn.com/jsmulti-130225052710-phpapp01/75/Web-Workers-21-2048.jpg)
![Workerスクリプト
//コネクション数のカウント
var connect = 0;
//受信メソッド
onconnect = function(e){
connection++;
e.ports[0].postMessage("ports = " + connection);
}](https://image.slidesharecdn.com/jsmulti-130225052710-phpapp01/75/Web-Workers-25-2048.jpg)
Web Workers
- 1. JavaScriptで マルチスレッドプログラミング @kabochha
- 2. JavaScriptでマルチスレッド プログラミングをしたい
- 3. JavaScriptでマルチスレッド プログラミングをしたい ってわけでWebWorkerを試し てみよう！と
- 4. JavaScriptでマルチスレッド プログラミングをしたい ってわけでWebWorkerを試し てみよう！と 思ったんですが…
- 5. Web Workersとは 高負荷な計算処理などをUI以外のス レッドで実行するための機能
- 6. Web Workersとは 高負荷な計算処理などをUI以外のス レッドで実行するための機能 独立したスレッドなので、UI側のメ モリやCPUリソースに影響せずにタ スクを実行できる
- 7. Web Workerでできること navigatorオブジェクト locationオブジェクト（読み取り専用） XMLHttpRequest関数(Ajax) アプリケーションキャッシュ importScriptsを使ったJSONP その他のWeb Workersの生成 下記windowオブジェクト バイナリデータとBase64ASCⅡを相互変換する atob(),bota()にsetTimeout()、clearTimeout()、 setInterval()、clearInterval()、dump()
- 8.
- 9. 使いどころ 大きなJSONや文字列の処理 Canvasなどでのフィルタリング処理 動画や音声の解析、処理 複雑な計算（暗号化、3Dポジショニ ング、素数計算など) データの先読み、キャッシュ スペルチェックなどの構文解析 IndexedDBを用いたデータ処理
- 10.
- 11.
- 12. スマートフォンだと mobile Safariは5.0から Android Browerは2.1のみ Andorid Chromeは専有ワーカーのみ 対応
- 13. スマートフォンだと mobile Safariは5.0から Android Browerは2.1のみ mobile Chromeは専有ワーカーのみ対 応 というわけで現状だと使い にくい
- 14.
- 15. 専用ワーカー 自分自身を起動したスクリプトとの み通信できる
- 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’);
- 18. Worker素クリプト //メインスクリプトからのメッセージ受信用 メソッド onmessage = function(e){ //メインスクリプト側にメッセージを送る postMessage(“return : “ + e.data); };
- 19. インラインワーカー 動的にWorkerを生成したい Ⅰ枚のHTMLファイルで済ませたい Chromeの拡張機能としてバンドルし たい
- 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');
- 22. 共有ワーカー ユーザー認証や接続状況をⅠヶ所に まとめて参照できる 別window間のデータの一貫性を保証 する モデルをⅠつの場所に集めることが できる
- 23. 使い方 new SharedWorkerで生成 SharedWorker側はonmeaageではなく onconnectでメッセージ受信 EventLisntenerを使う場合、start()を 呼んでWorkerで始める
- 24. メインスクリプト //共有ワーカーを生成 var worker =new SharedWorker("sworker.js"); worker.port.onmessage = function(e){ console.log(e.data);// ports = xx }; //共有ワーカーにメッセージ送信 Worker.port.postMessage();
- 25. Workerスクリプト //コネクション数のカウント var connect =0; //受信メソッド onconnect = function(e){ connection++; e.ports[0].postMessage("ports = " + connection); }
- 26.
- 27.