Xem qua API nhắn tin kênh

---

Service worker được tách biệt khỏi chuỗi JavaScript chính. Là một loại Web Worker đặc biệt, họ có chung những hạn chế. Làm thế nào để bạn giao tiếp trở lại chủ đề chính? Trình duyệt cung cấp cho ta API nhắn tin kênh . API này cho phép hai tập lệnh giao tiếp bằng cách chuyển các thông điệp đơn giản trên một kênh được chia sẻ.

Giao tiếp với iframe cũng rất hữu ích, nhưng ta sẽ tập trung vào trường hợp sử dụng worker trong bài đăng này.

Khởi tạo kênh

Bạn có thể tạo kênh bằng cú pháp sau:

const channel = new MessageChannel()

Trên đối tượng channel , thuộc loại MessageChannel , bạn có quyền truy cập vào hai cổng, port1 và port2 .

Ý chính là ở mỗi đầu kênh lắng nghe trên một cổng và bạn gửi tin nhắn đến cổng kia.

Khi bạn tạo một kênh, bạn sẽ gửi tin nhắn của bạn đến port2 .

Gửi tin nhắn qua kênh

Bạn gửi tin nhắn qua kênh bằng phương thức postMessage() , phương thức này được cung cấp trên đối tượng window nếu tập lệnh đang chạy trong trình duyệt:

const data = { color: 'green' }
const channel = new MessageChannel()
window.postMessage(data, [channel.port2])

Nghe tin nhắn đến ở đầu nhận

Vào cuối nhận, trong một Worker Dịch vụ ví dụ, bạn thêm một người biết lắng nghe trên self , một thế giới mà công nhân phải truy cập tự:

self.addEventListener('message', event => {
  console.log('Incoming message')
})

Đối tượng event được truyền dưới dạng tham số chứa dữ liệu được đính kèm với sự kiện này trong thuộc tính data :

self.addEventListener('message', event => {
  console.log('Incoming message')
  console.log(event.data)
})

Gửi lại tin nhắn

Để gửi lại tin nhắn, trong trình xử lý sự kiện, ta có quyền truy cập vào cổng khác bằng cách tham chiếu event.ports[0] .

Trên đối tượng này, ta có thể gọi postMessage() và đăng lại dữ liệu bổ sung:

self.addEventListener('message', event => {
  console.log('Incoming message')
  console.log(event.data)

  const data = { shape: 'rectangle' }
  event.ports[0].postMessage(data)
})

Nhận tin nhắn với quyền là người gửi

Người gửi có quyền truy cập vào đối tượng kênh mà nó đã tạo, vì vậy nó có thể đính kèm một trình xử lý onmessage vào đối tượng message.port1 :

channel.port1.onmessage = event => {
  console.log(event.data)
}

Bạn có thể gửi loại tin nhắn nào?

Trong postMessage() bạn có thể gửi bất kỳ kiểu dữ liệu JavaScript cơ bản nào. Điều này nghĩa là boolean, chuỗi, số và đối tượng. Bạn có thể sử dụng mảng để truyền nhiều đối tượng.

---

---

Các tin liên quan