HAMA 블로그

순서 

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

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

3..Vert.x 와 MongoDB 연결 

4. 실시간 통신

5. 모듈개발 

6. 배포 

var eb = new vertx.EventBus(window.location.protocol + '//' +

                            window.location.hostname + ':' +

                            window.location.port + '/eventbus');

eb.onopen = function() {

  var renderListItem = function(mindMap) {

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

    var openMindMap = function() {

      new MindMapEditor(mindMap, eb);    //해당 마인드맵이 클릭되면  MindMapEditor 객체를 만든다. 

      return false;                                      

    };                                                        

    var deleteMindMap = function() {

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

        li.remove();

      });

      return false;

    };

    // 네임클릭하면 마인드맵 활성화됨

    $('<a>').text(mindMap.name).attr('href', '#').on('click', openMindMap).appendTo(li); 

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

    li.appendTo('.mind-maps');

  };

  $('.create-form').submit(function() {

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

    eb.send('mindMaps.save', {name: nameInput.val()}, function(result) {

      renderListItem(result);

      nameInput.val('');

    });

    return false;

  });

  eb.send('mindMaps.list', {}, function(res) {  // 서버와 접속되면 마인드맵 리스트를 얻어옵니다. 

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

      renderListItem(this);  // 각 마인드맵을 인자로 넣어주고 리스트 갱신 

    })

  })

};

function MindMapEditor(mindMap, eventBus) {   // MindMapEditor 생성자

  this.mindMap = mindMap;

  this.eventBus = eventBus;

  this.registerEventHandlers();      // MindMapEditor 객체당 새로운  이벤트핸들러를 등록해준다.

  this.initVisualization();

  this.renderVisualization();

}

MindMapEditor.width = 1280;

MindMapEditor.height = 800;

MindMapEditor.levelWidth = 150;

MindMapEditor.treeLayout = d3.layout.tree().size([MindMapEditor.height, MindMapEditor.width]);

MindMapEditor.diagonalGenerator = d3.svg.diagonal().projection(function(d) { return [d.y, d.x]; });

MindMapEditor.prototype.registerEventHandlers = function() {

  var self = this;

  // 이벤트 핸들러를 등록해준다. 나중에 서버에서 발생한 이벤트를 받을수 있게한다. 

  // 상상해본다. 브라우저에서 => 서버 로  Command 날린다.

 //  서버=> 모든 브라우저로  이벤트 전파한다.  이 시스템은 단지 이 두가지로 이루어진다. 

 // 따라서아래의 핸들러는 서버에서 발생한 이벤트를 브라우저에서 적용시키는 과정이다.  

  this.eventBus.registerHandler('mindMaps.events.'+self.mindMap._id, function(event) { 

    switch (event.event) {

      case 'nodeAdded':   self.onNodeAdded(event);   break;

      case 'nodeRenamed': self.onNodeRenamed(event); break;

      case 'nodeDeleted': self.onNodeDeleted(event); break;

    }

    self.renderVisualization();

  });

}

MindMapEditor.prototype.onNodeAdded = function(event) {

  var parent = findNodeByKey(this.mindMap, event.parentKey);

  if (parent) {

  if (!parent.children) {

  parent.children = [];

  }

  parent.children.push(event.node);

  }

}

MindMapEditor.prototype.onNodeRenamed = function(event) {

  var node = findNodeByKey(this.mindMap, event.key);

  if (node) {

  node.name = event.newName;

  }

}

MindMapEditor.prototype.onNodeDeleted = function(event) {

  var parent = findNodeByKey(this.mindMap, event.parentKey);

  if (parent) {

  for (var i=0 ; i<parent.children.length ; i++) {

   if (parent.children[i].key === event.key) {

    parent.children.splice(i, 1);

    return;

   }

  }

  }

}

MindMapEditor.prototype.addNode = function(parentNode) {

  this.eventBus.send('mindMaps.editor.addNode', {

  mindMapId: this.mindMap._id,

  parentKey: parentNode.key

  });

}

MindMapEditor.prototype.renameNode = function(node, newName) {

  this.eventBus.send('mindMaps.editor.renameNode', {

    mindMapId: this.mindMap._id,

    key: node.key,

    newName: newName

  });

}

MindMapEditor.prototype.deleteNode = function(parentNode, childNode) {

  this.eventBus.send('mindMaps.editor.deleteNode', {

    mindMapId: this.mindMap._id,

    parentKey: parentNode.key,

    key: childNode.key

  });

}

MindMapEditor.prototype.initVisualization = function() {

  this.vis = d3.select(".editor").html('').append("svg:svg")

    .attr("width", MindMapEditor.width)

    .attr("height", MindMapEditor.height)

    .append("svg:g")

      .attr("transform", "translate(10,0)");

}

MindMapEditor.prototype.renderVisualization = function() {

  var self = this;

  var nodes = MindMapEditor.treeLayout.nodes(this.mindMap).reverse();

  nodes.forEach(function(d) { d.y = d.depth * MindMapEditor.levelWidth; });

  var node = this.vis.selectAll("g.node")

    .data(nodes, function(d) { return d.key; });

  var nodeEnter = node.enter().append("svg:g")

    .attr("class", "node")

    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

    .attr("opacity", "0");

  nodeEnter.append("svg:circle")

    .attr("r", 4.5)

    .style("fill", "lightsteelblue")

    .on("click", function(c) { self.addNode(c); });

  nodeEnter.append("svg:text")

    .attr("x", 10)

    .attr("dy", ".35em")

    .text(function(d) { return d.name; })

    .on("click", function(d) {

      var text = prompt('Enter a name for this node', d.name);

      if (text) {

        self.renameNode(d, text);

      }

    });

  node.transition()

    .attr("opacity", "1")

    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

    .select("text")

      .text(function(d) { return d.name; });

  node.exit().remove();

  var link = this.vis.selectAll("path.link")

    .data(MindMapEditor.treeLayout.links(nodes), function(d) { return d.target.key; });

  link.enter().insert("svg:path", "g")

    .attr("class", "link")

    .attr("opacity", "0")

    .attr("d", MindMapEditor.diagonalGenerator)

    .on('click', function(l) {

      self.deleteNode(l.source, l.target);

    });

  link.transition()

    .attr("d", MindMapEditor.diagonalGenerator)

    .attr("opacity", "1");

  link.exit().remove();

}

순서 

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

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

3..Vert.x 와 MongoDB 연결 

4. 실시간 통신

5. 모듈개발 

6. 배포 

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' },

    { address: 'mindMaps.save' },

    { address: 'mindMaps.delete' }

  ]

});

container.deployModule("io.vertx~mod-mongo-persistor~2.0.0-final", {   // mongo 모듈이 추가되었네요 !

  address: "mindMaps.persistor",    // 모듈을 위한 이벤트 버스 주소 

  db_name: "mind_maps"              //  이 퍼시스터가 사용할 데이타베이스 이름 

});

container.deployVerticle('mindmaps.js');

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

var console  = require('vertx/console');

function sendPersistorEvent(command, callback) {

  eventBus.send('mindMaps.persistor', command, function(reply) {  // mongo 퍼시스터에 명령을 보내고 

    if (reply.status === "ok") {                                                  // 응답을 받은후에 핸들러 호출 

      callback(reply);

    } else {

      console.log(reply.message);

    }

  });

};

eventBus.registerHandler('mindMaps.list', function(args, responder) {

  sendPersistorEvent(

    {action: "find", collection: "mindMaps", matcher: {}},    // mindMaps 에서 모든것을 가져와서 응답~

    function(reply) {

      responder({mindMaps: reply.results}); 

    }

  );

});

eventBus.registerHandler('mindMaps.find', function(args, responder) {

  sendPersistorEvent(

    {action: "findone", collection: "mindMaps", matcher: {_id: args._id}}, //  id 에 대당하는것을 리턴~

    function(reply) {

      responder({mindMap: reply.result}); 

    }

  );  

});

eventBus.registerHandler('mindMaps.save', function(mindMap, responder) {

  sendPersistorEvent(

    {action: "save", collection: "mindMaps", document: mindMap}, //  새 mindMap 을 저장 

    function(reply) {

      mindMap._id = reply._id;

      responder(mindMap);

    }

  );

});

eventBus.registerHandler('mindMaps.delete', function(args, responder) {

  sendPersistorEvent(

    {action: "delete", collection: "mindMaps", matcher: {_id: args.id}},//  id 를 가진 mindMap 객체 삭제    function(reply) {

      responder({});

    }

  );

});

순서 

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

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

3..Vert.x 와 MongoDB 연결 

4. 실시간 통신

5. 모듈개발 

6. 배포 

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

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

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

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

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

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

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

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 버티클을 배포한다. 

<!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>

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);

    })

  })

};

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({});

});

순서 

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

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

3..Vert.x 와 MongoDB 연결 

4. 실시간 통신

5. 모듈개발 

6. 배포 

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

console.log("hello world");

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

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

  port: 8080,

  host: "localhost"

});

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

</head>

<body>

      Hello!

</body>

</html>