관리 메뉴

HAMA 블로그

Vert.x (mod-socket-io) & Socket.io 를 이용한 PUSH 본문

Vert.x

Vert.x (mod-socket-io) & Socket.io 를 이용한 PUSH

[하마] 이승현 (wowlsh93@gmail.com) 2015. 5. 7. 11:32


배경에 대해서 먼저 말해보면 현재 IoT 관제시스템을 만들고 있는데, 

브라우저-웹서버 - 드라이버 -   중계서버 -  집중화서버  - 컨트롤러 - 디바이스 대략 이런식이다. 

웹서버는 Spring 으로 만들어져있으며, 드라이버 컴포넌트를 임베디드한다. 

프런트엔드는 AngularJS 기반의 자바스크립트 프로그램이다. 


이 시스템은 양방향인데  간단하게, 디바이스에서 넘어오는 데이타도 처리하고 ,

브라우져에서 디바이스로 보내는 데이터도 있다는 의미이다. 


이때 브라우져에서 웹서버로 넘길때에는 Rest API 를 적절히 사용하며 

디바이스에서 넘어오는 데이타를 브라우저에 적용할때, Vert.x 와 Socket.io 를 사용한다.



Node 이 WebSocket 을 쉽게 사용할수있도록 Socket.io 가 있는것처럼 Vert.x 도 WebSocket 을 쉽게 사용할수 있는 래퍼가 있는데 (https://github.com/keesun/mod-socket-io) 이것을 사용하였다.


참고자료 : http://www.slideshare.net/daumdna/devon-2012-b3-verx-socket

 


먼저 서버부분을 보자


- mod-socket-io-131.jar / vertx-core-1.3.1.final.jar / vertx-platform-1.3.1.final.jar 추가.


SwitchService  클래스 


@Service

public class SwitchService {


private static final Logger logger = LoggerFactory.getLogger(SwitchService.class);

@Autowired PushService        pushServer;    // PushService 객체를  연결해준다.


public PushService  getPushService(){

return pushServer;

}



PushService  클래스 


@Component

public class PushService extends DefaultEmbeddableVerticle {    


private static final Logger logger = LoggerFactory.getLogger(PushService .class);

private SocketIOServer io;   // SocketIO 래퍼 



@Override

// 객체가 생성되는 동시에 start 를 호출해서  HttpServer 를 실행한다.

// DefaultEmbeddableVerticle  클래스에서 Vertx 객체를 만들어서 넘겨준다.

public void start(Vertx vertx){


System.out.println("PushService start....!!");

HttpServer server = vertx.createHttpServer();  // HTTPServer 생성

io = new DefaultSocketIOServer(vertx, server); //  Socket.IO 래퍼 생성 

io.sockets().onConnection(new Handler<SocketIOSocket>() { // Connection 이벤트

public void handle(final SocketIOSocket socket) {

System.out.println("PushService.emit('welcome');");

socket.emit("welcome");


}

});

server.listen(19999);

}


public SocketIOServer getIo() {

return io;

}

public void  responseDelay(){

 

io.sockets().emit("exception","Delaying a response..");

}

public void  changeUserMode(){  

 

io.sockets().emit("exception" ,  "Mode is abnormal..");

}

public void  tramsNotConnected(){


logger.info("//     TRAMS is disconnected..              // ");   

io.sockets().emit("exception", "TRAMS is disconnected..");

}

}



SwitchRecvHandler  클래스  ( 사물로 부터 넘어온 데이타를 처리하는 객체 ) 


public class SwitchRecvHandler implements ReceiveHandler {


SwitchService switchService;

public SwitchRecvHandler( SwitchService switchService){

this.switchService = switchService;

}

public void handle(DataInfo di){

switchInfo data = (switchInfo) di;

....


 비지니스 로직 처리 

....


JsonObject json = new JsonObject();

json.putString("SWITCH-ID",data.getSwitchID());

json.putString("STATE", String.valueOf(data.isSwitchState()));

json.putString("TYPE", data.type());  

json.putString("DESCRIPTION", data.getDescription());

 

                 //  emit 함수로 key 가 'update' 인 데이터를  브라우저로 쏴준다.

switchService.getPushService().getIo().sockets().emit("update",json); 

}

}



클라이언트 부분 



monitering.html


<script src="../..//resources/lib/socket.io.js"></script>



monitering.js



var app = angular.module('moniteringApp', ['colorpicker.module', 'ui.bootstrap']);

app.controller('moniteringCtrl',function($scope, $http,$modal){

        

var socket = io.connect("http://localhost:19999");


// key 가 'update' 인 데이터 받아서 처리 
socket.on('update', function(msg){  
  console.dir(msg);
   $scope.$apply(function(){
    ...
 
   });
   
   $scope.reloadUsage();
    var deviceid =  FindPropertyInJson(msg,"DEVICE-ID") ;
    if($scope.currentSelectedNode == deviceid)
        getSelectedSwitchesUsage(deviceid);
   
    getSelectedNodeState(deviceid, false);
});

}


0 Comments
댓글쓰기 폼