Program Factory

4. STUN이란

알터. — Mon, 4 Nov 2019 16:08:45 +0900

홀펀칭으로 클라이언트간 연결을 하기위해서는 NAT환경마다 조금씩 방법이 다르다.

NAT는 4종류로 나눌 수 있다.

1. Full Cone NAT

2. Restricted Cone NAT

3. Port Restricted Cone NAT

4. Symmetric NAT

Full Cone은 별도의 IP/Port를 검증하지않고 내부에 있는 PC가 서버와 통신을 할경우 생성된 Public IP/Port를 통해 외부와 계속 통신할 수 있다.

Restricted Cone은 Full Cone방식에서 IP검증이 추가 되었다. NAT Table이 생성될 때 사용된 목적지 IP에 대해서만 허용된다. 다른 서버에서 해당 IP/Port를 사용하지못한다.

Port Restricted Cone은 Restricted Cone에서 Port 검증까지 추가 되었다. IP만이아니라 같은 Port로 통신이 되어야한다.

Symmetric은 서버의 주소가 다를경우 전혀 다른 Port로 NAT Table이 생성된다.

위와 같이 NAT종류가 다양해 그냥 연결을 시도하면 장소에따라 연결 되기도 하고 안되기도하는 상황이 생긴다.

따라서 Relay Server의 경우 NAT의 종류 먼저 알아야하며, 이문제를 해결할 수 있는 방법은 STUN이다.

STUN(Session Traversal Utilities for NAT)

STUN은 IETF RFC 5389에 정의된 네트워크 프로토콜 포맷이다. 위에 정리된 NAT환경을 파악하기위해 사용된다.

스턴은 다음과 같은 과정을 거쳐 NAT환경을 알아낸다

3. Hole Punching이란

알터. — Fri, 18 Oct 2019 16:26:22 +0900

NAT 환경에서 P2P 연결을 위해서는 HolePunching을 사용해야한다.

홀펀칭(Hole Punching)은 NAT상황에서 P2P연결을 할때 사용되는 기술이다.

P2P(Peer to Peer)

흔히 스타크래프트와 같은 조금 오래된 게임의 경우 P2P로 연결되어 게임이 진행된다.

서버를 통해서 데이터를 주고 받는것이 아니라 사용자 간에 연결을 구성하는 것을 P2P라고 한다.

일반적으로 P2P연결을 하기위해선 서로의 IP와 Port를 알아야 연결을 할 수 있다.

하지만 가정집의 경우 NAT로 구성되어 있어 쉽게 연결할 수 없다.

NAT(Network Address Translation)

요즘 가정집의 경우 유무선 공유기는 필수로 존재한다. 공유기가 있으면 하나의 인터넷으로 PC, 스마트폰, TV등 각종 전자기기에서 인터넷을 할 수 있게 된다. 이것을 가능하게 해주는 기술이 NAT이다.

쉽게말해서 NAT는 공인 IP 하나를 가지고 여러개의 사설 IP와 연결해주는 기술을 말한다.

공인IP의 경우 고유의 IP로 중복되지 않지만 사설IP의 경우 중복된 IP가 대부분이다. 이름 그대로 사설에서만 사용할 수 있는 IP인 것이다. 그렇기때문에 사설IP를 기반으로 네트워크 통신은 불가능하며 P2P연결도 불가능하게 된다.

이러한 문제를 해결하기 위해 나온것이 Hole Punching이라는 기술이다.

홀펀칭

철심 파일에 종이를 깔끔하게 꽂기 위해서 구멍을 내는 도구를 펀치라고 부른다. 네트워크의 막힌부분에 구멍을 낸다. 라는 의미로 홀펀칭이라고 이름이 지어졌다.

홀펀칭은 NAT상황에서 P2P연결시에 필요하다. NAT는 막힌 벽이고 그것을 뚫어 P2P를 연결하는 것이 홀펀칭인 것이다.

홀펀칭은 사용자만있어서는 구현할 수 없다. 중간에서 다리 역할을 해주는 Relay서버가 필요하다.

언뜻 보면 P2P가 아닌 서버/클라이언트 구조처럼 보일 수 있지만 Relay서버는 연결시 다리역할을 할뿐 데이터 전송에 관여하지는 않는다.

처음엔 서버/클라이언트 방식과 같이 양측 모두 서버로 접속을 시도한다. 그러면 서버에선 접속된 클라이언트들의 정보를 가지고 클라이언트간 터널을 만들어주고 이 터널을 기반으로 통신하게 된다.

이렇게 터널을 연결하여 NAT환경에서 P2P구조를 생성하고 통신이 가능하게된다.

2. 관련 기술 조사

알터. — Fri, 18 Oct 2019 14:44:39 +0900

P2P를 통한 File Transfer를 만들기위해서 필요한 기술을 조사해봤다.

구글에서 찾아본 예시는 대부분 Wifi로 Local 에서 파일전송, 공인IP를 이용한 방법 등이 대부분이다.

Wifi를 이용한 방법은 같은곳에 있을땐 참 좋은방법이지만, 멀리떨어져 다른 네트워크를 사용하면 사용할 수 없는 방법이다..

공인IP를 사용할경우 멀리서도 파일전송이 가능해서 좋다. 다만 스마트폰의 모바일 데이터는 공인IP가 아닌 사설IP를 받아온다.. 따라서 사용할 수 없는 방법이다.

그외 P2P연결에 대한 방법을 찾다가 홀펀칭(Hole Punching)이라는 연결 기술을 찾을 수 있었다.

NAT - NAT 환경에서 사용할 수 있는 방법이라 적합한 기술이라 판단되어 사용하기로 한다.

파일 전송은 다른 통신에서도 가장 많이 사용되는 소켓을통해 구현 할 것이다.

소켓을 사용함으로써 다른 프로그램 제작시에도 도움될것이라 생각했기 때문에 선택했다.

1. 개요

알터. — Fri, 18 Oct 2019 13:21:53 +0900

파일 전송에는 여러가지 방법이 있고 쓰임새도 다양하다.

간단하게는 친구와 사진공유 부터 업무상 문서 공유 영상, 프로그램등 다양한 파일을 전송하거나 받기도 한다.

흔히 이메일, 웹 클라우드 또는 카카오톡, 텔레그렘과 같은 메신져를 이용하여 파일을 주고받는다.

하지만 해당 방법들에는 공통적인 단점이 있다.

서버에 파일을 올리고 받고.. 시간 소모도 있고 일정기간이지만 서버의 리소스를 차지하게 된다.

이러한 부분을 신경쓰지 않기 위해선 P2P통신을 사용할 수 있다.

이미 다양한 P2P File Transfer 서비스가 운영되고 있지만 요즘 사용자에게 PC보다 더 친숙한 안드로이드 스마트폰을 타겟으로 직관적인 어플리케이션을 만들어보고 싶다는 생각을 하게 되었다.

안드로이드 어플리케이션은 대표적으로 2가지 언어를 사용한다. Java 또는 Kotlin. 그 중 구글이 적극적으로 밀고있는 Kotlin 을 사용하기로 하여 프로젝트를 진행하기로 결정했다.

[Javascript]확인, 취소 Confirm Dialog 띄우기

알터. — Tue, 11 Sep 2018 13:28:35 +0900

Javascript를 이용한 Confirm Dialog를 띄우는 방법입니다.

HTML 소스

<body>
  <button id="button">confirm</button>
  <h5 id="text">취소</h5>
</body>

Javascript 소스

<script type="text/javascript">
    document.getElementById("button").onclick = function() {
      var bool = confirm("yes or no");
      var text = document.getElementById("text");
      if (bool) {
        text.innerHTML = "확인";
      } else {
        text.innerHTML = "취소";
      }
    }
</script>

결과

소스 및 예제페이지 확인

[Javascript/jQuery]버튼 클릭, 더블클릭 이벤트

알터. — Thu, 6 Sep 2018 11:09:53 +0900

Javascript와 jQuery를 이용한 클릭, 더블클릭 이벤트 소스입니다.

HTML소스

<body>
  <button id="click">Click</button>
  <button id="dblclick">doubleClick</button>
</body>

Javascript 소스

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
      $("#click").click(function() {
        alert("click");
      });
      $("#dblclick").dblclick(function() {
        alert("double click");
      });
    });
</script>

결과

소스 및 예제페이지 확인

[Javascript/jQuery]Table 특수키(Ctrl, Shift)를 이용한 다중선택

알터. — Tue, 4 Sep 2018 16:28:43 +0900

Javascript와 jQuery를 사용한 Table 다중 선택 소스입니다.

html Table 생성

<body>
  <table class="selectTable">
    <thead>
      <tr>
        <td>title1</td>
        <td>title2</td>
        <td>title3</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
      </tr>
      <tr>
        <td>content4</td>
        <td>content5</td>
        <td>content6</td>
      </tr>
      <tr>
        <td>content7</td>
        <td>content8</td>
        <td>content9</td>
      </tr>
    </tbody>
  </table>
</body>

css 설정

<style>
    .selectTable {
      border: 1px solid #000000;
    }

    #select {
      background-color: #BDBDBD;
    }
</style>

javascript설정

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
  var lastIndex = 0;

    $(document).ready(function() {
      $(".selectTable tbody tr").click(function() {
        var select = $(this);
        var index = select.index();
        select.attr("id", "select");
        if(!window.event.ctrlKey && !window.event.shiftKey) {
          select.siblings().removeAttr("id");
        } else if(window.event.shiftKey) {
          for(var i=Math.min(lastIndex, index);i<Math.max(lastIndex, index);i++) {
            $(".selectTable tbody tr").eq(i).attr("id", "select");
          }
        }
        lastIndex = index;
      });
    });
</script>

결과

추가 옵션

-블록지정 방지

<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">

소스 및 예제페이지 확인