深入 HTML5 Web Worker 应用实践：多线程编程（3）工作线程（Web Worker）应用与实践2
|
- UID
- 1066743
|
深入 HTML5 Web Worker 应用实践：多线程编程（3）工作线程（Web Worker）应用与实践2
应用场景二：使用共享线程处理多用户并发连接由于线程的构建以及销毁都要消耗很多的系统性能，例如 CPU 的处理器调度，内存的占用回收等，在一般的编程语言中都会有线程池的概念，线程池是一种对多线程并发处理的形式，在处理过程中系统将所有的任务添加到一个任务队列，然后在构建好线程池以后自动启动这些任务。处理完任务后再把线程收回到线程池中，用于下一次任务调用。线程池也是共享线程的一种应用。
在 HTML5 中也引入了共享线程技术，但是由于每个共享线程可以有多个连接，HTML5 对共享线程提供了和普通工作线程稍微有些区别的 API 接口。下面我们提供几个例子来讲述对共享线程的用法。
下面我们给出一个例子：创建一个共享线程用于接收从不同连接发送过来的指令，然后实现自己的指令处理逻辑，指令处理完成后将结果返回到各个不同的连接用户。
清单 14. 共享线程用户连接页面代码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
30
31
32
33
34
35
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shared worker example: how to use shared worker in HTML5</title>
<script>
var worker = new SharedWorker('sharedworker.js');
var log = document.getElementById('response_from_worker');
worker.port.addEventListener('message', function(e) {
//log the response data in web page
log.textContent =e.data;
}, false);
worker.port.start();
worker.port.postMessage('ping from user web page..');
//following method will send user input to sharedworker
function postMessageToSharedWorker(input)
{
//define a json object to construct the request
var instructions={instruction:input.value};
worker.port.postMessage(instructions);
}
</script>
</head>
<body onload=''>
<output id='response_from_worker'>
Shared worker example: how to use shared worker in HTML5
</output>
send instructions to shared worker:
<input type="text" autofocus oninput="postMessageToSharedWorker(this);return false;">
</input>
</body>
</html>
|
清单 15. 用于处理用户指令的共享线程代码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
30
31
32
33
34
35
| // 创建一个共享线程用于接收从不同连接发送过来的指令，指令处理完成后将结果返回到各个不同的连接用户。
/*
* define a connect count to trace connecting
* this variable will be shared within all connections
*/
var connect_number = 0;
onconnect = function(e) {
connect_number =connect_number+ 1;
//get the first port here
var port = e.ports[0];
port.postMessage('A new connection! The current connection number is '
+ connect_number);
port.onmessage = function(e) {
//get instructions from requester
var instruction=e.data.instruction;
var results=execute_instruction(instruction);
port.postMessage('Request: '+instruction+' Response '+results
+' from shared worker...');
};
};
/*
* this function will be used to execute the instructions send from requester
* @param instruction
* @return
*/
function execute_instruction(instruction)
{
var result_value;
//implement your logic here
//execute the instruction...
return result_value
}
|
在上面的共享线程例子中，在主页面即各个用户连接页面构造出一个共享线程对象，然后定义了一个方法 postMessageToSharedWorker 向共享线程发送来之用户的指令。同时，在共享线程的实现代码片段中定义 connect_number 用来记录连接到这个共享线程的总数。之后，用 onconnect 事件处理器接受来自不同用户的连接，解析它们传递过来的指令。最后，定义一个了方法 execute_instruction 用于执行用户的指令，指令执行完成后将结果返回给各个用户。
这里我们并没有跟前面的例子一样使用到了工作线程的 onmessage 事件处理器，而是使用了另外一种方式 addEventListener。实际上，这两种的实现原理基本一致，只有有些稍微的差别，如果使用到了 addEventListener 来接受来自共享线程的消息，那么就要使用 worker.port.start() 方法来启动这个端口。之后就可以像工作线程的使用方式一样正常的接收和发送消息。 |
|
|
|
|
|
