[Javascript] window.postMessage (feat: Web Worker)

window.postMessage()는 웹 페이지의 창 간에 안전한 메시지를 교환하기 위해 사용되는 메서드입니다.

싱글스레드 언어인 자바스크립트를 공부하다보면 Web worker 이라는것도 같이 공부하게되는데 간단하기 웹워커에 말하자면,

 

웹 워커란?

JavaScript Web Worker는 웹 애플리케이션에서 백그라운드 스레드로 동작하는 스크립트 작업을 수행하기 위한 기술입니다. 이는 메인 스레드와 별도의 스레드에서 실행되므로 긴 작업을 수행하거나 CPU 집약적인 작업을 처리할 때 유용합니다. 웹 워커를 사용하면 메인 스레드가 차단되지 않고 애플리케이션의 반응성을 유지할 수 있습니다.

웹 워커는 브라우저 환경에서 JavaScript 코드를 실행하는 독립적인 작업자(worker)입니다. 메인 스레드와는 별개의 스레드에서 실행되기 때문에 웹 워커는 메인 스레드의 영향을 받지 않고 독립적으로 실행됩니다. 이로 인해 메인 스레드가 블로킹되지 않고 웹 페이지의 반응성이 향상됩니다.

 

메인 스레드와 워커 간에 메시지를 주고받기 위해 postMessage 메서드를 사용하는 것이 일반적입니다. postMessage를 통해 메인 스레드와 워커는 데이터나 명령을 교환하고 상호작용할 수 있습니다.

 

 

Post message

• 크로스 도메인 통신: 웹 페이지의 도메인이 다른 창 간에 데이터를 안전하게 교환하기 위해 window.postMessage()를 사용할 수 있습니다. 이를 통해 서로 다른 도메인의 웹 페이지 간에 통신이 가능해집니다.

• 프레임 간 통신: 한 페이지 내의 여러 프레임이 있을 때, window.postMessage()를 사용하여 프레임 간에 데이터를 전달할 수 있습니다. 이를 통해 부모 창과 자식 프레임, 혹은 프레임끼리 상호작용할 수 있습니다.

 

이번에 나이스 본인인증 기능을 회원가입 및 성인인증 할때를 위해서 프론트 개발을 했었는데요, 백엔드와 성공 및 실패 status를 

통신하기 위해서 postMessage를 선택했습니다.

 

상황 : www.example.com   에서 window.open 함수를 이용해 www.exampleNiceAuth.com  라는 나이스 웹서버 및 모듈에서 성공 및 실패 결과를 프론트에서 포스트메세지를 통해 수신함 .  (통신하고자 하는 도메인이 다르기때문에)

 

로직은 프론트에서 회원가입 폼의 인풋의 이름과 이메일 값을 미들웨어로 전송 한다음에 나이스 모듈창에서 인증이 정상적으로 완료가 되면 미들웨어에서 postMessage로 나이스 key값을 발신하고 제가 postMessage의 메세지를 받아서 성공과 실패 처리를 Javscript Promise로 처리를 했습니다.

 

 

예시 코드 입니다.

 

Post message 보내는 쪽:

const targetWindow = window.open('http://example.com');

// 메시지 전송
const message = '안녕하세요';
const targetOrigin = 'http://example.com'; // 수신 창의 도메인
targetWindow.postMessage(message, targetOrigin)

 

Post message 받는 쪽:

window.addEventListener('message', receiveMessage);

// 메시지 처리 함수
function receiveMessage(event: MessageEvent) {
  const { origin, data } = event;
  if(origin !== 'example.com') {
     console.log('origin이 다릅니다.')
     return;
  }   
  // 메시지 처리 로직
  console.log('받은 메시지:', data);
  
  // 메시지를 보낸 창으로 응답 보내기
  event.source.postMessage('메시지를 받았습니다!', origin);
}

 

 

 

코드를 보면 , 포스트메세지를 보내는 origin 을 체크를 하고 origin이 일치 하지않으면 리턴처리를 해줍니다.
origin이 일치하다면 , data 값에 포스트메시지 보내는쪽의 값을 받아올 수 있습니다.

 

Post message 를 수신하고 발신할때 , 보내고자 하는 data 를 객체로도 선언 해서 전송 하고 수신 할 수 있습니다.

 

 

Post message 보내는 쪽 (객체를 담아서) :

const targetWindow = window.open('http://example.com');

// 메시지 전송
const message = {
  text: 'Hello',
  date: new Date()
};
const targetOrigin = 'http://example.com'; // 수신 창의 도메인

targetWindow.postMessage(message, targetOrigin)

 

Post message 받는 쪽 (객체를 담아서) :

window.addEventListener('message', receiveMessage);

// 메시지 처리 함수
function receiveMessage(event: MessageEvent) {
  const { origin, data: { text , date } } = event;
  if(origin !== 'example.com') {
     console.log('origin이 다릅니다.')
     return;
  }   
  // 메시지 처리 로직
  console.log('받은 메시지:', text); // 'Hello'
    console.log('받은 메시지:', date); // 2023.07.01
  
  // 메시지를 보낸 창으로 응답 보내기
  event.source.postMessage('메시지를 받았습니다!', origin);
}