BroadcastChannel: message event

Baseline Widely available

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

message 이벤트는 해당되는 채널에 메시지가 도착할 시, BroadcastChannel 객체에서 발생합니다.

구문

addEventListener() 같은 메서드에서 이벤트 이름을 사용하거나, 이벤트 처리기 속성을 설정하세요.

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

이벤트 타입

MessageEvent. Event를 상속합니다.

이벤트 속성

아래 나열된 속성 외에도, 부모 인터페이스인 Event의 속성들을 사용할 수 있습니다.

data 읽기 전용: 메시지 발신자가 보낸 데이터.
origin 읽기 전용: 메시지 발신자의 출처를 나타내는 문자열.
lastEventId 읽기 전용: 이벤트의 고유 ID를 나타내는 문자열.
source 읽기 전용: WindowProxy, MessagePort, 또는 ServiceWorker 객체 등 메시지 발신자를 나타내는 메시지 이벤트 출처.
ports 읽기 전용: 메시지가 전송되는 채널과 연결된 포트를 나타내는 MessagePort 객체의 배열(예: 체널 내 메시징, 공유된 맥락에 메시지를 보낼 때 등).

예제

이 예제에서는 사용자가 버튼을 클릭했을 때 <textarea>의 내용을 발신하는 "발신자" <iframe>과, 발신된 메시지를 수신하고 그 결과를 <div> 요소에 기록하는 "수신자" iframe이 있습니다.

발신자

<h1>Sender</h1>
<label for="message">Type a message to broadcast:</label><br />
<textarea id="message" name="message" rows="1" cols="40">Hello</textarea>
<button id="broadcast-message" type="button">Broadcast message</button>

body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 150px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}

textarea {
  padding: 0.2rem;
}

label,
br {
  margin: 0.5rem 0;
}

button {
  vertical-align: top;
  height: 1.5rem;
}

const channel = new BroadcastChannel("example-channel");
const messageControl = document.querySelector("#message");
const broadcastMessageButton = document.querySelector("#broadcast-message");

broadcastMessageButton.addEventListener("click", () => {
  channel.postMessage(messageControl.value);
});

수신자 1

<h1>Receiver 1</h1>
<div id="received"></div>

body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 100px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}

const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

수신자 2

<h1>Receiver 2</h1>
<div id="received"></div>

body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 100px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}

const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

결과

명세서

Specification
HTML Standard # event-message
HTML Standard # handler-broadcastchannel-onmessage

브라우저 호환성

BCD tables only load in the browser

같이 보기

연관된 이벤트: messageerror