EventSource: sự kiện message

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Note: This feature is available in Web Workers.

Sự kiện message của giao diện EventSource được kích hoạt khi dữ liệu được nhận qua một nguồn sự kiện.

Sự kiện này không thể hủy và không nổi bọt.

Cú pháp

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

js
addEventListener("message", (event) => { })

onmessage = (event) => { }

Kiểu sự kiện

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

Event MessageEvent

Thuộc tính sự kiện

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

MessageEvent.data Read only

Dữ liệu do bộ phát thông điệp gửi.

MessageEvent.origin Read only

Một chuỗi biểu thị origin của bộ phát thông điệp.

MessageEvent.lastEventId Read only

Một chuỗi biểu thị ID 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 bộ phát 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 được dùng để gửi thông điệp (nếu có, ví dụ trong channel messaging hoặc khi gửi thông điệp tới shared worker).

Ví dụ

Trong ví dụ cơ bản này, một EventSource được tạo để nhận sự kiện từ máy chủ; một trang có tên sse.php chịu trách nhiệm tạo ra các sự kiện đó.

js
const evtSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");

evtSource.addEventListener("message", (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
});

Tương đương với onmessage

js
evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};

Thông số kỹ thuật

Specification
HTML
# event-message
HTML
# handler-eventsource-onmessage

Tương thích trình duyệt

Xem thêm