[2017.10.26] 05. Node.js서버와 Browser클라이언트 [데이터 통신 DB X]

컴퓨터/이론: 개발

[2017.10.26] 05. Node.js서버와 Browser클라이언트 [데이터 통신 DB X]

heepie 2017. 10. 26. 01:41

도입

이번 포스팅에서는 Nodejs 서버와 Browser 클라이언트 간의 통신을 실습할 예정이다. 데이터 요청 방식에 따라

1) GET 방식

2) POST 방식

으로 진행 할 예정이다.

Node.js서버와 Browser클라이언트 [데이터 통신 DB X] 데이터의 흐름

1) Client는 Server에게 로그인 페이지를 요청한다.

2) Server는 요청을 확인 후 해당 페이지를 전달한다.

3) Client는 로그인 페이지에 Id와 Pw를 적어 로그인을 요청한다.

4) Server는 결과를 전달한다.

실습1 - GET 방식

server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// 1. 라이브러리 가져오기
var http = require("http");
var u = require("url");
var qs = require("querystring");
 
// File Stream: 파일을 열기 위한 라이브러리
var fs = require("fs");
 
// 2. 서버 생성
var server = http.createServer(function(request, response) {
  // 주소를 제외한 url 추출
  // console.log(request.url);
  var url = request.url;
 
  var strucedUrl = u.parse(url);
 
  var path = strucedUrl.pathname;
  var cmds = path.split("/");
 
  // console.log(cmds[1]);
  // console.log("Create Server OK");
 
  // RESTFul의 'html' 이라면
  if (cmds[1] == "html") {
    console.log("Html OK");
    if (request.method == "GET") {
      console.log("OK");
 
      // '/' 문자 제거
      var filePath = path.substring(1);
      console.log(path);
 
      // 파일을 연다.
      fs.readFile(filePath, 'utf-8',function(error, data){
              if(error){
          // 파일이 없다면 오류 메시지로 응답
                  response.writeHead(404,{'Content-Type':'text/html'});
                  response.end("<h1>404 Page not found!</h1>");
              }else{
          // 파일이 존재하면 해당 파일로 응답
                  response.writeHead(200,{'Content-Type':'text/html'});
                  response.end(data);
              }
          });
    }
  } else if (cmds[1] == "signin") {
    // GET Method 처리
    if (request.method == "GET") {
      // 서버 내에 변수로 rootId와 rootPw 설정
      var rootId = "heepie";
      var rootPw = "123456789";
      var datas = qs.parse(strucedUrl.query);
      var id = datas.id;
      var pw = datas.pw;
 
      console.log(id + " " + pw);
      // id와 pw 확인
      if (rootId == id && rootPw == pw) {
        response.end("Welcome " + id);
      } else {
        response.end("Check Id or Pw");
      }
    }
  }
});
 
// 3. 클라이언트 대기
server.listen(9000, function() {
  console.log("Server listening ...");
});
Colored by Color Scripter
cs

input_get.html

스크린 샷

Browser의 주소창을 보면 GET 방식은 Url을 통해 데이터를 전달하는 것을 확인 할 수 있다.

실습2 - POST 방식

server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// 1. 라이브러리 가져오기
var http = require("http");
var u = require("url");
var qs = require("querystring");
 
// File Stream: 파일을 열기 위한 라이브러리
var fs = require("fs");
 
// 2. 서버 생성
var server = http.createServer(function(request, response) {
  // 주소를 제외한 url 추출
  // console.log(request.url);
  var url = request.url;
 
  var strucedUrl = u.parse(url);
 
  var path = strucedUrl.pathname;
  var cmds = path.split("/");
 
  // console.log(cmds[1]);
  // console.log("Create Server OK");
 
  // RESTFul의 'html' 이라면
  if (cmds[1] == "html") {
    console.log("Html OK");
    if (request.method == "GET") {
      console.log("OK");
 
      // '/' 문자 제거
      var filePath = path.substring(1);
      console.log(path);
 
      // 파일을 연다.
      fs.readFile(filePath, 'utf-8',function(error, data){
              if(error){
          // 파일이 없다면 오류 메시지로 응답
                  response.writeHead(404,{'Content-Type':'text/html'});
                  response.end("<h1>404 Page not found!</h1>");
              }else{
          // 파일이 존재하면 해당 파일로 응답
                  response.writeHead(200,{'Content-Type':'text/html'});
                  response.end(data);
              }
          });
    }
  } else if (cmds[1] == "signin") {
    // 서버 내에 변수로 rootId와 rootPw 설정
    var rootId = "heepie";
    var rootPw = "123456789";
 
    // GET Method 처리
    if (request.method == "GET") {
      var datas = qs.parse(strucedUrl.query);
      var id = datas.id;
      var pw = datas.pw;
 
      console.log(id + " " + pw);
      // id와 pw 확인
      if (rootId == id && rootPw == pw) {
        response.end("Welcome " + id);
      } else {
        response.end("Check Id or Pw");
      }
    // POST Method 처리
    } else if (request.method == "POST") {
      var postData = "";
      // "data"를 로드하는 리스너 추가, "data"는 예약어
      request.on("data", function(fragment) {
        postData += fragment;
      });
 
      // "end" data가 모두 로드 되면 호출되는 리스너 추가, "end"는 예약어
      request.on("end", function() {
        // 로드한 데이터를 structed 형태로 가공
        var datas = qs.parse(postData);
 
        var id = datas.id;
        var pw = datas.pw;
 
        console.log(id + " " + pw);
        // id와 pw 확인
        if (rootId == id && rootPw == pw) {
          response.end("Welcome " + id);
        } else {
          response.end("Check Id or Pw");
        }
 
      });
    }
  }
});
 
// 3. 클라이언트 대기
server.listen(9000, function() {
  console.log("Server listening ...");
});
Colored by Color Scripter
cs

input_post.html

스크린 샷

Browser의 주소창을 보면 POST 방식은 Url을 통해 데이터를 전달하지 않고 패킷안의 BODY 영역을 통해 데이터를 전달한다.

#Nodejs 서버

저작자표시 비영리 변경금지