WebWorker通信

发表于 更新于
生活就是这样， 在你最糟的时候，会遇到最好的人。

Web Worker是什么

Web Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。Web Worker 规范中定义了两类工作线程，分别是专用线程Dedicated Worker和共享线程 Shared Worker，其中，Dedicated Worker只能为一个页面所使用，而Shared Worker则可以被多个页面所共享，本文示例为专用线程Dedicated Worker。
web worker 是运行在后台的 JavaScript，不会影响页面的性能。

例子一: 简单通信

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/socket.io/1.7.2/socket.io.min.js"></script>
    <title></title>
</head>
<body>

</body>
<script>

var worker = new Worker("task.js");
worker.postMessage(
        {
id:1,
msg:'Hello World'
}
    );
worker.onmessage=function(message){
var data = message.data;
console.log(JSON.stringify(data));
worker.terminate();
};
worker.onerror=function(error){
console.log(error.filename,error.lineno,error.message);
}
</script>
</html>

task.js

1
2
3
4
5
onmessage= function(message){
var data=message.data;
data.msg = 'Hi from task.js';
postMessage(data);
}

例子二: 计数功能

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
var worker = new Worker("task.js");
worker.onmessage=function(message){
var data = message.data;
console.log(JSON.stringify(data));
//终止woker
        //worker.terminate();
};
worker.onerror=function(error){
console.log(error.filename,error.lineno,error.message);
}
</script>

task.js

1
2
3
4
5
6
7
8
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();