[JavaScript] BroadcastChannel API

 

broadcastChannel API를 사용하면 동일 호스트의 탐색 컨텍스트(windows , tabs , frames, iframes)로 메시지 전송이 가능합니다.

채널에 게시되는 메시지는 해당 채널의 모든 수신자에게 전달됩니다.

BroadcastChannel생성자는 채널 이름을 매개변수로 받습니다.

메시징 프로토콜은 정의되어 있지 않으며 다양한 검색 컨텍스트에서 이를 자체적으로 구현해야합니다.

사용 방법

// 채널 생성 혹은 참여
const channel = new BroadcastChannel('channel_name');

// 메시지 발송
channel.postMessage('Hi~');

// 메시지 수신 핸들링
channel.onmessage = function(e) {
    console.log('Received', e.data);
};

// 채널 종료
channel.close();

예시 : 동일한 호스트의 다른 탭에서 사용자 작업을 감지하는 데 사용할 수 있습니다. (a 탭에서 로그아웃 시 b탭도 로그아웃 처리)

나는 a탭에서 설정 변경 시 다른탭에 전파가 필요해 사용했다.

 

MessageChannel API의 차이점

• Channel Messaging (1:1통신)
• BroadcastChannel (1:N통신)

참고 : 

https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel

https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

https://developer.chrome.com/blog/broadcastchannel?hl=ko#api_basics