쟁이? 쟁이!

서버 만들기

- 프로젝트>구성요소 메뉴를 눌러, Windows Common Controls 6.0/Winsock Control을 선택합니다.

아래는 소켓 서버 샘플소스입니다.

아래는 클라이언트 소스코드 샘플입니다.

서버에서 소켓을 생성하고, 소켓에 로컬이름을 할당합니다.(ip주소, 포트 바인딩)

그리고, 클라이언트의 연결 요청을 기대립니다.( listen)

서버는 여기서 대기상태를 유지하게 되고,

클라이언트는 소켓을 생성하고, 서버의 ip및 포트를 설정하고 서버에 연결합니다.(connect)

그러면 서버는 새로운 소켓을 생성하고, 클라이언트의 연결요청을 허용합니다.

그리고, 기존 소켓은 다른 클라이언트의 연결요청을 기다리며 대기하게 됩니다.(accept)

이제 연결된 소켓으로 데이터를 송신/수신합니다.(SendData/GetData)

연결을 해제합니다.(Close메서드)

전 포스팅 글에서 ajax post 전송방법에 대해 알아오았습니다. 포스트방식을 많이 쓰고 있지만, 파일 전송이라던지, 많은 input값을 가지고 있을 경우에는 form 전체를 전송하던지, formdata 객체를 활용해 form의 일부 엘리먼트값을 전송하기도 합니다.

아래는 html 일부의 샘플을 보여줍니다.
//test.html
<form id=“form1”>
<input type=“text” id=“txtId” />
<input type=“text” id=“txtPwd” />
...
<input type=“button” id=“btnLogin” value=“로그인” />
</form>

아래는formdata객체를 활용해서, 서버로 submit 하는 샘플입니다. 폼 전체를 전송할수 있지만, 꼭 필요한 객체만 전송하는 방법을 예로 들었습니다. FormData 객체는 append함수를사용하는데, 파라미터는 key, value 두개를 받습니다.

//test.js
$(‘#btnLogin’).click(){

var formData = new FormData();
formData.append(“txtId”, $(‘#txtId’).val());
formData.append(“txtPwd”,$(‘#txtPwd’).val());

});

이렇게 서버로 던진경우, asp.net web api 를 기준으로 서버에서 받는 예시를 보여드립니다.

[HttpPost]
Public void Insert()
{
var id = HttpContext.Current.Request.Form[“txtId”].ToString();
var pwd =
HttpContext.Current.Request.Form[“txtPwd”].ToString();
}

위와같이 Request Form 데이터로 받으시면 됩니다.

웹페이지에서 서버로 데이터 전송시, 아마 요즘 가장 많이 사용하는 방법이 ajax 호출일겁니다.
이중에서도 get/post방식을 주로 사용할 건데, get방식은 서버url에 파라미터를 붙이는 방식입니다. 편하기도 하고, 공유하기도 좋긴 한데, 파라미터가 눈으로 보이니 보안에 좀 취약합니다.
그래서 아이디나 비밀번호 전송시에는 보통 post방식을 사용합니다.(물론 fiddler 등 네트워크 패킷을 까보면 다 나오긴 합니다만...)
그럼 post샘플을 한번 작성해 보겠습니다.

—- 아래와같은 조건일 경우—-
Id 입력 textbox id : txtId
비밀번호 입력 textbox id : txtPWd
로그인버튼 id: btnLogin
—-
$(‘#btnLogin’).click(function(){
var id = $(‘#txtId’).val();
var pwd = $(‘#txtPwd’).val();

var info = {
id : id,
pwd : pwd
};
var result = JSON.stringify(info);//json형태로 전송시 사용.
$.ajax({
method : ‘post’,
url : ‘웹서비스 주소’,
contentType : ‘application/json’,
data : result
}).done(function(data){
alert(‘반갑습니다.’);
});
});

—-
위와 같이 form의 엘리먼트값들을 객체화 하고, 이를 시리얼라이즈해서 json형태로 말아서 서버로 전송되는것이 핵심입니다.

다음시간에는 서버에서 어떻게 받아서 처리해야되는지 알아보겠습니다.