서론
사내 AI 프로젝트를 고도화하던 중, 답변을 클릭하여 모달이 아닌 새로운 탭창에서 그래프를 보여줘야하는 로직이 있었습니다. 실시간으로 변하는 데이터를 탭에 전송해야 했기에 여러 방법을 찾아보았습니다.
그러던 중 window.postmessage와 BroadcastChannel API를 알게 되었고, BroadcastChannel API를 사용하게 되었습니다. 오늘은 BroadcastChannel API의 간단한 사용법을 정리해보겠습니다.
1. Broadcast Channel API란?
Broadcast Channel API는 브라우징 맥락들 (예: 창, 탭, 프레임, iframe)과 동일한 출처에 있는 워커들 간의 기본적인 통신을 허용합니다.
출처 MDN
Broadcast Channel API는 웹 애플리케이션에서 동일한 출처(SOP)내의 탭, 윈도우, iFrame, Web Worker 간의 데이터를 실시간으로 교환할 수 있도록 지원하는 기능입니다. BroadcastChannel를 활용하여 채널을 등록, 데이터 수신/송신 메서드를 등록하여 실시간으로 데이터를 업데이트 할 수 있습니다.
2.Broadcast Channel API 사용법
기본적인 사용법은 new BroadcastChannel('채널명') 을 통해 생성하여 postMessage, onmessage 메서드를 활용하여 데이터를 송/수신 할 수 있습니다.
// channel 생성
const someChannel = new BroadcastChannel('some-channel');
// 데이터 송신
someChannel.postMessage(JSON.stringify({a: 'b'}));
// 데이터 수신
someChannel.onmessage = (event) => {
const data = JSON.parse(event.data);
};
// 채널 닫기
someChannel.close();3. window.postMessage와 BroadcastChannel API
window.postMessage와 BroadcastChannel API는 SOP에서 차이점이 있습니다. window.postMessage는 다른 출처에서도 데이터의 송/수신이 가능하지만 특정 iframe 윈도우 내에서만 데이터의 교환이 가능하도록 설계되었습니다.
이에 반해, BroadcastChannel API는 SOP를 만족하는 모든 브라우저 탭 간의 데이터를 공유할 수 있도록 설계되었습니다.
저의 경우 같은 도매인 내의 여러 탭에 데이터를 전송해야했기에 BroadcastChannel API를 사용하였습니다.
결론
BroadcastChannel API는 여러 탭 간의 데이터의 동기화가 필요할 때, 사용할 수 있는 유용한 API입니다. BroadcastChannel API도 Web worker와 같이 close 메소드를 사용하여 적절한 시점에 닫아주는 것이 필요합니다. 다음 시간에는 mock 데이터를 통해서 실시간으로 데이터를 송/수신하는 로직을 만들어보겠습니다!
참고
