NodeMCU(혹 아두이노)를 이용하여 웹소켓 통신하기(2)

이제 소켓통신을 이용하여 NodeMCU에 연결되어 있는 두개의 LEd를 제어해 보기로 하자. 먼저 아두이노 코드를 수정해 줘야 한다. 앞 단계를 통해서 소켓데이터를 주고 받을 수 있게 되었다. 이제 구현해야 할것은 단순하다. 소켓으로 들어온 데이터가 red이면 red LED를 켜주고 green 이면 green LED를 켜주면 된다. 코드는 아래와 같다.

…

//LED
int led_red = D4;
int led_green = D7;

//WebSocket
WebSocketsServer webSocket = WebSocketsServer(80);

//Callback function(웹소켓 메세지를 수신하면 실행)
void webSocketEvent(uint8_t num,
                     WStype_t type,
                     uint8_t * payload,
                     size_t length) {
   //웹소켓이벤트의 타입
   switch(type) {
     //클라이언트 연결 해제시
     case WStype_DISCONNECTED:
       Serial.printf("[%u] Disconnected!\n", num);
       break;
       //클라이언트 연결시
     case WStype_CONNECTED:
       {
         IPAddress ip = webSocket.remoteIP(num);
         Serial.printf("[%u] Connected!\n", num);
         Serial.println(ip.toString());
       }
       break;
      
     //클라이언트에게 응답을 보낸다.
    case WStype_TEXT:
       {
         Serial.printf("[%u] Text: %s\n", num, payload);
         //data에 따라 LED를 제어
         String text = String((char *) &payload[0]);
         if(text=="red"){
           digitalWrite(led_red, HIGH);
         } else {
           digitalWrite(led_red, LOW);
         }
         if(text=="green"){
           digitalWrite(led_green, HIGH);
         } else {
           digitalWrite(led_green, LOW);
         }
         webSocket.sendTXT(num, payload);
       }
       break;
      
     //기타 필요에 따라
     case WStype_BIN:
     case WStype_ERROR:
     case WStype_FRAGMENT_TEXT_START:
     case WStype_FRAGMENT_BIN_START:
     case WStype_FRAGMENT:
     case WStype_FRAGMENT_FIN:
     default:
       break;
   }
}

void setup() {
   Serial.begin(115200);
   connectWifi();

  pinMode(led_red, OUTPUT);
   pinMode(led_green, OUTPUT);

  //Start websocket server
   webSocket.begin();
   webSocket.onEvent(webSocketEvent);//콜백실행

 
}

…

파이썬에서 다시 red 나 green을 보내면 해당 LED가 켜지는 것을 확인 할 수 있다.

이것을 파이썬으로만 해야 하는 것은 아닌다. 자바스크립트던 뭐던 모두 가능하다. 웹페이지에서 자바스크립트로 이용해서 제어 해보기로 하자. 라즈베리파이 서버의 홈오토메이션에 LED 제어 기능을 추가했다. 

원하는 색상을 선택하면 해당 LED가 켜진다.

<input type="checkbox" id="redLed" onclick="LedControl('redLed');">

체크박스에 스크립트를 연결해 주고

//LED 제어
     function LedControl(color){
         var checkColor = document.getElementById(color).checked;
         if("WebSocket" in window){//브라우저가 지원하는지 체크후
             //웹소켓을 열고
             var ws = new WebSocket("ws://websocketserver_ip:80");
             ws.onopen = function(){
                 //어떤 스위치를 클릭했나?
                 if(color == "redLed"){
                     //데이터를 보내고
                     ws.send("red");
                     document.getElementById("greenLed").checked = false;
                 } else if(color == "greenLed"){
                     ws.send("green");
                     document.getElementById("redLed").checked = false;
                 }
             };
             ws.onmessage = function(evt){
                 var received_msg = evt.data;
                 document.getElementById("colorResult").innerHTML = received_msg + " 선택";
                 ws.close();
             };
             ws.onclose = function(){
                 //alert("Connection is closed...");
             };
         } else {
             alert("웹소켓을 지원하지 않는 브라우저입니다.");
         }
     }

어떤 칼라를 체크했는지 확인후 소켓데이터를 보내면 된다. NodeMCU에서는 이전과 마찬가지로 데이터를 받아서 처리 한다.