Bài 47: Web Workers trong HTML5

Web workers là một đoạn mã JavaScript chạy ngầm, độc lập với các đoạn mã khác, không ảnh hưởng tới hiệu năng và tốc độ truy cập của trang web

Web workers là gì?

Khi bạn chạy một đoạn mã JavaScript trong trang HTML, trang này sẽ không có bất kỳ tương tác nào cho tới khi script này kết thúc.

Web workers là một đoạn mã JavaScript chạy ngầm, độc lập với các đoạn mã khác, không ảnh hưởng tới hiệu năng và tốc độ truy cập của trang web. Trong khi web workers đang hoạt động, bạn có thể thao tác bất kì kỳ điều gì bạn muốn: nhấn chuột, bôi đen nội dung, v.v..

Trình duyệt hỗ trợ

Dưới đây là bảng danh sách một số phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho Web Workers.

API
Web Workers	4.0	10.0	3.5	4.0	11.5

Ví dụ web workers trong HTML

Dưới đây là ví dụ đơn giản về việc tạo mới một web worker, nó được sử dụng để đếm số ngầm phía sau trang web:

Ví dụ:


<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<p><strong>Note:</strong> Internet Explorer 9 và các phiên bản trước không hỗ trợ Web Workers.</p>

<script>
var w;

function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Xin lỗi, trình duyệt của bạn không hỗ trợ Web Workers...";
}
}

function stopWorker() {
w.terminate();
w = undefined;
}
</script>

</body>
</html>

Kiểm tra trình duyệt hỗ trợ web workers

Trước khi tạo mới một web worker, bạn nên kiểm tra xem trình duyệt mà mình sửa dụng có hỗ trợ web worker hay không:


if (typeof(Worker) !== "undefined") {
// Có! Web worker được hỗ trợ bởi trình duyệt!
// Viết code ở đây.....
} else {
// Xin lỗi! Web Worker không được hỗ trợ.
}

Tạo mới một file web workers

Tiếp theo, để tạo mới một web worker bạn hãy tạo một tệp tin JavaScript.

Tệp tin mà chúng ta tạo sẽ được sử dụng để đếm số.Tệp tin được đặt tên là:”demo_workers.js”:


var i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

Phần quan trọng nhất của đoạn mã bên trên là hàm postMessage() – nó được sử dụng để gửi nội dung thông báo ngược lại trang HTML mà chúng ta đang chạy.

Lưu ý: Thông thường web worker không sử dụng để thực hiện những đoạn mã đơn giản như thế này mà thường dùng vào những công việc phức tạp hơn.

Tạo mới một đối tượng web workers

Sau khi tạo mới một file web worker, chúng ta cần gọi nó đến trang web HTML .

Đoạn mã dưới đây sẽ kiểm tra xem chúng ta đã chạy Web Worker hay chưa, nếu chưa – nó sẽ tạo ra một web worker mới và chạy đoạn mã được chứa trong tệp tin “demo_workers.js”:


if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}

Với đoạn mã trên chúng ta sẽ gửi và nhận được thông báo từ web worker.

Thêm một sự kiện “onmessage” để nhận các thông điệp từ web worker.


w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};

Khi web worker gửi nội dung về trang HTML, đoạn mã trên sẽ tự động được chạy. Dữ liệu gửi đến được lưu trữ trong event.data.

Dừng hoạt động của web workers

Khi một web worker được tạo mới, nó sẽ tiếp tục lắng nghe các thông báo (ngay cả khi đã chạy xong đoạn mã javascript) tới khi bị dừng hoạt động.

Để dừng web worker, giải phóng tài nguyên cho trình duyệt và máy tính, bạn sử dụng hàm terminate():


w.terminate();

Sử dụng lại web workers

Nếu bạn thiết lập web worker thành: undefined, thì sau khi bạn dừng hoạt động, bạn có thể tái sử dụng lại đoạn code:


w = undefined;

Ví dụ code hoàn chỉnh của web workers

Dưới đây là đoạn mã ví dụ hoàn chỉnh về Web Worker:

Ví dụ:


<!DOCTYPE html>
<html>
<body><p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button><p><strong>Note:</strong> Internet Explorer 9 và các phiên bản trở về trước không hỗ trợ Web Workers.</p><script>
var w;function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Xin lỗi, trình duyệt của bạn không hỗ trợ Web Workers...";
}
}

function stopWorker() {
w.terminate();
w = undefined;
}
</script>

</body>
</html>

Xem kết quả