Worker: phương thức postMessage()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Note: This feature is available in Web Workers, except for Service Workers.
Phương thức postMessage() của giao diện Worker gửi một thông điệp tới worker. Tham số đầu tiên là dữ liệu cần gửi tới worker. Dữ liệu có thể là bất kỳ đối tượng JavaScript nào có thể được xử lý bởi thuật toán structured clone.
Phương thức postMessage() của Worker ủy quyền cho phương thức postMessage() của MessagePort, thêm một tác vụ vào vòng lặp sự kiện tương ứng với MessagePort nhận.
Worker có thể gửi lại thông tin tới thread đã sinh ra nó bằng cách sử dụng phương thức DedicatedWorkerGlobalScope.postMessage.
Cú pháp
postMessage(message)
postMessage(message, transfer)
postMessage(message, options)
Tham số
message-
Đối tượng cần gửi tới worker; dữ liệu này sẽ nằm trong trường
datacủa event được gửi tới eventmessage. Đây có thể là bất kỳ giá trị hoặc đối tượng JavaScript nào được xử lý bởi thuật toán structured clone, bao gồm các tham chiếu tuần hoàn.Tham số
messagelà bắt buộc. Nếu dữ liệu cần truyền tới worker không quan trọng,nullhoặcundefinedphải được truyền một cách rõ ràng. transferOptional-
Một mảng tùy chọn các đối tượng có thể chuyển quyền để chuyển quyền sở hữu. Quyền sở hữu của các đối tượng này được chuyển sang phía nhận và chúng không còn khả dụng ở phía gửi. Các đối tượng có thể chuyển quyền này nên được gắn vào thông điệp; nếu không chúng sẽ được di chuyển nhưng thực sự không thể truy cập ở đầu nhận.
optionsOptional-
Một đối tượng tùy chọn chứa các thuộc tính sau:
transferOptional-
Có cùng ý nghĩa với tham số
transfer.
Giá trị trả về
Không có (undefined).
Ví dụ
Đoạn mã sau hiển thị việc tạo một đối tượng Worker bằng cách sử dụng hàm tạo Worker(). Khi một trong hai input của form (first và second) có giá trị thay đổi, các event change gọi postMessage() để gửi giá trị của cả hai input tới worker hiện tại.
const myWorker = new Worker("worker.js");
[first, second].forEach((input) => {
input.onchange = () => {
myWorker.postMessage([first.value, second.value]);
console.log("Message posted to worker");
};
});
Để biết ví dụ đầy đủ, xem ví dụ worker đơn giản (chạy ví dụ).
Note:
postMessage() chỉ có thể gửi một đối tượng tại một thời điểm. Như đã thấy ở trên, nếu bạn muốn truyền nhiều giá trị, bạn có thể gửi một mảng.
Ví dụ Transfer
Ví dụ tối thiểu này có main tạo một ArrayBuffer và chuyển nó tới myWorker, sau đó myWorker chuyển nó trở lại main, với kích thước được ghi lại ở mỗi bước.
Mã main.js
// tạo worker
const myWorker = new Worker("myWorker.js");
// lắng nghe myWorker chuyển buffer trở lại main
myWorker.addEventListener("message", (msg) => {
console.log("message from worker received in main:", msg);
const bufTransferredBackFromWorker = msg.data;
console.log(
"buf.byteLength in main AFTER transfer back from worker:",
bufTransferredBackFromWorker.byteLength,
);
});
// tạo buffer
const myBuf = new ArrayBuffer(8);
console.log(
"buf.byteLength in main BEFORE transfer to worker:",
myBuf.byteLength,
);
// gửi myBuf tới myWorker và chuyển ArrayBuffer cơ bản
myWorker.postMessage(myBuf, [myBuf]);
console.log(
"buf.byteLength in main AFTER transfer to worker:",
myBuf.byteLength,
);
Mã myWorker.js
// lắng nghe main chuyển buffer tới myWorker
self.onmessage = (msg) => {
console.log("message from main received in worker:", msg);
const bufTransferredFromMain = msg.data;
console.log(
"buf.byteLength in worker BEFORE transfer back to main:",
bufTransferredFromMain.byteLength,
);
// gửi buf trở lại main và chuyển ArrayBuffer cơ bản
self.postMessage(bufTransferredFromMain, [bufTransferredFromMain]);
console.log(
"buf.byteLength in worker AFTER transfer back to main:",
bufTransferredFromMain.byteLength,
);
};
Output được ghi lại
buf.byteLength in main BEFORE transfer to worker: 8 main.js:19
buf.byteLength in main AFTER transfer to worker: 0 main.js:27
message from main received in worker: MessageEvent { ... } myWorker.js:3
buf.byteLength in worker BEFORE transfer back to main: 8 myWorker.js:7
buf.byteLength in worker AFTER transfer back to main: 0 myWorker.js:15
message from worker received in main: MessageEvent { ... } main.js:6
buf.byteLength in main AFTER transfer back from worker: 8 main.js:10
byteLength giảm xuống 0 sau khi ArrayBuffer được chuyển. Để biết ví dụ đầy đủ phức tạp hơn về việc transfer ArrayBuffer, xem Firefox demo add-on này: GitHub :: ChromeWorker - demo-transfer-arraybuffer
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # dom-worker-postmessage-dev |
Tương thích trình duyệt
Xem thêm
- Giao diện
Workermà nó thuộc về.