WebSocket 기반 MQTT 웹 대시보드 만들기
WebSocket과 MQTT를 결합해 브라우저에서 실시간 메시지를 주고받는 웹 대시보드 구현 방법과 핵심 코드 예제 모음
목차
개요
이 글은 브라우저에서 WebSocket을 통해 MQTT 브로커와 통신하는 실시간 대시보드를 만드는 과정을 단계별로 설명한다. 처음 접하는 사람도 이해하기 쉽도록 아키텍처, 필수 구성, 간단한 서버 설정, 클라이언트 코드와 화면 구성 예제를 포함한다.
필수 구성 요소
- MQTT 브로커(예: Mosquitto) - WebSocket 연결 지원
- 브라우저 클라이언트(HTML + JavaScript) - mqtt.js 사용
- 간단한 프론트엔드 UI(실시간 값 표시용)
아키텍처 개요
브라우저는 mqtt.js로 브로커에 WebSocket 연결을 맺는다. 센서나 다른 클라이언트가 MQTT 토픽으로 데이터를 발행하면 브라우저가 구독해 데이터를 수신하고 화면을 업데이트한다. 중간에 별도의 애플리케이션 서버는 반드시 필요하지 않지만, 인증이나 데이터 저장이 필요하면 추가할 수 있다.
브로커 설정(Mosquitto 예시)
Mosquitto에서 WebSocket을 활성화하려면 설정 파일에 listener를 추가한다. 아래 예시는 포트 9001에서 WebSocket을 리스닝한다.
listener 1883
protocol mqtt
listener 9001
protocol websockets
설정 수정 후 브로커를 재시작하면 ws://호스트:9001로 접속 가능하다. 운영 환경에서는 TLS(ws:// → wss://)와 인증을 반드시 고려한다.
클라이언트: HTML 구조
간단한 대시보드 HTML은 토픽 선택, 연결 상태, 실시간 값 표시 영역으로 구성한다. 아래 예제는 mqtt.js를 사용해 WebSocket으로 브로커에 접속하고 메시지를 처리한다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MQTT Web Dashboard</title>
</head>
<body>
<h2>MQTT Web Dashboard</h2>
<div id="status">Disconnected</div>
<div>토픽: <input id="topic" value="sensors/temperature" /></div>
<button id="connectBtn">Connect</button>
<pre id="log" style="height:300px;overflow:auto;border:1px solid #ccc"></pre>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
const statusEl = document.getElementById('status');
const logEl = document.getElementById('log');
const topicInput = document.getElementById('topic');
const btn = document.getElementById('connectBtn');
let client = null;
function log(msg){
logEl.textContent = new Date().toISOString() + ' ' + msg + '\n' + logEl.textContent;
}
btn.addEventListener('click', ()=>{
if(client && client.connected){
client.end();
return;
}
const host = 'ws://localhost:9001';
client = mqtt.connect(host);
client.on('connect', ()=>{
statusEl.textContent = 'Connected';
btn.textContent = 'Disconnect';
const t = topicInput.value;
client.subscribe(t, {qos:0});
log('Subscribed to ' + t);
});
client.on('message', (t,payload)=>{
const msg = payload.toString();
log('RECV ['+t+'] ' + msg);
// 여기서 DOM 업데이트나 차트 데이터 반영 수행
});
client.on('close', ()=>{
statusEl.textContent = 'Disconnected';
btn.textContent = 'Connect';
log('Connection closed');
});
client.on('error', (err)=>{
log('Error: ' + err.message);
});
});
</script>
</body>
</html>
프론트엔드에서 실시간 차트 연결
실시간 그래프는 Chart.js 같은 라이브러리로 쉽게 구현 가능하다. 메시지가 도착할 때마다 차트 데이터에 값을 추가하고 업데이트하면 된다. 데이터 관리와 렌더링 빈도는 브라우저 성능과 메시지 빈도에 맞춰 조절한다.
보안 고려사항
- 프로덕션에서는 wss://와 TLS 인증서를 사용한다.
- 브로커 인증(사용자/비밀번호 또는 토큰)을 적용한다.
- 필요 시 프록시나 인증 서버를 두어 접근 제어를 구현한다.
확장 아이디어
- 서버 측에서 메시지를 수집해 시계열 DB에 저장
- 사용자별 대시보드와 권한 관리 추가
- 웹훅이나 알림 서비스 연동으로 이벤트 알림 제공
정리
WebSocket을 통해 브라우저에서 직접 MQTT 브로커와 통신하면 간단하고 반응성이 좋은 실시간 대시보드를 만들 수 있다. 초기 설정은 브로커의 WebSocket 활성화와 mqtt.js 연결로 빠르게 시작할 수 있다. 보안과 스케일 요구사항은 프로젝트 특성에 맞게 추가 설계를 진행하면 된다.