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

배경에 대해서 먼저 말해보면 현재 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);

});

}