MQTT over WebSocket으로 웹앱 실시간 연동
브라우저 환경에서 MQTT over WebSocket을 활용해 웹앱과 MQTT 브로커 간 실시간 통신을 구현하는 방법, 설정 예제와 보안 고려사항을 정리한 설명
목차
소개
웹앱에서 실시간 메시징을 구현할 때 MQTT over WebSocket은 가볍고 효율적인 선택이다. 이 글은 MQTT와 WebSocket의 결합이 어떻게 동작하는지, 브로커 설정부터 브라우저 클라이언트 예제까지 차근차근 설명한다.
MQTT over WebSocket 개념
기본 개념
MQTT는 경량 메시지 프로토콜이다. 일반적으로 TCP로 동작하지만, 브라우저 환경에서는 직접 TCP 소켓을 열 수 없어 WebSocket을 통해 MQTT 프로토콜을 전송한다. 이렇게 하면 기존 MQTT 생태계를 웹으로 확장할 수 있다.
왜 WebSocket을 사용하는가
WebSocket은 브라우저에서 지원되며 양방향 통신을 지속적으로 유지한다. MQTT over WebSocket은 브라우저에서 별도의 플러그인 없이 MQTT 브로커와 실시간으로 메시지를 교환할 수 있게 한다. 따라서 실시간 대시보드, 알림, 원격 제어 같은 웹 기능에 적합하다.
사전 준비
시작 전에 필요한 항목은 다음과 같다.
- MQTT 브로커 (예: Mosquitto, EMQX, HiveMQ)
- WebSocket 지원 설정이 가능한 브로커 또는 프록시
- 브라우저에서 동작하는 MQTT 클라이언트 라이브러리 (mqtt.js 권장)
브로커 설정 예시 (Mosquitto)
Mosquitto는 WebSocket을 활성화할 수 있다. 아래는 기본적인 mosquitto.conf 설정 예시다.
# mosquitto.conf 예시
listener 1883
protocol mqtt
listener 9001
protocol websockets
이 설정은 TCP 포트 1883과 WebSocket 포트 9001을 동시에 연다. 실제 운영에서는 TLS를 적용하거나 리버스 프록시를 통해 WebSocket을 노출하는 방식이 더 안전하다.
브라우저 클라이언트 예제
가장 많이 쓰이는 mqtt.js를 이용한 브라우저 예제다. 이 예제는 브로커에 연결하고 토픽을 구독한 뒤 메시지를 전송한다.
<!-- HTML 파일 예시 -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>MQTT WebSocket Example</title>
</head>
<body>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
// 브로커가 ws://localhost:9001에서 WebSocket을 제공한다고 가정
const client = mqtt.connect('ws://localhost:9001');
client.on('connect', function () {
console.log('connected');
client.subscribe('home/temperature', function (err) {
if (!err) {
client.publish('home/temperature', '웹에서 보낸 메시지');
}
});
});
client.on('message', function (topic, message) {
console.log(topic + ': ' + message.toString());
});
</script>
</body>
</html>
위 예제는 기본 연결 방식이다. 실제 환경에서는 사용자 인증, TLS, 세션 유지 정책 등을 추가로 구성해야 한다.
인증과 보안
브라우저에서 WebSocket을 통해 브로커에 접속할 때는 보안에 신경 써야 한다. 권장 사항은 다음과 같다.
- wss (TLS) 사용으로 전송 계층 암호화
- 브로커에서 사용자 인증 및 권한 관리 활성화
- 프록시(Nginx 등)를 통해 인증이나 라우팅을 중앙에서 제어
예를 들어 Nginx를 통해 wss를 설정하면 인증서 관리를 중앙화하고 포트 노출을 줄일 수 있다.
브라우저 mqtt websocket 사용법 팁
- 자동 재연결 옵션을 사용해 네트워크 단절 시 연결 복구
- QoS 수준을 상황에 맞게 설정 (브라우저는 주로 QoS 0/1 사용)
- 세션 지속성(persistence)과 메시지 유지(retained message) 정책 확인
디버깅과 문제 해결
연결이 실패하면 다음을 점검한다.
- 브로커의 WebSocket 포트가 열려 있는지
- 브라우저 개발자 도구의 콘솔과 네트워크 탭에서 WebSocket 프레임 확인
- 브로커 로그에서 인증 오류나 프로토콜 에러 확인
성능 고려사항
동시 연결 수와 메시지 처리량을 고려한다. 브라우저 클라이언트는 가벼운 메시징에 적합하지만, 대량의 실시간 데이터 처리에는 브로커 및 인프라의 확장성 계획이 필요하다. 필요 시 클러스터링, 로드밸런싱, 메시지 큐 구조를 검토한다.
실무 적용 예
웹 대시보드에서 센서 값을 실시간으로 표시하거나, 원격 제어 명령을 전달하는 경우 MQTT over WebSocket 구성이 유용하다. 백엔드와 IoT 디바이스는 TCP MQTT로 통신하고, 웹 클라이언트만 WebSocket을 사용해 동일한 토픽으로 구독/발행하면 통합이 간단하다.
결론
MQTT over WebSocket은 브라우저 기반 실시간 기능을 구현할 때 효율적인 해결책이다. 브로커 설정, 클라이언트 구현, 보안 구성이 핵심이며, 위 예제를 통해 기본 구조를 이해하고 확장하면 실제 서비스에 적용하기 수월하다. 추가로 제공된 브라우저 mqtt websocket 예제를 바탕으로 환경에 맞춘 설정을 적용하면 된다.