브라우저 탭 사이의 통신 (chrome postMessage, BroadcastChannel API 사용해보기)

SPA가 대중적으로 많이 퍼지면서 여러 브라우저를 오가며 복잡한 작업을 하는 경우는 적어진 것 같다.

하지만, 여전히 다양한 이유로 여러 탭을 사용하여 오가는 웹 앱이 필요하고, 그 때 탭간의 데이터 통신을 위해서 사용할 수 있는 API들이 있다.

 

그 API들 중에서 이번엔 postMessage와 BroadcastChannel을 사용하는 방법에 대해서 간단하게 알아보았다.

 

일단 window. postMessage를 사용해보자.

 

postMessage를 통해서 새로 띄워진 창에 메세지를 전달할 수 있다.

 

일단, window.open 메서드로 새로운 창을 띄운다.

const newWindow = window.open("https://www.naver.com");

그럼 새로운 네이버 탭이 열린다.

이 탭의 콘솔창을 열어 이벤트를 연결해두자.

function receiveMessage(event) {
  if (event.origin !== "https://www.naver.com")
    return;

    console.log(event)
}
window.addEventListener("message", receiveMessage, false);

이제 이벤트를 직접 보내면, 새로 열린 탭에서 데이터를 전달받을 수 있다.

newWindow.postMessage("GOOOOOOOOOOOOOOOOOOD", "https://www.naver.com")

새로 열렸던 창의 콘솔창을 확인해보면,

메세지가 전달된 것을 확인할 수 있다.

 

다만, 새로 열린 창을 사용해야 하는 불편함이 있다.

대신, 다른 origin 도메인과도 통신할 수 있다.

 

이번에는  BroadcastChannel을 사용해보자.

BroadcastChannel API는 same-origin이고, 동일한 출처로부터 온것을 보장하기에 위와 같이 event.origin을 검사할 필요가 없다.

 

직접 사용해보면, 일단 다음과 네이버 두 탭을 띄우자.

그리고 두 탭에 각각 채널을 생성해준다. (동일한 채널이름)

const channel = new BroadcastChannel('test');

그리고 다음 탭에 onmessage 이벤트를 설정한다.

channel.onmessage = function(e) {
    console.log('Received', e.data);
};

그리고 네이버 탭에서 메세지를 보내면,

channel.postMessage('This is a test message.');

반응이 없을 것이다. 😅

same-origin이 아니기에 데이터를 받을 수 없었다.

 

다시 네이버 탭을 띄우고, 채널을 설정한 뒤 onmessage 이벤트를 설정하면 정상 작동함을 확인할 수 있다.

 

메세지 수신 성공

 

요약하자면, 다음과 같다.

// BroadcastChannel 인스턴스 생성
const channel = new BroadcastChannel('test');

// 메시지 수신 설정
channel.onmessage = function(e) {
    console.log('Received', e.data);
};

// 메시지 보내기
channel.postMessage('This is a test message.');

 

origin이 같은 모든 탭에 데이터를 보내기에, 각 탭에서 id를 설정해서 원하는 탭에서만 데이터를 받을 수 있도록 설정할 수도 있다.

(id 설정 후 해당 id를 포함해서 데이터가 올 때에만 데이터 수신하도록 onmessage를 설정할 수 있다)

 

 

🍇 참고 자료

https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage

Window.postMessage() - Web API | MDN

 

https://developer.chrome.com/blog/broadcastchannel?hl=ko

BroadcastChannel API - 웹용 메시지 버스  |  Blog  |  Chrome for Developers