[JavaScript] BroadcastChannel API란?

- BroadcastChannel이란?

• Broadcast Channel API는 브라우징 컨텍스트 간의 통신을 보다 쉽게 ​​해주는 간단한 API이다.
• 즉, 창/탭, iframe, 웹 작업자 및 서비스 작업자 간의 통신이며, 지정된 채널에 게시된 메시지는 해당 채널의 모든 청취자에게 전달된다. 
• BroadcastChannel생성자는 채널 이름이라는 단일 매개변수를 사용한다 . 이름은 채널을 식별하고 브라우징 컨텍스트 전반에 존재한다.

 

- 사용방법

• 채널을 오픈한 다음 메세지를 보내면, 해당 채널을 구독하는 컨텍스트에서 메세지를 받아볼 수 있다.
• 아래처럼 채널을 생성할 수 있다. 만약 처음이면 생성되고, 이미 생성된 채널이면 구독하게 된다.

// my_bus 라는 채널에 연결한다.
const channel = new BroadcastChannel('my_bus');

• 메세지를 보낼 때는 postMessage라는 메서드를 사용한다. 메세지의 형식은 정해져 있지 않고 structed clone algorithm을 사용해서 시리얼라이즈되므로 웬만한 데이터 타입은 다 쓸 수 있다.
• 메세지가 포스팅되면 브로드캐스트 채널로 메세지 이벤트가 실행된다. 메세지 이벤트가 발생했을 때 실행할 콜백은 아래처럼 달아두면 된다.

// my_bus에 메시지를 보낸다.
channel.postMessage('This is a test message.'); 

// my_bus에서 메시지를 수신한다.
channel.onmessage = function(e) {
    console.log('Received', e.data);
};

// 완료되면 채널을 닫는다.
channel.close();

 

 

- 주의점

• 단, 자신이 포스팅한 메세지는 자신이 받아볼 수 없다. 즉 포스팅을 한 페이지한테는 message이벤트가 실행되지 않는다.
• 창 중 하나가 시크릿 모드이거나 여러 브라우저에서 (예: Firefox에서 Chrome으로)브로드캐스트 채널이 작동하지 않는다.
• Broadcast Channel API는 아래처럼 호스트가 다르면 작동하지 않는다.
  https://www.abc.com/
  https://abc.com/

 

- 다른 기능과의 차이점

• Channel Messaging API와 차이점은 기본적으로 broadcastchannel은 one-to-many를 위한 것이고 messagechannel는 one-to-one을 위한 것이라는 점이다.
• window.postMessage 와의 차이점은, broadcastchannel은 same origin만 지원하지만 window.postMessage는 그렇지 않다는 점이다. 그리고 window.postMessage는 타켓 윈도우의 참조도 알고 있어야 하는 반면 broadcastchannel은 채널 이름으로 구독하고 양방향 소통이 가능해서 사용이 훨씬 쉽다.

 

 

 

 

 

 

---

Reference

https://developer-alle.tistory.com/m/433
https://developer.chrome.com/blog/broadcastchannel/

https://hjcode.tistory.com/100