Phát triển ứng dụng web

Lab. Web worker

Mỗi một iframe sau đây tải một trang và một web worker (dedicated hoặc shared). Các web worker thực hiện một công việc đơn giản là duy trì một bộ đếm (counter) và tăng bộ đếm lên 1 mỗi khi nhận được message từ trang.

Hãy nghiên cứu mã nguồn từng trang và web worker tương ứng với trang. Tiếp theo, hãy bấm vào nút <Increase> để tăng bộ đếm ở từng trang và quan sát kết quả phản hồi.

Ví dụ này cho thấy sự khác biệt giữa dedicated và shared worker. Hãy cho biết sự khác biệt đó là gì và giải thích?

Tạo một dedicated worker, kèm theo trang gọi worker, để cho phép người dùng chọn tệp ảnh. Ảnh được đưa xuống dedicated worker, worker xử lý ảnh rồi trả về cho trang để trang hiển thị ảnh đã qua xử lý. (Xem ví dụ mẫu)

Hãy chuyển đổi dedicated worker ở mục 2 thành shared worker, đồng thời sửa đổi trang ở mục 2 để làm việc với shared worker. Bổ sung một trang mới đọc dữ liệu (ảnh đã qua xử lý) từ shared worker và hiển thị lên giao diện.

Dedicated worker

Source code


//
// Main window
//

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>Dedicated worker 1</title>
 </head><body>
	<button class="inc">Increase</button>
	<span class="result"></span>
    <script>
		let worker = new Worker("dw.js");
		
		document.querySelector(".inc").onclick = function() {
			worker.postMessage("inc");
		};

		worker.onmessage = function(e) {
			document.querySelector(".result").innerHTML = e.data;
		};
    </script>
  </body>
</html>



//
// dw.js
//

let c = 0;
onmessage = function(e) {
	c++;
	postMessage(c);
};

iFrame 1: Dedicated worker 1

iFrame 2: Dedicated worker 2

Shared worker

Source code

//
// Main window
//

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>Shared worker</title>
 </head><body>
	<button class="inc">Increase</button>
	<span class="result"></span>
    <script>
		let worker = new SharedWorker("sw.js");
		
		document.querySelector(".inc").onclick = function() {
			worker.port.postMessage("inc");
		};

		worker.port.onmessage = function(e) {
			document.querySelector(".result").innerHTML = e.data;
		};
    </script>
  </body>
</html>


//
// sw.js
//

let c = 0;
onconnect = function(e) {
	let port = e.ports[0];
	port.onmessage = function(e) {
		c++;
		port.postMessage(c);
	};
}

iFrame 3: Shared worker 1

iFrame 4: Shared worker 2