SharedWorkerGlobalScope: connect event

Cú pháp

Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.

addEventListener("connect", (event) => { })

onconnect = (event) => { }

Kiểu sự kiện

Một MessageEvent. Kế thừa từ Event.

Thuộc tính sự kiện

Giao diện này cũng kế thừa các thuộc tính từ giao diện cha của nó, Event.

MessageEvent.data Read only

Dữ liệu được gửi bởi thực thể phát ra thông điệp.

MessageEvent.origin Read only

Một chuỗi đại diện cho origin của thực thể phát ra thông điệp.

MessageEvent.lastEventId Read only

Một chuỗi đại diện cho mã định danh duy nhất của sự kiện.

MessageEvent.source Read only

Một MessageEventSource (có thể là đối tượng WindowProxy, MessagePort, hoặc ServiceWorker) đại diện cho thực thể phát ra thông điệp.

MessageEvent.ports Read only

Một mảng các đối tượng MessagePort đại diện cho các cổng liên kết với kênh đang dùng để gửi thông điệp qua đó (khi phù hợp, ví dụ trong channel messaging hoặc khi gửi thông điệp tới shared worker).

Ví dụ

Ví dụ này cho thấy một tệp shared worker - khi có kết nối tới worker từ luồng chính thông qua MessagePort, bộ xử lý sự kiện onconnect sẽ chạy. Đối tượng sự kiện là một MessageEvent.

Cổng kết nối có thể được tham chiếu thông qua tham số ports của đối tượng sự kiện; tham chiếu này có thể gắn một bộ xử lý onmessage để xử lý các thông điệp đi vào qua cổng, và phương thức postMessage() của nó có thể được dùng để gửi thông điệp ngược lại luồng chính bằng worker.

self.onconnect = (e) => {
  const port = e.ports[0];

  port.onmessage = (e) => {
    const workerResult = `Result: ${e.data[0] * e.data[1]}`;
    port.postMessage(workerResult);
  };

  port.start();
};

Để có ví dụ chạy hoàn chỉnh, xem Basic shared worker example (run shared worker).

Tương đương addEventListener

Bạn cũng có thể thiết lập một bộ xử lý sự kiện bằng phương thức addEventListener():

self.addEventListener("connect", (e) => {
  const port = e.ports[0];

  port.onmessage = (e) => {
    const workerResult = `Result: ${e.data[0] * e.data[1]}`;
    port.postMessage(workerResult);
  };
});

Thông số kỹ thuật

Khả năng tương thích với trình duyệt

Xem thêm

• Using web workers
• SharedWorkerGlobalScope