[socket.io] 프로젝트 준비6 - 아두이노 Socket.io

마지막 웹 페이지는 chart.js를 이용해서 멋들어지게 만들고 싶었으나,

프론트는 정말 마지막의 마지막에 완성하면서 하려고 한다.

그래서!!!

---

이번 글에서는 

4. 웹으로 아두이노 데이터 보내기

를 마무리로 해보겠다.

 

저번

3. 아두이노에서 보내는 데이터는 다른 이름의 socket으로 보내기

에 이어서 웹으로 다른 이름의 socket을 만들어줬다.

// index.html의 script부분

<script>
    var socket = io();

    var form = document.getElementById('form');
    var input = document.getElementById('input');
    var data = document.getElementById('data');

    socket.on('temp', function (msg) {
      data.innerText = msg;
    });
  </script>

html부분에는 div태그 안에 p태그가 있고 그 부분에 온도 값을 표시해주려고 한다.

 

아두이노에서 랜덤한 값을 데이터로 보내주고,

웹에서 사용하는 'temp'라는 소켓으로 데이터를 보내주기 위해 

잠깐 아두이노 코드를 수정해줬다.

// Arduino안의 함수
void socketIOEvent(socketIOmessageType_t type, uint8_t * payload, size_t length) {
  switch (type) {
    case sIOtype_DISCONNECT:
      USE_SERIAL.printf("[IOc] Disconnected!\n");
      break;
    case sIOtype_CONNECT:
      USE_SERIAL.printf("[IOc] Connected to url: %s\n", payload);

      // join default namespace (no auto join in Socket.IO V3)
      socketIO.send(sIOtype_CONNECT, "/");
      break;
    case sIOtype_EVENT:
      {
        //사물인터넷보드가 메세지를 수신하는 지점!
        String msg = (char*)payload;
        if (msg == "[\"request\",9999]") {
          int temp = random(0,40);
          // 사물인터넷보드가 데이터를 보내는 로직
          DynamicJsonDocument doc(1024);
          JsonArray array = doc.to<JsonArray>();
          array.add("request");
          array.add(temp);
          String output;
          serializeJson(doc, output);
          socketIO.sendEVENT(output);
        } else {
          USE_SERIAL.println(msg + 'is wrong');
        }
        break;
      }
    case sIOtype_ACK:
      USE_SERIAL.printf("[IOc] get ack: %u\n", length);
      hexdump(payload, length);
      break;
    case sIOtype_ERROR:
      USE_SERIAL.printf("[IOc] get error: %u\n", length);
      hexdump(payload, length);
      break;
    case sIOtype_BINARY_EVENT:
      USE_SERIAL.printf("[IOc] get binary: %u\n", length);
      hexdump(payload, length);
      break;
    case sIOtype_BINARY_ACK:
      USE_SERIAL.printf("[IOc] get binary ack: %u\n", length);
      hexdump(payload, length);
      break;
  }
}

해당 코드를 실행하니

아두이노에서 랜덤한 값을 내뱉으며 잘 동작한다

그렇다면 

웹에서는??

비록 한 줄이지만, 잘 표시가 되고 있다.

 

그렇다면 DB에서는????

마지막 데이터가 전송되기 전에 서버를 종료해서 18이라는 값은 오지 않았지만,

그래도 DB에 잘 저장되고 있다!!!

---

이번 프로젝트는 노드레드를 사용하지 않고 했다는 점에서 의미가 클 것 같다.

노드 레드를 사용하면 훨씬 쉽고 빠르게 만들 수 있기 때문에

나중에 실제 프로젝트에서는 노드 레드를 사용할 것 같다.

다만 노드레드에서 UI를 직접 만들 수 있는지 여부는 더 공부해봐야 할 것 같다.

 

많이 어설펐지만

아두이노 - 서버 - 웹(프론트)까지 서로 다이나믹하게 연결되는

이번 프로젝트도 완성!!!