공부일지(TIL)/JavaScript

[JavaScript] Browsing Context, BroadcastChannel

Alledy 2022. 2. 16. 21:08

Browsing Context

  • 브라우저가 Document를 표시하는 환경이다. 모던 브라우저에서 이는 보통 tab 단위이지만 window나 iframe, frame이 될 수도 있다.
  • 각 브라우징 컨텍스트는 특정한 오리진, active document의 오리진, 여태까지 전시한 도큐먼트를 기억하는 히스토리를 차례대로 저장하고 있다.
  • 브라우징 컨텍스트 간의 소통은 매우 제한적이지만, 같은 오리진을 가진 브라우징 컨텍스트 사이에서는 BroadcastChannel을 오픈해서 사용할 수 있다.

BroadcastChannel

  • 같은 오리진의 브라우징 컨텍스트끼리 소통할 수 있는 방법이다.

  • 채널을 오픈한 다음 메세지를 보내면, 해당 채널을 구독하는 컨텍스트에서 메세지를 받아볼 수 있다.

  • 아래처럼 채널을 생성할 수 있다. 만약 처음이면 생성되고, 이미 생성된 채널이면 구독하게 된다.

    const bc = new BroadcastChannel('test'); // 채널 이름을 파라미터로 받는다.

  • 메세지를 보낼 때는 postMessage라는 메서드를 사용한다. 메세지의 형식은 정해져 있지 않고 structed clone algorithm을 사용해서 시리얼라이즈되므로 웬만한 데이터 타입은 다 쓸 수 있다.

  • 메세지가 포스팅되면 브로드캐스트 채널로 메세지 이벤트가 실행된다. 메세지 이벤트가 발생했을 때 실행할 콜백은 아래처럼 달아두면 된다.

    bc.postMessage('post'); bc.onmessage = event => { console.log(event) }

  • 단, 자신이 포스팅한 메세지는 자신이 받아볼 수 없다. 즉 포스팅을 한 페이지한테는 message이벤트가 실행되지 않는다.

  • Channel Messaging API와 다른 점은 기본적으로 broadcastchannel은 one-to-many를 위한 것이고 messagechannel는 one-to-one을 위한 것이라는 점이다.

  • window.postMessage 와의 차이점은, broadcastchannel은 same origin만 지원하지만 window.postMessage는 그렇지 않다는 점이다. 그리고 window.postMessage는 타켓 윈도우의 참조도 알고 있어야 하는 반면 broadcastchannel은 채널 이름으로 구독하고 양방향 소통이 가능해서 사용이 훨씬 쉽다.

Ref