MQTT와 WebSocket으로 만드는 브라우저 알림 시스템

개요

웹 애플리케이션에서 실시간 알림을 구현할 때 MQTT와 WebSocket 조합은 가볍고 반응성이 좋다. 브라우저 mqtt 알림은 페이지가 열린 동안 빠르게 메시지를 전달한다. 본문에서는 아키텍처와 구성 방법, 예제 코드를 통해 web mqtt push 알림 흐름을 단계별로 설명한다.

아키텍처 개념

기본 흐름은 다음과 같다. 디바이스나 서버가 MQTT 브로커로 메시지를 퍼블리시한다. 브라우저는 WebSocket을 통해 브로커에 구독하고 알림을 받는다. 이 방식은 mqtt websocket 알림 시스템에서 흔히 쓰이는 패턴이다.

핵심 구성 요소

• MQTT 브로커: 메시지 라우팅과 토픽 관리
• 브라우저 클라이언트: WebSocket을 통해 MQTT 구독
• 알림 표시: Notification API로 사용자에게 푸시

브로커 설정 예시 (Mosquitto)

브로커는 WebSocket 리스너를 지원해야 한다. 아래는 mosquitto.conf의 최소 설정 예제이다.

listener 1883
protocol mqtt

listener 8083
protocol websockets
# 인증과 TLS 설정은 운영 환경에서 필수

브라우저 클라이언트 구현

브라우저에서는 mqtt.js 같은 라이브러리를 사용한다. 아래 예제는 WebSocket으로 브로커에 연결하고 토픽을 구독한 뒤 Notification API로 알림을 표시하는 기본 흐름을 보여준다.

/* 브라우저용 mqtt.js 사용 예시 */
const client = mqtt.connect('wss://broker.example.com:8083/mqtt')

client.on('connect', () => {
  console.log('MQTT connected')
  client.subscribe('alerts/general')
})

client.on('message', (topic, message) => {
  const payload = message.toString()
  showNotification('알림', payload)
})

function showNotification(title, body) {
  if (Notification.permission === 'granted') {
    new Notification(title, { body })
  } else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') new Notification(title, { body })
    })
  }
}

코드 설명

• mqtt.connect의 URL은 wss 스키마 사용. TLS 적용 권장.
• client.subscribe로 관심 토픽을 지정.
• Notification API로 사용자 알림을 표시. 권한 체크 필수.

토픽 설계와 페이로드

토픽은 계층적이고 의미 있게 설계한다. 예를 들어 device/{id}/alert 또는 user/{id}/notification 형태가 일반적이다. 페이로드는 JSON으로 통일하면 파싱이 쉽다. 예시:

{
  "title": "주문 상태",
  "message": "주문이 출고되었습니다.",
  "type": "order"
}

연결 안정성 및 재접속

브라우저 네트워크는 불안정하므로 재접속 로직이 필요하다. mqtt.js는 자동 재접속 옵션을 제공한다. 백오프 전략을 적용해 과도한 재시도를 방지한다. 또한 페이지 숨김이나 절전 상태에서 동작이 제한될 수 있음을 고려한다.

보안 고려사항

• WebSocket은 반드시 wss를 사용해 TLS를 적용한다.
• 브로커 인증을 적용한다. 토큰 기반 인증과 ACL로 토픽 접근 제어를 구성한다.
• 브라우저에 노출되는 클라이언트 인증 정보는 최소화한다. 가능하면 단기 토큰을 사용한다.

한계와 보완

MQTT over WebSocket 방식은 페이지가 열려 있을 때에만 동작한다. 백그라운드에서 완전한 푸시를 원하면 Web Push와 서비스 워커 조합을 고려해야 한다. 다만 실시간 상호작용이 필요한 서비스에는 MQTT 방식이 유리하다.

배포 및 운영 팁

• 브로커 로그와 구독자 수 모니터링으로 과부하를 사전 파악한다.
• 토픽과 페이로드 크기를 설계 단계에서 최적화한다.
• TLS 인증서와 토큰 만료 정책을 자동화한다.

결론

MQTT와 WebSocket 결합은 웹에서 실시간 알림을 효율적으로 구현하는 방법이다. 브로커 설정, 인증, 클라이언트 재접속, 알림 권한 처리만 신경 쓰면 안정적인 mqtt websocket 알림 시스템을 구축할 수 있다. 특히 브라우저 mqtt 알림은 사용자 경험 개선에 즉각적인 효과가 있다.