Broadcast Channel API

클라이언트는 BroadcastChannel 객체를 생성함으로써 채널에 참여합니다. 이 생성자는 채널 이름을 매개변수로 받습니다. 해당 채널의 이름에 가장 먼저 연결된 경우, 기본 채널이 생성됩니다.

// 채널에 연결
const bc = new BroadcastChannel("test_channel");

생성된 BroadcastChannel 객체에서, 임의의 객체를 인수로 받는 메서드인 postMessage()를 호출합니다. 아래는 문자열 메시지를 보내는 예시입니다.

// 간단한 메시지를 보내는 예제
bc.postMessage("This is a test message.");

채널로 전송되는 데이터는 structured clone 알고리즘을 통해 직렬화됩니다. 즉, 다양한 데이터 객체를 직접 직렬화하지 않고도 안전하게 전송할 수 있습니다.

Broadcast Channel API는 메시지에 어떤 의미도 부여하지 않으므로, 어떤 종류의 메시지가 올 것인지 예상하고 이를 이용해 어떤 동작을 할 것인지는 코드에 달려 있습니다.

메시지가 게시되면, 해당 채널에 연결된 BroadcastChannel 객체에 message 이벤트가 전달됩니다. onmessage 이벤트 처리기를 사용해 이 이벤트에 대한 함수를 실행할 수 있습니다.

// 이벤트를 콘솔에 로깅하는 핸들러
bc.onmessage = (event) => {
  console.log(event);
};

채널 연결을 해제하려면, 객체에서 close() 메서드를 호출합니다. 호출 시, 채널과 객체의 연결을 끊고 가비지 컬렉션이 활성화됩니다.

// 채널 연결 해제하기
bc.close();

Broadcast Channel API의 독립적인 인터페이스를 통해 다중 맥락 간 통신이 가능합니다. 이는 사용자가 로그인하거나, 로그아웃하는 등의 동일한 출처 내의 다른 탭에서 사용자의 행동을 감지하는 데 사용할 수 있습니다.

메시징 프로토콜은 정의되어 있지 않으며 다양한 브라우징 맥락에서 자체적으로 구현해야 합니다. 따라서 호환성에 대한 협의 사항이나 요구 조건이 없습니다.

• BroadcastChannel: Broadcast Channel API를 구현하는 인터페이스