JSON-RPC 서버 만들기 11장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03

Presentation on theme: "JSON-RPC 서버 만들기 11장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03"— Presentation transcript:

1 JSON-RPC 서버 만들기 11장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
○ 본 강의 자료는 이지스퍼블리싱에서 제공하는 강의 교안입니다. ○ 본 강의 교안은 아래 출판 서적의 내용을 기준으로 구성되었습니다. 또한 다수의 기타 서적이나 사이트를 참조하였습니다. 레퍼런스를 참조하십시오. 2017, 정재곤, “Do it! Node.js 프로그래밍 (개정판)”, 이지스퍼블리싱 - 강의 교안에 사용된 화면 캡처나 실습 자료의 경우에는 문서 업데이트에 따라 변경될 수 있습니다.

2 JSON-RPC 서버를 어떻게 만드는지 알아보자
강의 주제 및 목차 강의 주제 JSON-RPC 서버를 어떻게 만드는지 알아보자 목 차 1 JSON-RPC를 웹서버에 적용하기 2 계산기 모듈 추가하여 실행하기 3 데이터베이스에서 사용자 리스트 조회하기 4 데이터 부분을 암호화하기

3 1. JSON-RPC를 웹서버에 적용하기 난이도 소요시간 20분

4 JSON-RPC란? RPC(Remote Procedure Call)는 서버에 데이터를 요청하여 응답 받는 과정을 라이브러리에서 자동으로 처리 JSON 포맷으로 데이터를 주고 받는 경우 JSON-RPC라고 부름

5 라이브러리 사용 jayson 모듈 설치하고 불러들여 사용
% npm install jayson --save var handler_loader = require('./handlers/handler_loader'); ……. // JSON-RPC 사용 var jayson = require('jayson'); // JSON-RPC 핸들러 정보를 읽어 들여 핸들러 경로 설정 var jsonrpc_api_path = config.jsonrpc_api_path || '/api'; handler_loader.init(jayson, app, jsonrpc_api_path); console.log('JSON-RPC를 [' + jsonrpc_api_path + '] 패스에서 사용하도록 설정함.');

6 기본 패스를 설정에 등록 기본 패스를 설정에 등록한 후 요청하는 방식 module.exports = { …….
▶ : 3000/api module.exports = { ……. jsonrpc_api_path : '/api' }

7 핸들러 정보 등록 Handlers 폴더 안에 handler_info.js 파일 만들어 각각의 핸들러 등록
console.log('handler_info 파일 로딩됨.'); var handler_info = [ {file : './echo', method : 'echo'} ]; module.exports = handler_info; var echo = function(params, callback) { console.log('JSON-RPC echo 호출됨.'); console.dir(params); callback(null, params); }; module.exports = echo;

8 호출 방식 서버에 등록한 모듈을 클라이언트 웹에서 호출하여 사용

9 클라이언트 웹 페이지 작성 jquery.jsonrpc.js 라이브러리 사용
▶ <script src = "jquery min.js"></script> <script src = "jquery.jsonrpc.js"></script> <script> $(function() { $.jsonRPC.setup({ endPoint : ' namespace : '' });

10 클라이언트 웹 페이지 작성 요청 버튼 클릭 시 처리 $("#requestButton").click(function() {
var message = $("#messageInput").val(); var method = 'echo'; $.jsonRPC.request(method, { id : 1001, params : [message], success : function(data) { println('정상 응답을 받았습니다.'); console.dir(data); println(data.result); }, error: function(data) { println('오류 응답을 받았습니다.'); println(data.error.message); } }); println('[' + method + '] method로 요청을 보냈습니다.');

11 서버에 요청할 때 전달되는 객체의 속성 $.jsonRPC.request() 메소드를 호출하여 전달 속성 이름 설명 id
params 서버로 보낼 데이터를 넣는 배열 객체입니다. success 응답을 성공적으로 받았을 때 호출되는 콜백 함수입니다. error 오류 응답을 받았을 때 호출되는 콜백 함수입니다. 속성 이름 설명 id 요청할 때 전달한 id 값이 들어 있습니다. jsonrpc JSON-RPC 스펙의 버전을 표기합니다. 여기에서는 ’2.0’입니다. result 응답 데이터가 배열 객체로 들어 있습니다.

12 echo 기능 테스트 웹 페이지에서 요청한 후 응답 확인
▶

13 echo 함수를 실행하는 과정 서버에 함수를 정의한 후 클라이언트에서 호출

14 오류 발생 시 처리 오류 발생했을 때 처리하는 방식 알아보기
var echo_error = function(params, callback) { console.log('JSON-RPC echo_error 호출됨.'); console.dir(params); // 파라미터 체크 if (params.length < 2) { // 파라미터 개수 부족 callback({ code : 400, message : 'Insufficient parameters' }, null); return; } var output = 'Success'; callback(null, output); }; module.exports = echo_error;

15 오류 발생 확인을 위한 웹페이지 서버 모듈 등록 후 클라이언트 웹페이지 작성
$("#requestButton").click(function() { var message = $("#messageInput").val(); var method = 'echo_error'; $.jsonRPC.request(method, { params : [message], success : function(data) { println('정상 응답을 받았습니다.'); console.dir(data); println(data.result); }, error : function(data) { println('오류 응답을 받았습니다.'); println(data.error.code + ', ' + data.error.message); } }); println('[' + method + '] method로 요청을 보냈습니다.'); ▶

16 2. 계산기 모듈 추가하여 실행하기 난이도 소요시간 20분

17 서버에 add 모듈 추가하는 방식 더하기 모듈을 만들어 서버에 추가하고 클라이언트 웹 페이지 작성

18 1단계 : 핸들러 모듈 파일 만들기 add.js 파일 작성
var add = function(params, callback) { console.log('JSON-RPC add 호출됨.'); console.dir(params); if (params.length < 2) { // 파라미터 개수 부족 callback({ code : 400, message : 'Insufficient parameters' }, null); return; } var a = params[0]; var b = params[1]; var output = a + b; callback(null, output); }; module.exports = add;

19 2단계 : 핸들러 모듈 파일 등록하기 add.js 파일에 대한 정보를 handler_info.js 파일에 등록 …….
var handler_info = [ {file : './add', method : 'add'}, ];

20 3단계 : 클라이언트 웹 문서 만들어 호출하기 태그 추가 및 자바스크립트 코드 작성
<h3>JSON-RPC Add 테스트</h3> <br> <input type = "text" value = "10" name = "aInput" id = "aInput"/> <p>+</p> <input type = "text" value = "10" name = "bInput" id = "bInput"/> <input type = "button" name = "requestButton" id = "requestButton" value = "요청하기"/> <p>결과<p> <div id = "results"></div> …….

21 3단계 : 클라이언트 웹 문서 만들어 호출하기 태그 추가 및 자바스크립트 코드 작성
$("#requestButton").click(function() { var aStr = $("#aInput").val(); var bStr = $("#bInput").val(); var a = parseInt(aStr); var b = parseInt(bStr); var method = 'add'; $.jsonRPC.request(method, { id: 1002, params: [a, b], success: function(data) { println('정상 응답을 받았습니다.'); console.dir(data); println(data.result); }, error: function(data) { println('오류 응답을 받았습니다.');

22 3. 데이터베이스에서 사용자 리스트 조회하기 난이도 소요시간 30분

23 실제 사용하는 코드에 적용 사용자 리스트 조회 함수를 만들어 호출하도록 구성할 수 있음
var listuser = function(params, callback) { console.log('JSON-RPC listuser 호출됨.'); console.dir(params); var database = global.database; if (database) { console.log('database 객체 참조됨.'); } else { console.log('database 객체 불가함.'); callback({ code : 410, message : 'database 객체 불가함.' }, null); return; } if (database.db) { database.UserModel.findAll(function(err, results) {

24 실제 사용하는 코드에 적용 사용자 리스트 조회 함수를 만들어 호출하도록 구성할 수 있음 if (results) {
console.log('결과물 문서 데이터의 개수 : %d', results.length); var output = [ ]; for (var i = 0; i < results.length; i++) { var curId = results[i]._doc.id; var curName = results[i]._doc.name; output.push({id : curId, name : curName}); } console.dir(output); callback(null, output); ……. {

25 함수 등록 새로 만든 listuser 함수를 handler_info.js 파일에 등록 var handler_info = [
……. {file : './listuser', method : 'listuser'} ];

26 클라이언트 웹 페이지에서 요청 요청 버튼 클릭 시 동작하는 자바스크립트 코드 작성 ……. // 버튼을 클릭했을 때 서버에 요청
$("#requestButton").click(function() { var method = 'listuser'; var id = 1004; var params = [ ]; sendRequest(method, id, params); println('[' + method + '] method로 요청을 보냈습니다.'); });

27 클라이언트 웹 페이지에서 요청 요청을 위한 공통 함수 …….
function sendRequest(method, id, params) { $.jsonRPC.request(method, { id : id, params : params, success : function(data) { println('정상 응답을 받았습니다.'); console.dir(data); processResponse(data); }, error : function(data) { println('오류 응답을 받았습니다.'); processError(data); } });

28 클라이언트 웹 페이지에서 요청 정상 응답을 받았을 때 호출되는 함수 ……. // 성공 응답을 받은 경우 호출되는 함수
function processResponse(data) { if (Array.isArray(data.result)) { println('사용자 수 : ' + data.result.length); data.result.forEach(function(item, index) { println('#' + index + ' : ' + item.id + ', ' + item.name); }); } else { println('결과 데이터가 배열 타입이 아닙니다.'); }

29 코드 구조 요청을 하면 listuser 함수가 실행되고 응답을 보내주는 방식
▶

30 4. 데이터 부분을 암호화하기 난이도 소요시간 20분

31 암호화 송수신 과정 JSON-RPC로 데이터를 주고받는 부분을 암호화

32 클라이언트 웹 페이지 수정 암호화 라이브러리를 사용하는 방식으로 수정
▶ $("#requestButton").click(function() { var message = $("#messageInput").val(); // 암호화 테스트 var secret = 'my secret'; var encrypted = '' + CryptoJS.AES.encrypt(message, secret); console.log(encrypted); // 복호화 테스트 var decrypted = CryptoJS.AES.decrypt(encrypted, secret).toString(CryptoJS.enc.Utf8); console.log(decrypted); var method = 'echo_encrypted'; $.jsonRPC.request(method, { id : 1001, params : [encrypted], success : function(data) { println('정상 응답을 받았습니다.'); console.dir(data);

33 클라이언트 웹 페이지 수정 암호화 라이브러리를 사용하는 방식으로 수정 var secret = 'my secret';
var encrypted = data.result[0]; var decrypted = CryptoJS.AES.decrypt(encrypted, secret).toString(CryptoJS.enc.Utf8); console.log(decrypted); println(decrypted); }, error : function(data) { println('오류 응답을 받았습니다.'); console.dir(data); println(data.error.message); } }); println('[' + method + '] method로 요청을 보냈습니다.'); …….

34 서버 코드에서 암호화 외장 모듈 crypto-js를 설치한 후 코드 수정
% npm install crypto-js --save var crypto = require('crypto-js'); var echo = function(params, callback) { console.log('JSON-RPC echo_encrypted 호출됨.'); console.dir(params); try { // 복호화 테스트 var encrypted = params[0]; var secret = 'my secret'; var decrypted = crypto.AES.decrypt(encrypted, secret).toString(crypto.enc.Utf8); console.log('복호화된 데이터 : ' + decrypted);

35 서버 코드에서 암호화 외장 모듈 crypto-js를 설치한 후 코드 수정 // 암호화 테스트
var encrypted = '' + crypto.AES.encrypt(decrypted + ' -> 서버에서 보냄.', secret); console.log(encrypted); params[0] = encrypted; } catch(err) { console.dir(err); console.log(err.stack); } callback(null, params); }; module.exports = echo;

36 웹페이지에서 요청한 결과 확인 요청 후 서버 쪽 콘솔 확인
▶

37 참고 문헌 [ References] 기본 서적
2017, 정재곤, “Do it! Node.js 프로그래밍 (개정판)”, 이지스퍼블리싱 Node.js Site