알고 있으면 너무 좋은 프론트엔드 웹 기술 : Broadcast Channel API
- Broadcast Channel API는 동일 출처(프로토콜, 도메인, 포트 동일)의 여러 웹페이지 간 통신을 가능하게 하는 표준 프론트엔드 기술입니다. 🌐
- 이 API는 서버 기술 없이 오직 프론트엔드 기술만으로 탭 간 실시간 메시지 송수신을 구현할 수 있습니다. 🚀
BroadcastChannel 객체를 생성하고, 동일한 채널 이름을 사용하여 메시지를 postMessage()로 송신하며 onmessage 이벤트로 수신합니다. 💬
- 전송할 메시지의 형식은 자유롭게 구성할 수 있으며, 객체 형태로 발신자, 텍스트, 타임스탬프 등을 포함할 수 있습니다. 📦
- 더 이상 필요 없는 채널은
close() 메서드를 사용하여 닫아주는 것이 좋으며, 웹페이지 종료 시 beforeunload 이벤트에서 처리할 수 있습니다. ♻️
- 대표적인 활용 사례로, 여러 탭에서 열린 사이트 간 설정값(예: 사용자 환경설정)을 실시간으로 공유하는 기능을 만들 수 있습니다. ⚙️
- 다른 활용 사례로는 한 탭에서 로그인하면 다른 탭에서도 자동으로 로그인 상태를 유지하는 기능을 구현할 수 있습니다. 🔑
데브허브 | DEVHUB | 알고 있으면 너무 좋은 프론트엔드 웹 기술 : Broadcast Channel API