Socket.iO comunication between Visual Studio based C++ and nodeJS (셋팅편)

 

 

Introduction

---

  이번 포스팅은 제목 그대로 내용을 작성하려고 합니다. 최근 들어, 모바일 기기로 iOS, Android를 많이 사용하고 있습니다. 그리고 사용자들이 주로 사용하는 플랫폼으로 모바일 외, Windows, macOS, linux 등을 이용하고 있습니다. Watch series의 경우는 모바일 기기에 종속되기때문에 제외하도록 하겠습니다. 일단 본 포스팅의 주된 목표는 앞서 말한 플랫폼의 클라우드를 구축하는 것으로서 네트워크를 통해 연결작업을 준비해야합니다. 이를 위해 필자는 아래와 같이 테스트를 해보았습니다. 

 

• TCP/UDP 형태의 통신 테스트
• Windows Server(C/C++) <-> iOS Client (language:siwft)
• 통신 가능
• Error: 영문으로 된 데이터만 전송할 경우는 문제가 되지 않으나 한글이 들어간 경우 글자가 깨지는 문제 발생
• Windows Server(C/C++) <-> Android Client (language: Java, Kotlin)
• 통신 가능
• 한글 데이터 전송 문제 없음
• nodeJS Server with mongoDB <-> (iOS,Android) Client (Language: Swift, Java, Kotlin)
• 통신 가능
• 문제 없음 
• nodeJS Server with mongoDB <-> Windows Client(C/C++)
• 진행중

 

일단 네트워크 프레임워크(모듈)을 각각 만들고 있는데, 처음에는 주로 사용하는 C/C++ 기반의 TCP/UDP 통신을 이용하여 서버 구축 후, 모바일과의 연동작업을 시작하였습니다. Java를 이용한 안드로이드 통신은 이미 해결해두었기때문에 문제가 없었지만, iOS와의 통신에서는 한글 인코딩 문제로 인해, TCP/UDP socket 통신을 포기하였습니다. (한글 인코딩 문제를 해결하는 것도 찾아보고 해결방안 정리중입니다.)

 

  그리고 무엇보다 Server 구축 후 데이터베이스와 연동해서 사용할 예정이라 nodeJS서버로 넘어갔습니다. 이후, web통신을 하는 방법으로 Websocket 및 socket.io를 이용하기로 하였습니다. 그래서 iOS기반에서 socket.io를 이용하는 방법을 찾아보니 cocoapods을 이용한 방법이 있어 쉽게 해결완료. 안드로이드의 경우도 사용한 사례 및 예제들을 통해 해결완료. 마지막으로 Windows기반에 C++을 이용한 예제도 있었지만, 생각보다 알아야하는 것과 정리해둬야하는 부분들이 많이 있었습니다.  그래서 이번 포스팅에서는 온라인의 예제를 통해, 필요한 부분들을 순차적으로 정리를 먼저 하려고 합니다. 기존에 만들어둔 소스코드에 적용하기 위해서죠. 이후의 포스팅에 TCP/UDP 기반 소켓통신을 하는 모듈이 있는 경우 따라서 테스를 해보시면 좋지 않을까 합니다. 

 

 

 

 

 

변경사항

---

  블로그 포스팅 되기 전 여러 socket.io 관련 모듈들을 다운 받아 테스트를 하나씩 해보았습니다. 포스팅을 위해 cellophane.io 라이브러리를 다운 받아 사용 중 빌드가 되지 않는 문제가 있었습니다. (빌드야 되겠지만, 해결방법을 찾지 못했죠 현재로선...), 그렇게 한참을 인터넷 바다를 해매다 다시 socket.io homepage에 접속하게 되었습니다. 젤 처음 socket.io를 위해 boost 라이브러리 설치를 하였습니다. 그리고 이후 몇가지 추가 설정으로 인해 막혀 있다가 천천히 살펴보니, 확인하지 못한 부분을 찾아 최종 빌드 및 테스트 성공을 맞쳤습니다. 이렇게 쉬운 내용인데, 오래 걸렸다는게 참 ㅠㅠ 안쓰럽네요. 그래서 블로그로 연결방법까지만, 정리하도록 하겠습니다. 이후는 document 를 찾아보면 쉽게 해결이 가능합니다. 언제나 개발은 셋팅이 50%라는 말이 있듯이 제 블로그에는 언제나 절반만 있고 나머지는 없죠...^^;;

 

블로그 작성을 위해 그동안 작성한 포스팅은 휘리릭~ 날려버리고 새로 작성합니다.  설치과정부터 하나씩 살펴보도록 하겠습니다. 

 

 

socket.io Library 설치

---

socket.io homepage 홈페이지에 접속을 하게 되면 아래와 같은 문구가 있습니다. 

 

Based on Boost and WebSocket++, this full-featured Socket.IO 1.0 client has the fundamental advantage of working on multiple platforms. Check out the directory of examples. It contains examples of iOS, QT, and CLI chat clients!

 

 

Boost 및 webSocket++ 기반으로 되어있고, iOS, Qt, CLI(?)  등등에서 사용가능하다고 되어있습니다. 물론, Visual Studio에서도 사용가능합니다. 그리고 socket.io-client-cpp 에 접속을 하면 lib 폴더가 있는데, RapidJSON, websocketpp 라이브러리가 추가로 필요합니다.  설치과정까지 주절주절 설명할 필요는 없을것 같아 아래와 같이 요약본으로 남겨드립니다. 순서대로 설치해주시기 바랍니다. 

 

• download github source code
• socket.io-client-cpp
• RapidJSON
• websocketpp 

 

상위 github 코드 3개를 다운 받으시면 됩니다. (path 설정관련은 아래 참조) 

 

• Boost Library 설치- 블로그로 정리해두었으니 참고하여 build 하시기 바랍니다. (10분이면 됨)

 

이제 필요한 재료는 전부 끝. 

 

Boost Library를 상위 블로그에 따라 설치(build) 완료 후, path는 다음과 같이 구성해주시면 됩니다.

 

• Library path
• Boost : ~\Boost\boost_1_74_0\boost
• rapidjson: ~\Boost\boost_1_74_0\boost\rapidjson
• websocketpp: ~\Boost\boost_1_74_0\boost\websocketpp

 

그리고 socket.io를 테스트 하기위해서 아래 visual studio project 파일을 실행시켜 주시면 됩니다. 

 

• ~\socket.io-client-cpp\socket.io\examples\Console\SioChatDemo\SioChatDemo.sln

 

이때, Boost Library 포스팅에 작성된  (include / lib) path를 Visual Studio Project에 추가 설정 잊어버리지 않으셨죠?

 

• 다음 할일
• 예제 프로젝트(SioChatDemo)에 잘못 추가된 include / lib path 는 삭제해주시기 바랍니다. 
• Property pages > configuration properties > Linker > input > Additional Dependencies 에 작성된 "boost.lib" 삭제 

 

이제 빌드 하면 끝?? 실행됩니다. 간단하죠? 

 

 

위의 결과는 nodeJS를 webpage로 접속하여 발생한 메시지이고, 아래는 visual studio에서 실행 후, 받은 메시지 입니다. 결과 증빙완료!!

 

테스트는 끝이났지만, 아직 몇가지 작업을 더 거쳐야 합니다. 가장 중요한 사용방법을 모르자나요????

그래서 사용방법은 간단히 준비를 해두었습니다. 이후는 찾아보면서 작업하시면 빠르게 뭔가 만드실 수 있을테니깐요. 

 

 

 

 

 

 

사용방법

---

 

main.cpp 

#include <rapidjson/document.h>
#include <rapidjson/encodedstream.h>
#include <rapidjson/writer.h>
#include <cassert>
#include <boost/lexical_cast.hpp>

// ...

using namespace rapidjson;
using namespace std;

// ...

 

 

main.cpp 파일 내부에 상위 코드를 적절히 추가합니다. 위치까지 설명안해줘도 되죠? 

 

main.cpp : main() 함수 내부 중 수정사항

MAIN_FUNC
{


    sio::client h;
    connection_listener l(h);
    
    h.set_open_listener(std::bind(&connection_listener::on_connected, &l));
    h.set_close_listener(std::bind(&connection_listener::on_close, &l,std::placeholders::_1));
    h.set_fail_listener(std::bind(&connection_listener::on_fail, &l));
    // ...

    h.connect("http://localhost:3014"); // IP 및 PORT는 서버 설정에 맞춰서 수정 할 것

        // ... 생략 (소스코드 추가위치)

    current_socket->emit("message", ownShipRadarString); // 현재 수정된 코드 
}

 

상위 코드 주석과 같이 IP, PORT는 서버 설정에 따라 수정하시면 됩니다. 그리고 아래 코드를 조금 더 내려오면 emit() 를 하는 부분이 있습니다.  상위 결과 처럼 connect 수행되는 것과 서버에 맞춰 message 이벤트를 발생하였을 경우, 메시지가 제대로 넘어가는지 확인을 하기위해 아래의 코드를 "소스코드 추가위치" 에 추가하면 됩니다. 

 

    rapidjson::Document document;
    document.SetObject();
    rapidjson::Document::AllocatorType& allocator = document.GetAllocator();

    document.AddMember("sender", "from Win_VS", allocator);
    document.AddMember("recepient", "ALL", allocator);
    document.AddMember("command", "chat", allocator);
    document.AddMember("type", "text", allocator);
    document.AddMember("data", "visual studio message~~", allocator);
    
    StringBuffer strbuf;
    strbuf.Clear();
    Writer<StringBuffer> writer(strbuf);
    document.Accept(writer);

    std::string ownShipRadarString = strbuf.GetString();
    current_socket->emit("message", ownShipRadarString);

 

순서대로 이야기를 드리자면, JSON Document를 생성합니다. 그리고 아래와 같은 구조로 소스코드를 전달 하기위해 Addmember()를 이용하여 값을 추가 합니다. 그리고 생성된 JSON Document를 cstring 형태로 변환하기위한 작업을 거쳐 emit()를 수행하게 되는 것입니다. 

 

이후 포스팅 예고: Socket.iO comunication between iOS app and nodeJS

 

   let message: [String: Any] = [
            "sender": "from iOS",
            "recepient": "ALL",
            "command": "chat",
            "type":"text",
            "data": "한글테스트"
        ]

 

이렇게 하게되면 서버에서 JSON 결과값을 확인 할 수 있습니다. 서버 소스코드에 따라 큰 따옴표(") 가 들어가서 파싱이 안되는 경우가 있으니 이런건 알아서 적절히 수정하시기 바랍니다. 

 

포스팅 작업은 완료되었으나, 아직 블로그에 업로드가 되지 않은 iOS socket.iO 활용편과 Android socket.IO 활용편이 있습니다. 남은 두 포스팅을 같이 참조하게 되면 이제는 nodeJS서버 구축 후, iOS App, Android App, Windows Application, Web page의 4가지가 동시에 접속 가능한 서버를 만들게 되는 것입니다.  이후 남은 작업들은 이제 각각의 App에 기획에 따른 기능을 구성하여 입맛대로 만드신다면 더 바랄 것도 없겠죠? 하지만, nodeJS 서버의 성능과 socket.iO의 성능, 한글인코딩 문제, DB구축의 문제 등등이 많이 남아있습니다. (저는 해결다했죠...남은 시간동안 이제 열심히 만들기만 하면됩니다. 🙂

 

블로그에 socket.io를 사용하는 방법에 대해 더 쓰고 싶으나 이번 포스팅은 여기까지 작성하고 향후 socket.io의 활용편으로 돌아오도록 하겠습니다. 

 

 

 

Reference

---

 

• socket.io homepage
• github, socket.io-client-cpp / socket.io C++ client
• github, RapidJSON
• github, websocketpp
• 기타 참고자료로 사용한 곳
• WebSocket++ document
• How to serialize RapidJSON document to a string?
• github, rapidjson_gen_json.cpp 에서 Addmenber() 사용법 일치
• RapidJSON Document
• How to add rapidjson::Document in file