[통신] Web으로 MQTT 통신하기 (2)

amudomolla·2022년 4월 19일

통신

목록 보기

5/6

web으로 mqtt 통신하기

front 페이지에서 web과 broker의 통신은 sub/pub가 지속되어야 한다.

실시간으로 subscribe하고 publish할 수 있어야 한다.

websocket 통신을 이용해서 작업해야 한다.

mosquitto(broker)가 websocket 통신을 지원한다.

그래서 back-end에서 websocket 통신하는 코드를 직접 작성하지 않아도 된다.

mosquitto의 설정 파일을 변경한다.

기본 설정은 일반적인 mqtt 통신만 지원되도록 설정되어 있다.

이것을 일반적인 mqtt 통신과 websocket 통신이 모두 지원되도록 변경해줘야 한다.

1. Port, Protocol 설정

1) 메모장을 관리자 권한으로 열기

2) 열기 클릭

3) mosquitto.conf 파일에 port, protocol 추가

mosquitto 파일로 찾아 들어가서 파일을 모든 파일로 한 다음 mosquitto.conf 파일 열기

mosquitto.conf 맨 밑으로 스크롤을 내려가서 아래 내용 붙여넣기

listener 9001
protocol websockets

#mqtt
listener 1883
protocol mqtt

4) cmd 열고 명령어 입력

cd\
cd Program Files
cd mosquitto
mosquitto –c mosquitto.conf -v

📌 TCP는 1883, Websocket은 9001

❌ 해당 CMD 끄지 말 것!

2. Javascript 클라이언트 다운로드

1) 링크 접속
https://mqtt.org/

2) Client library 복사하기

📌 For the plain library 복사하기

✔ For the plain library는 개발자 버전, For the minified library는 압축 버전이므로 자신의 목적에 맞게 사용하면 된다.

3. HTML 작성하기

1) Pycharm 열기

2) html 파일에 자바스크립트 명시

✍ 위에서 복사한 library 붙여넣기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js"
            type = "text/javascript"> </script>    // 위에서 복사한 Client Library
    <script type="text/javascript">
        var host = "192.168.219.104";
        var port = 9001;
        var mqtt;

        // callback함수 - 접속이 완료된 후 호출되는 함수
        function onConnect(){
            console.log("접속완료");
        }
        // callback함수 - 접속 실패하면 호출되는 함수
        function onFailure(){
            console.log("접속실패");
        }
        // publish하는 함수 정의
        function sendMsg(msg){
            alert(msg);
            /*
            1. message객체 생성하기
            2. 토픽을 설정
            3. send메소드를 호출
            */
            message = new Paho.MQTT.Message(msg);
            message.destinationName = "iot/led";  // topic 설정
            //mqtt 메시지 보내기 - publish
            mqtt.send(message);
        }
        //mqtt 통신을 관리하기 위한 사용자 정의 함수
        function MQTTConnect(){
            console.log("mqtt 접속:"+host+","+port);
            //mqtt 통신을 위한 클라이언트 객체 생성
            mqtt = new Paho.MQTT.Client(host,port,"javascript_client"); // "javascript_client"는 클라이언트 구분을 위한 id
            // mqtt 통신을 위해 필요한 설정을 명시
            var options = {
                timeout:3,
                onSuccess:onConnect,  // 접속 성공 했을 때 실행될 콜백함수 등록
                onFailure:onFailure,
            }
            mqtt.connect(options);
        }
    </script>
</head>
<body>
    <script type="text/javascript">
        // 사용자 정의 함수를 호출해서 mqtt가 동작할 수 있도록 해준다.
        MQTTConnect()
    </script>
    <h1>MQTT와 웹소켓 테스트</h1>
    <div id="data"></div>
    <form>
        <input type="button" value="led켜기" onclick="sendMsg('led_on')">
        <input type="button" value="led끄기" onclick="sendMsg('led_off')">
    </form>
</body>
</html>

4. LED 불 켜기 TEST

1) 라즈베리파이 원격창에서 해당 코드 Run시키기

📌 해당 원격창은 VSCode에서의 원격창을 말하는 것

'''
<LED 제어하기>
- LED불켜기, 불끄기
- 라즈베리파이가 subscriber
  message가 led_on이 오면 : led켜기
  message가 led_off가 오면 : led끄기
- Application(PC=CMD)가 publisher
  키보드로 입력받은 메시지를 publish
'''

import paho.mqtt.client as mqtt
import RPi.GPIO as GPIO
import time

led_pin = 24
# GPIO핀을 어떤 방법으로 액세스할 것인지 모드를 설정
GPIO.setmode(GPIO.BCM)
# GPIO핀이 입력인지 출력인지 설정하기
GPIO.setup(led_pin,GPIO.OUT)

def connect_result(client, userdata, flags, rc):
    print("connect.."+str(rc))  # rc가 0이면 접속 성공, 1이면 실패
    if rc==0:  # 연결 성공하면, 구독신청
        client.subscribe("iot/#")  # iot/로 topic명이 시작하면 뒤에는 어떤 키워드가 와도 모두 수신
    else:
        print("연결 실패..")

def on_message(client, userdata, message):
    myvalue = message.payload.decode("utf-8")
    print(message.topic+"---"+myvalue)
    if myvalue == "led_on":
        GPIO.output(led_pin, GPIO.HIGH)  # 24번으로 출력 
    else:
        GPIO.output(led_pin, GPIO.LOW)  # 24번으로 출력 

try:
    mqttClient = mqtt.Client()
    mqttClient.on_connect = connect_result
    mqttClient.on_message = on_message  # 메시지가 broker에서 전달됐을 때, callback함수가 호출되도록 등록
    mqttClient.connect("192.168.219.104",1883,60)
    mqttClient.loop_forever()  # 등록한 topic의 메시지를 broker에서 전송받아야 하므로 대기
except KeyboardInterrupt:
    pass
finally:
    pass

2) 서버 다시 실행
pycharm 터미널에 명령어 입력