Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

HTML5 MessageChannel과 WebSocket의 차이점 완벽 정리

WebSocket이란?

WebSocket은 웹 애플리케이션을 위한 차세대 양방향 통신 기술입니다. 단일 소켓(single socket) 위에서 동작하며, HTML5를 지원하는 브라우저에서는 JavaScript 인터페이스를 통해 사용할 수 있습니다.

웹 서버와 WebSocket 연결이 한 번 수립되면, 브라우저에서는 send() 메서드를 호출하여 서버로 데이터를 전송할 수 있고, 반대 방향으로 서버가 보낸 데이터는 onmessage 이벤트 핸들러를 통해 수신할 수 있습니다. HTTP처럼 매번 요청-응답을 반복하지 않아도 되므로 실시간 통신에 매우 효율적입니다.

채널 메시징(Channel Messaging)이란?

두 브라우징 컨텍스트(browsing context) 사이의 양방향 통신을 채널 메시징이라고 부릅니다. 여기서 브라우징 컨텍스트란 하나의 탭, 창, iframe 또는 Web Worker처럼 문서를 실행하는 환경을 의미합니다.

채널 메시징은 서로 다른 출처(origin)를 가진 문서 간에도 안전하게 통신할 수 있다는 점에서 특히 유용합니다.

MessageChannel의 동작 원리

MessageChannel 객체를 생성하면 내부적으로 데이터를 주고받기 위한 두 개의 포트(port)가 자동으로 만들어집니다. 두 포트 중 하나는 자신에게 두고, 나머지 하나를 다른 브라우징 컨텍스트(예: iframe이나 Web Worker)로 전달하면, 이 두 포트 사이에서 직접 메시지를 주고받을 수 있습니다.

핵심 차이점 요약

  • WebSocket: 브라우저(클라이언트)와 웹 서버 사이의 네트워크 수준 양방향 통신에 사용됩니다.
  • MessageChannel: 같은 페이지 내부 또는 iframe, Web Worker 등 브라우저 안의 컨텍스트끼리 통신할 때 사용됩니다.

정리하면, WebSocket은 '서버와의 실시간 통신'을 위한 기술이고, MessageChannel은 '브라우저 내부 구성 요소 간 메시지 전달'을 위한 기술이라는 점에서 목적과 사용 범위가 다릅니다.