Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

HAMA 블로그

Vert.x 를 이용한 실시간 웹 어플리케이션 (2) 본문

Vert.x

Vert.x 를 이용한 실시간 웹 어플리케이션 (2)

[하마] 이승현 (wowlsh93@gmail.com) 2015. 5. 22. 10:45


순서 

1. Vert.x  설치 및 Hello world !! 

2. 간단히  Vert.x  다루어보기 

3..Vert.x 와 MongoDB 연결 

4. 실시간 통신

5. 모듈개발 

6. 배포 


먼저 다음 글을 읽고 시작하자. 


버티클 간의 모든 통신은 이벤트 버스를 통해 이루어진다. 이벤트 버스는 버텍스의 중추 신경계이다. 

버티클끼리 직접통신은 불가능하다. 버티클은 이벤트 버스의 주소에 이벤트를 발행해서 다른 버티클에게 메세지를 보내고,

이벤트 버스주소에 이벤트르르 받을 핸들러를 등록하여 다른 버티클이 보낸 메세지를 받는다.  이벤트를 누가 주고,누가 

받는지 버티클은 모른다. 각 이벤트는 주로 JSON 형식으로 사용된다. 


버텍스 이벤트 버스의 3가지 기본 통신패턴


1. 발행/구독  : 한 버티클이 이벤트를 발행하면 등록된 모든 핸들러가 받는다.

2. 일대일      : 한 버티클이 이벤트를 발행하면 하나의 핸들러만 받고, 여러개가 등록되있으면 라운드 로빈방식으로 분배된다.

3. 요청응답   : 일대일 방식의 확장이고, 발송자는 결과를 받을 응답핸들러를 같이보내고, 수신자는 핸들러에서 응답핸들러에 결과를 보내준다.


1편의 프로젝트에 app.js 을 다음과 같이 바꾸어준다.


var container = require("vertx/container");


container.deployModule("io.vertx~mod-web-server~2.0.0-final", {

  port: 8080,

  host: "localhost",

  bridge: true,                               // 브라우저에서 서버측으로 접근을 허용하게 해준다. (이벤트버스브릿지) 

  inbound_permitted: [

    { address: 'mindMaps.list' },       // 외부로 넘길수있는 이벤트 목록 설정 (mindmaps.js 코드에 각각에 대한 

    { address: 'mindMaps.save' },     //                                             핸들러 함수가 존재한다) 

    { address: 'mindMaps.delete' }

  ]

});

container.deployVerticle('mindmaps.js');  // mindmaps.js 버티클을 배포한다. 



1편의 프로젝트에 index.html 을 다음과 같이 바꾸어준다.


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

</head>

<body>

  <ul class="mind-maps">

  </ul>

  <h2>Create a Mind Map</h2>

  <form class="create-form">

    <input type="text" name="name">

    <input type="submit" value="Create">

  </form>

  // 웹소켓기반으로 양방향 통신 기능을 제공하는 SocketJS , 구 브라우저에서도 동작함. 

  <script src="//cdnjs.cloudflare.com/ajax/libs/sockjs-client/0.3.4/sockjs.min.js"></script>

  <script src="//cdnjs.cloudflare.com/ajax/libs/vertx/2.0.0/vertxbus.min.js"></script>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

  <script src="/client.js"></script>

</body>

</html>



web 폴더에 client.js 파일을 생성한후 다음과 같이 코딩해준다.


var eb = new vertx.EventBus(window.location.protocol + '//' +     // vertx.EventBus 객체 생성 

                            window.location.hostname + ':' +                 // 웹서버가 실행중인 같은 호스트와 포트의

                            window.location.port + '/eventbus');             // /eventbus 경로에 브릿지를 배포 


eb.onopen = function() {      // 이벤트를 송,수신하기전에 이벤트 버스에 연결되면 실행 

  var renderListItem = function(mindMap) {

    var li = $('<li>');

    var deleteMindMap = function() {

      eb.send('mindMaps.delete', {id: mindMap._id}, function() {

        li.remove();

      });

      return false;

    };

    $('<span>').text(mindMap.name).appendTo(li);

    $('<button>').text('Delete').on('click', deleteMindMap).appendTo(li);


    li.appendTo('.mind-maps');    // mind-maps (ul) 클래스에 li 추가 

  };


  $('.create-form').submit(function() {            // submit 시 name  을  인자로 mindMaps.save 호출

    var nameInput = $('[name=name]', this);

    eb.send('mindMaps.save', {name: nameInput.val()}, function(result) { // 응답받은 결과물로 List 갱신 

      renderListItem(result);

      nameInput.val('');

    });

    return false;

  });


  eb.send('mindMaps.list', {}, function(res) {        // 이벤트버스의 mindMaps.list 이벤트 호출 (요청-응답)

    $.each(res.mindMaps, function() {

      renderListItem(this);

    })

  })


};



루트폴더에 maindmmaps.js 를 만들고 다음과 같이 타이핑해준다.


var eventBus = require('vertx/event_bus');


var mindMaps = {};                                  //  빈 mindMaps 객체 생성 


eventBus.registerHandler('mindMaps.list', function(args, responder) {  // mindMaps.list 핸들러 등록 

  responder({"mindMaps": Object.keys(mindMaps).map(function(key) { //호출자에게 키에 해당되는 mindMap                                                                                                       객체를 돌려준다.

  return mindMaps[key];

  })});

});


eventBus.registerHandler('mindMaps.save', function(mindMap, responder) {// mindMaps.list 핸들러 등록 

  if (!mindMap._id) {

  mindMap._id = Math.random();

  }

  mindMaps[mindMap._id] = mindMap;

  responder(mindMap);

});


eventBus.registerHandler('mindMaps.delete', function(args, responder) {// mindMaps.delete핸들러 등록 

  delete mindMaps[args.id];

  responder({});

});



결과 


프로젝트 구조 



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

'Vert.x' 카테고리의 다른 글

Vert.x 를 이용한 실시간 웹 어플리케이션 (4)  (0) 2015.05.22
Vert.x 를 이용한 실시간 웹 어플리케이션 (3)  (0) 2015.05.22
Vert.x 를 이용한 실시간 웹 어플리케이션 (1)  (0) 2015.05.21
Vert.x 와 Node.js 비교  (0) 2015.05.19
Vert.x 컴포넌트들의 이해  (0) 2015.05.19
'Vert.x' Related Articles more
Comments