Fork me on GitHub

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
<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();

请我喝一个苹果味的美年达吧,谢谢!