Broadcast Channel API

Broadcast Channel API

 

동일 origin의 브라우저 context 간 통신을 하게 해주는 API이다.

탭, 윈도우, 프레임, iframe 그리고 Web worker 간에 통신이 가능하다는데 소켓 같기도 하고 신기하다.

코드를 보면 정말 방송 송출 - 구독 개념으로 만들어놨다.

 

탭끼리 같은 이벤트나 변수를 사용해야한다면 (같은 계정 간 자동로그아웃 등) 

밑의 것들도 쓸 수 있다고 한다.

• Service Worker
• postMessage

 

Sender

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

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

 

Reciever

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

 

 

 

 

---

ref.

브라우저 탭 사이에서 통신하는 방법

 

Broadcast Channel API - Web APIs | MDN

Web APIs - 방송 채널 API 브로드캐스트 채널 API를 사용하면 브라우징 컨텍스트(즉, 창, 탭, 프레임