Node.js와 Vue.js로 MQTT 구현하기: 실시간 IoT 애플리케이션 개발의 모든 것

---

사물인터넷(IoT)의 급속한 성장으로 인해 실시간 데이터 통신의 중요성이 점점 더 커지고 있습니다. MQTT(Message Queuing Telemetry Transport)는 경량 프로토콜로, 제한된 대역폭과 자원에서 효율적으로 데이터를 전송하는 데 최적화되어 있습니다. 이를 활용하면 센서 데이터 수집, 스마트 홈 제어, 실시간 데이터 스트리밍 등 다양한 IoT 애플리케이션을 개발할 수 있습니다. 이번 글에서는 Node.js와 Vue.js를 사용하여 MQTT 프로토콜을 구현하는 방법을 자세히 살펴보겠습니다. 키워드는 "Node.js, Vue.js, MQTT, 실시간 통신, IoT 애플리케이션, Mosquitto 브로커, MQTT.js, Vue-MQTT, 데이터 스트리밍, 센서 데이터, 토픽 구독, QoS 설정, 퍼블리싱, 구독 관리, 브로커 설정, 프론트엔드와 백엔드 통합, 보안, TLS 인증, JSON 데이터 처리, 상태 관리, UI 업데이트, 실시간 그래프"입니다.

---

1. MQTT란?

MQTT는 브로커 기반의 메시징 프로토콜로, 퍼블리셔(Publisher)와 구독자(Subscriber)가 브로커를 통해 메시지를 주고받습니다. 클라이언트는 특정 "토픽(Topic)"에 메시지를 발행하거나 구독할 수 있으며, 메시지가 토픽에 게시되면 이를 구독한 모든 클라이언트에게 전달됩니다. 경량성과 안정성 덕분에 IoT 환경에서 널리 사용됩니다.

---

2. 프로젝트 설정: Node.js와 Vue.js 준비

728x90

2.1. Node.js 프로젝트 설정

1. Node.js 프로젝트 생성 및 패키지 설치:
2. mkdir mqtt-app cd mqtt-app npm init -y npm install mqtt express cors body-parser
3. Mosquitto 브로커 설치:
   MQTT 브로커로 Mosquitto를 사용합니다.
4. sudo apt-get install mosquitto sudo systemctl start mosquitto

2.2. Vue.js 프로젝트 생성

1. Vue CLI를 사용하여 프로젝트 생성: 
2. vue create mqtt-client cd mqtt-client npm install vue-mqtt

---

3. 백엔드 구현: Node.js로 MQTT 퍼블리싱과 구독

Node.js에서 MQTT.js를 사용하여 퍼블리셔 및 구독자 기능을 구현합니다.

// server/index.js
const express = require('express');
const mqtt = require('mqtt');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
app.use(cors());
app.use(bodyParser.json());

// MQTT 브로커 연결
const mqttClient = mqtt.connect('mqtt://localhost:1883');

// 브로커 연결 상태 확인
mqttClient.on('connect', () => {
  console.log('MQTT 브로커에 연결되었습니다.');
  mqttClient.subscribe('test/topic', (err) => {
    if (!err) {
      console.log('test/topic 구독 완료');
    }
  });
});

// MQTT 메시지 처리
mqttClient.on('message', (topic, message) => {
  console.log(`토픽: ${topic}, 메시지: ${message.toString()}`);
});

// API 라우트: 메시지 발행
app.post('/publish', (req, res) => {
  const { topic, message } = req.body;
  mqttClient.publish(topic, message, () => {
    res.send('메시지가 발행되었습니다.');
  });
});

app.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행 중');
});

---

4. 프론트엔드 구현: Vue.js와 MQTT 통합

Vue.js에서 vue-mqtt를 사용하여 MQTT 클라이언트를 설정합니다.

4.1. Vue-MQTT 플러그인 설정

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import VueMqtt from 'vue-mqtt';

const app = createApp(App);

app.use(VueMqtt, 'ws://localhost:8080/mqtt', {
  clientId: `mqtt_${Math.random().toString(16).substr(2, 8)}` // 고유 클라이언트 ID
});
app.mount('#app');

4.2. MQTT 기반 컴포넌트 구현

<!-- src/components/MqttClient.vue -->
<template>
  <div class="mqtt-client">
    <h1>MQTT 실시간 데이터</h1>
    <input v-model="topic" placeholder="토픽 입력" />
    <textarea v-model="message" placeholder="메시지 입력"></textarea>
    <button @click="publishMessage">발행</button>
    <h2>수신 메시지</h2>
    <ul>
      <li v-for="(msg, index) in receivedMessages" :key="index">
        {{ msg }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topic: 'test/topic',
      message: '',
      receivedMessages: []
    };
  },
  mounted() {
    this.$mqtt.subscribe(this.topic, () => {
      console.log(`구독 완료: ${this.topic}`);
    });

    this.$mqtt.on('message', (topic, message) => {
      this.receivedMessages.push(`${topic}: ${message.toString()}`);
    });
  },
  methods: {
    publishMessage() {
      this.$mqtt.publish(this.topic, this.message);
      this.message = '';
    }
  }
};
</script>

<style>
.mqtt-client {
  max-width: 500px;
  margin: 0 auto;
}
</style>

---

5. IoT 데이터 시각화와 상태 관리

728x90

5.1. 실시간 그래프 추가

실시간 데이터를 시각화하려면 Chart.js와 같은 라이브러리를 사용합니다.

npm install chart.js vue-chartjs

<!-- src/components/RealTimeChart.vue -->
<template>
  <div>
    <h1>실시간 데이터 그래프</h1>
    <line-chart :chart-data="chartData" :options="chartOptions" />
  </div>
</template>

<script>
import { Line } from 'vue-chartjs';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

export default {
  components: { Line },
  data() {
    return {
      chartData: {
        labels: [],
        datasets: [
          {
            label: 'MQTT 데이터',
            backgroundColor: 'rgba(75,192,192,0.2)',
            borderColor: 'rgba(75,192,192,1)',
            data: []
          }
        ]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    };
  },
  mounted() {
    this.$mqtt.subscribe('sensor/data');
    this.$mqtt.on('message', (topic, message) => {
      if (topic === 'sensor/data') {
        const value = parseFloat(message.toString());
        this.chartData.labels.push(new Date().toLocaleTimeString());
        this.chartData.datasets[0].data.push(value);

        if (this.chartData.labels.length > 10) {
          this.chartData.labels.shift();
          this.chartData.datasets[0].data.shift();
        }
      }
    });
  }
};
</script>

---

6. 보안 강화와 TLS 인증

6.1. Mosquitto TLS 설정

1. Let's Encrypt 또는 OpenSSL로 인증서 생성.
2. Mosquitto 설정 파일에서 TLS 활성화:

   listener 8883
   cafile /path/to/ca.crt
   certfile /path/to/server.crt
   keyfile /path/to/server.key
   

6.2. MQTT.js TLS 연결

Node.js 클라이언트에서 TLS 활성화:

const mqttClient = mqtt.connect('mqtts://your-secure-broker', {
  ca: fs.readFileSync('/path/to/ca.crt')
});

---

결론

이 글에서는 Node.js와 Vue.js를 사용하여 MQTT를 기반으로 실시간 IoT 애플리케이션을 개발하는 방법을 다뤘습니다. MQTT 브로커 설정부터 퍼블리싱, 구독, 데이터 시각화, 보안 강화까지 구현 과정을 상세히 설명했습니다. 이를 통해 IoT 환경에서 실시간 데이터 통신과 대규모 기기 관리를 효과적으로 수행할 수 있는 강력한 기반을 마련할 수 있습니다. 이제 직접 구현하여 IoT 프로젝트를 시작해보세요!