[WebDevelopment] Broadcast Channel API로 브라우저 간 통신하기
현대 웹 애플리케이션에서 서로 다른 브라우저 컨텍스트(탭, 창, 프레임 또는 iframe 등) 간의 통신은 사용자 세션의 일관성을 유지하고, 업데이트를 전파하며, 협업 기능을 가능하게 하는 데 필수적이다. Broadcast Channel API는 개발자가 이러한 컨텍스트 간의 실시간 통신을 최소한의 오버헤드로 달성할 수 있도록 해주는 간단하면서도 강력한 도구이다. 이 블로그에서는 Broadcast Channel API의 작동 방식, 실제 사용 사례를 살펴보고, 구현을 보여주는 실습 예제를 제공할 것이다. Broadcast Channel API는 동일한 출처 내에서 서로 다른 브라우징 컨텍스트 간의 통신을 가능하게 해주는 메시징 API이다. postMessage와 같은 다른 메시징 기술과 달리, Broadcast Channel API는 특정 창이나 프레임에 대한 참조를 유지할 필요 없이 통신을 단순화한다. 이 API는 여러 개의 열린 창이나 탭에 정보를 방송해야 할 때 특히 유용하다. Broadcast Channel API를 사용하면 메시지를 보내고 받을 수 있는 채널을 생성하고, 해당 채널에 구독하여 메시지를 수신할 수 있다. 이 API는 사용이 간편하여 여러 창이나 탭을 동기화해야 할 때 이상적인 선택이다.
Broadcast Channel API 개요
Broadcast Channel API란?
Broadcast Channel API는 웹 애플리케이션 간에 메시지를 전송할 수 있는 간단한 방법을 제공하는 API이다. 이 API는 동일한 출처의 여러 탭이나 창 간에 데이터를 공유할 수 있도록 해준다. 이를 통해 개발자는 사용자 경험을 향상시키고, 여러 탭에서의 상태 동기화를 쉽게 구현할 수 있다.
Broadcast Channel API의 필요성
현대의 웹 애플리케이션은 종종 여러 탭이나 창에서 동시에 열리게 된다. 이때 각 탭 간의 상태를 동기화하는 것은 사용자에게 일관된 경험을 제공하는 데 필수적이다. 예를 들어, 사용자가 한 탭에서 설정을 변경하면 다른 탭에서도 동일한 설정이 반영되어야 한다. Broadcast Channel API는 이러한 요구를 충족시키기 위해 설계되었다.
Broadcast Channel API의 장점
Broadcast Channel API의 주요 장점은 다음과 같다. 첫째, 사용이 간편하다. 복잡한 설정 없이도 간단한 코드로 메시지를 전송하고 수신할 수 있다. 둘째, 성능이 우수하다. 다른 방법에 비해 낮은 지연 시간으로 메시지를 전달할 수 있다. 셋째, 다양한 사용 사례에 적용할 수 있다. 예를 들어, 실시간 협업 애플리케이션이나 게임 등에서 유용하게 사용될 수 있다.
Broadcast Channel API의 사용 사례
Broadcast Channel API는 여러 가지 상황에서 유용하게 사용될 수 있다. 예를 들어, 사용자가 여러 탭에서 동일한 애플리케이션을 사용할 때, 각 탭의 상태를 동기화하여 일관된 사용자 경험을 제공할 수 있다. 또한, 실시간 채팅 애플리케이션에서 메시지를 전송하고 수신하는 데에도 활용될 수 있다. 이 외에도 다양한 웹 애플리케이션에서 상태 관리 및 데이터 동기화에 유용하게 사용될 수 있다.
Broadcast Channel API의 작동 원리
채널 생성하기
Broadcast Channel API를 사용하기 위해서는 먼저 채널을 생성해야 한다. 채널은 이름을 통해 구분되며, 동일한 이름을 가진 채널은 서로 연결된다. 채널을 생성하는 방법은 다음과 같다.
1
const channel = new BroadcastChannel('my_channel');
위의 코드에서 ‘my_channel’은 채널의 이름이다. 이 이름을 통해 다른 스크립트나 탭에서 동일한 채널에 접근할 수 있다. 채널을 생성한 후에는 메시지를 주고받을 준비가 완료된다.
메시지 수신하기
메시지를 수신하기 위해서는 onmessage 이벤트 리스너를 설정해야 한다. 이 리스너는 다른 탭이나 스크립트에서 전송된 메시지를 수신할 수 있도록 해준다. 다음은 메시지를 수신하는 예제 코드이다.
1
2
3
channel.onmessage = (event) => {
console.log('Received message:', event.data);
};
위의 코드에서 event.data는 수신된 메시지를 나타낸다. 이 메시지는 다른 탭에서 전송된 데이터로, 이를 통해 실시간으로 정보를 공유할 수 있다.
메시지 전송하기
메시지를 전송하는 것은 매우 간단하다. postMessage 메서드를 사용하여 원하는 데이터를 전송할 수 있다. 다음은 메시지를 전송하는 예제 코드이다.
1
channel.postMessage('Hello from another tab!');
위의 코드에서 ‘Hello from another tab!’이라는 문자열이 다른 탭으로 전송된다. 수신 측에서는 이 메시지를 onmessage 이벤트 리스너를 통해 받을 수 있다. 이를 통해 여러 탭 간의 실시간 통신이 가능해진다.
이와 같이 Broadcast Channel API는 간단한 방법으로 여러 탭 간의 메시지를 주고받을 수 있는 기능을 제공한다. 이를 통해 웹 애플리케이션의 사용자 경험을 향상시킬 수 있다.
실용적인 예제
탭 간 테마 동기화 예제
탭 간 테마 동기화 예제는 사용자가 여러 개의 브라우저 탭을 열고 있을 때, 한 탭에서 테마를 변경하면 다른 탭에서도 자동으로 변경되는 기능을 구현하는 것이다. 이 예제는 사용자가 웹 애플리케이션을 사용할 때 일관된 사용자 경험을 제공하는 데 유용하다.
아래는 이 기능을 구현하기 위한 간단한 코드 예제이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 채널 생성
const channel = new BroadcastChannel('theme_channel');
// 테마 변경 함수
function changeTheme(theme) {
document.body.className = theme;
channel.postMessage(theme); // 메시지 전송
}
// 메시지 수신
channel.onmessage = (event) => {
changeTheme(event.data); // 수신한 메시지로 테마 변경
};
// 버튼 클릭 시 테마 변경
document.getElementById('light-theme').onclick = () => changeTheme('light');
document.getElementById('dark-theme').onclick = () => changeTheme('dark');
이 코드는 사용자가 버튼을 클릭하여 테마를 변경할 때마다 BroadcastChannel을 통해 다른 탭에 변경 사항을 전파하는 방식으로 작동한다.
카운터 애플리케이션 예제
카운터 애플리케이션 예제는 사용자가 여러 탭에서 카운터 값을 증가시키거나 감소시킬 때, 모든 탭에서 카운터 값이 동기화되는 기능을 구현하는 것이다. 이 예제는 실시간으로 데이터를 공유해야 하는 애플리케이션에서 유용하다.
 |
|---|
| 시퀀스 다이어그램 |
아래는 카운터 애플리케이션을 구현하기 위한 코드 예제이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let count = 0;
const channel = new BroadcastChannel('counter_channel');
// 카운터 업데이트 함수
function updateCounter() {
document.getElementById('counter').innerText = count;
channel.postMessage(count); // 메시지 전송
}
// 메시지 수신
channel.onmessage = (event) => {
count = event.data; // 수신한 메시지로 카운터 값 업데이트
updateCounter();
};
// 버튼 클릭 시 카운터 증가 및 감소
document.getElementById('increment').onclick = () => {
count++;
updateCounter();
};
document.getElementById('decrement').onclick = () => {
count--;
updateCounter();
};
이 코드는 사용자가 카운터를 증가시키거나 감소시킬 때마다 BroadcastChannel을 통해 다른 탭에 카운터 값을 전파하는 방식으로 작동한다.
React에서의 Broadcast Channel 사용 예제
React 애플리케이션에서 BroadcastChannel을 사용하는 방법은 다음과 같다. 이 예제에서는 상태 관리 라이브러리 없이 React의 상태를 사용하여 간단한 카운터 애플리케이션을 구현한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React, { useEffect, useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const channel = new BroadcastChannel('counter_channel');
useEffect(() => {
channel.onmessage = (event) => {
setCount(event.data); // 수신한 메시지로 카운터 값 업데이트
};
return () => {
channel.close(); // 컴포넌트 언마운트 시 채널 닫기
};
}, [channel]);
const increment = () => {
setCount((prevCount) => {
const newCount = prevCount + 1;
channel.postMessage(newCount); // 메시지 전송
return newCount;
});
};
const decrement = () => {
setCount((prevCount) => {
const newCount = prevCount - 1;
channel.postMessage(newCount); // 메시지 전송
return newCount;
});
};
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
export default Counter;
이 코드는 React의 상태 관리 기능을 활용하여 카운터 값을 관리하고, BroadcastChannel을 통해 다른 탭과 동기화하는 방식으로 작동한다.
Broadcast Channel API의 한계
동일 출처 제한
Broadcast Channel API는 동일 출처 정책에 따라 작동한다. 이는 같은 출처에서만 메시지를 주고받을 수 있다는 의미이다. 즉, 서로 다른 도메인이나 프로토콜을 사용하는 웹 페이지 간에는 메시지를 전송할 수 없다. 이러한 제한은 보안상의 이유로 설정되었지만, 개발자에게는 불편함을 초래할 수 있다. 예를 들어, 여러 서브도메인에서 애플리케이션을 운영하는 경우, 각 서브도메인 간의 데이터 동기화가 어려워질 수 있다.
대량 데이터 전송의 비효율성
Broadcast Channel API는 주로 작은 크기의 메시지를 전송하는 데 적합하다. 대량의 데이터를 전송할 경우, 성능 저하가 발생할 수 있다. 이는 메시지가 여러 번 전송되거나, 수신 측에서 데이터를 처리하는 데 시간이 걸릴 수 있기 때문이다. 따라서 대량의 데이터를 전송해야 하는 경우, 다른 방법을 고려하는 것이 좋다. 예를 들어, WebSockets나 Fetch API를 사용하여 데이터를 전송하는 것이 더 효율적일 수 있다.
브라우저 호환성 문제
Broadcast Channel API는 모든 브라우저에서 지원되지 않는다. 특히 구형 브라우저나 일부 모바일 브라우저에서는 이 API를 사용할 수 없다. 따라서 개발자는 애플리케이션의 사용자 기반을 고려하여 이 API를 사용할지 여부를 결정해야 한다. 만약 특정 브라우저에서 지원되지 않는다면, 대체 방법을 마련해야 한다. 예를 들어, Local Storage나 Cookies를 사용하여 데이터를 동기화하는 방법이 있다.
이러한 한계에도 불구하고, Broadcast Channel API는 간단한 메시징 기능을 제공하며, 특정 상황에서는 매우 유용하게 사용될 수 있다. 개발자는 이러한 한계를 이해하고, 적절한 상황에서 이 API를 활용해야 한다.
자주 묻는 질문
Broadcast Channel API는 어떤 상황에서 사용해야 하나요?
Broadcast Channel API는 여러 탭이나 창에서 동일한 웹 애플리케이션을 사용할 때, 데이터나 상태를 동기화해야 할 필요가 있을 때 유용하다. 예를 들어, 사용자가 여러 탭에서 같은 웹사이트를 열고 있을 때, 한 탭에서의 변경 사항을 다른 탭에 즉시 반영하고 싶을 때 사용할 수 있다. 이 API는 특히 실시간 협업 애플리케이션이나 게임, 채팅 애플리케이션 등에서 효과적이다.
Broadcast Channel API와 다른 메시징 API의 차이점은 무엇인가요?
Broadcast Channel API는 동일 출처의 여러 탭 간에 메시지를 전송할 수 있는 간단한 방법을 제공한다. WebSockets와 같은 다른 메시징 API는 서버와 클라이언트 간의 양방향 통신을 지원하지만, Broadcast Channel API는 클라이언트 간의 통신에 중점을 둔다. 또한, Local Storage와 같은 다른 저장소 API는 데이터 저장 및 검색에 중점을 두지만, Broadcast Channel API는 실시간 메시징에 초점을 맞춘다. 이러한 차이점으로 인해 각 API는 특정 상황에서 더 적합하게 사용될 수 있다.
Broadcast Channel API의 보안 문제는 무엇인가요?
Broadcast Channel API는 동일 출처 정책을 따르기 때문에, 서로 다른 출처의 웹 페이지 간에는 메시지를 전송할 수 없다. 그러나 동일 출처 내에서의 사용은 보안상의 위험이 있을 수 있다. 예를 들어, 악의적인 스크립트가 Broadcast Channel을 통해 다른 탭의 데이터를 엿볼 수 있는 가능성이 있다. 따라서 개발자는 이 API를 사용할 때 보안에 대한 충분한 고려가 필요하며, 민감한 데이터는 다른 방법으로 보호해야 한다.
관련 기술
WebSockets
WebSockets는 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜이다. HTTP 프로토콜과는 달리, WebSockets는 지속적인 연결을 유지하며 실시간 데이터 전송을 지원한다. 이는 채팅 애플리케이션이나 실시간 게임과 같은 애플리케이션에서 매우 유용하다. WebSockets는 Broadcast Channel API와 함께 사용될 수 있으며, 두 기술 모두 클라이언트 간의 데이터 전송을 효율적으로 처리할 수 있다. 그러나 WebSockets는 서버와의 연결이 필요하므로, 동일 출처 정책을 따르지 않는 경우에도 사용할 수 있다.
Service Workers
Service Workers는 웹 애플리케이션의 백그라운드에서 실행되는 스크립트로, 오프라인 기능 및 푸시 알림과 같은 기능을 제공한다. Service Workers는 네트워크 요청을 가로채고, 캐시를 관리하며, 사용자에게 푸시 알림을 보낼 수 있다. Broadcast Channel API와 함께 사용하면, Service Workers가 여러 탭 간의 상태를 동기화하는 데 도움을 줄 수 있다. 예를 들어, 사용자가 오프라인 상태에서 작업을 수행할 때, Service Workers는 데이터를 캐시하고, 온라인 상태로 돌아왔을 때 Broadcast Channel을 통해 다른 탭과 동기화할 수 있다.
Local Storage
Local Storage는 웹 브라우저에 데이터를 저장할 수 있는 간단한 방법을 제공하는 API이다. Local Storage는 키-값 쌍으로 데이터를 저장하며, 브라우저가 종료되더라도 데이터가 유지된다. Broadcast Channel API와 함께 사용하면, Local Storage에 저장된 데이터를 여러 탭 간에 동기화할 수 있다. 예를 들어, 사용자가 한 탭에서 설정을 변경하면, Broadcast Channel을 통해 다른 탭에 변경 사항을 전파할 수 있다. 그러나 Local Storage는 동기화가 즉각적이지 않으며, 데이터의 크기 제한이 있으므로 대량의 데이터를 처리하는 데는 적합하지 않다.
이와 같이, WebSockets, Service Workers, Local Storage는 각각의 장점과 용도가 있으며, Broadcast Channel API와 함께 사용하여 웹 애플리케이션의 기능을 확장할 수 있다. 이러한 기술들은 현대 웹 개발에서 중요한 역할을 하며, 개발자들은 이들을 적절히 활용하여 사용자 경험을 향상시킬 수 있다.
결론
Broadcast Channel API의 요약
Broadcast Channel API는 웹 애플리케이션에서 여러 탭 간의 통신을 가능하게 하는 유용한 도구이다. 이 API를 사용하면 동일한 출처의 여러 브라우저 탭이나 창에서 메시지를 쉽게 전송하고 수신할 수 있다. 이를 통해 사용자 경험을 향상시키고, 애플리케이션의 상태를 동기화하는 데 큰 도움이 된다.
미래의 웹 애플리케이션에서의 역할
미래의 웹 애플리케이션에서는 사용자 경험이 더욱 중요해질 것이다. Broadcast Channel API는 이러한 변화에 발맞추어 여러 탭 간의 실시간 통신을 지원함으로써, 사용자에게 더 나은 경험을 제공할 수 있다. 특히, 실시간 데이터 업데이트가 필요한 애플리케이션에서 이 API의 활용도가 높아질 것으로 예상된다.
개발자에게의 권장 사항
개발자들은 Broadcast Channel API를 활용하여 애플리케이션의 상태를 효율적으로 관리하고, 사용자 간의 상호작용을 개선할 수 있다. 그러나 이 API의 한계와 브라우저 호환성 문제를 항상 염두에 두어야 한다. 따라서, 다른 메시징 기술과 함께 사용하여 최적의 솔루션을 찾는 것이 중요하다.
이와 같은 방식으로 Broadcast Channel API를 이해하고 활용하면, 더욱 발전된 웹 애플리케이션을 개발할 수 있을 것이다.
Reference
- https://dev.to/rigalpatel001/how-to-use-the-broadcast-channel-api-for-real-time-communication-across-browser-windows-23if
- https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
- https://dev-record-levelup.tistory.com/6
- https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
- https://devblog.kakaostyle.com/ko/2022-10-12-1-sync-data-between-activities/
- https://idleday.tistory.com/93
Comments