WEB SOCKET 연동 JAVASCRIPT

전역변수로 URL 을 빼주는게 좋습니다.

어차피 주소는 변하지 않으니 const로 하는게 좋겠죠?

const wsUri="ws://211.189.132.184:13702/fiopr/";
var socket;

변수를 전역변수로 선언해 준후 

websocket에 대한 기초적인 메소드를 설정해줍니다.

자세히 설명하기전에 

onOpen = webSocket 연결 및 데이터 요청

onMessage =요청 데이터 받아와 사용

onError, onClose =말그대로 에러와 연결해제를 알려주는 함수

function webSocketInit(){  //websocket 설정
    socket = new WebSocket(wsUri);  
    socket.onopen = function(msg){onOpen(msg); };
    socket.onmessage= function(msg){onMessage(msg); };
    socket.onclose = function(msg){ onClose(msg); };         
    socket.onerror = function(msg){onError(msg); };
}

그 이후 onOpen 에서 websocket서버와 연결을 시킵니다. 

서버로부터 요청한 데이터가 느릴수 있기 때문에 loadng화면을 설정해줍니다.

그리고 서버로 부터 실시간 데이터를 보여주기 위해서 doSend 함수를 불러 5초간격으로 데이터를 요청하는 코드입니다.

function onOpen(msg){
    $('.dbon').html("웹소켓 연결 성공! <em>"+AF.getCurrDateTime(true)+"</em>");
    if(firstTimeDiv) AF.ocModalPopup('loadingBar', true);
     timer = AF.startTimer(doSend, 5000);                                //5초간격으로 데이터요청 
}

dosSend에서 서버로부터 요청한 데이터가 느리게 오는 경우에 화면 상에도 보여주기 위해 if문을 통하여 loading 하는 모습을 보여줍니다.

그리고 서버로부터 데이터를 요청합니다.

그 데이터를 onMessage로 받아온 데이터들은 겹겹이 쌓여서 오기 때문에 쌓여져 온 것을 풀어주는 코드가 

JSON.parse로 풀어줘 javascript에서 접근하기 쉽게 해줍니다.

서버로 부터 받아온 데이터가 성공적으로 오면 eventData로 보내줍니다.

resultCode는 서버에서 보내줘야됩니다.

websocket 서버는 다음에 더 설명해드리겠습니다.

function doSend(){
    setTimeout(function(){$('#loadingBar h1').text('초기 데이터 로딩 중..');}, 2000);
    var obj = new Object;                                                
    var subObj = new Object;
    obj.cmd = 'equipStatus';
    socket.send(JSON.stringify(obj).toString());
}
function onMessage(msg){
    if(firstTimeDiv) AF.ocModalPopup('loadingBar', true);
    firstTimeDiv = false;
     var data = msg.data;
     data =JSON.parse(data);
    if(data.resultCode==200){
        eventData(data);
    }else if(data.resultCode==300){
        alert("데이터 오류");
    }
}    

eventData 역할은 받아온 데이터를 쓰임에 맞는 함수로 전달합니다.

onError와 onClose 는 말그대로 에러와 접속이 끊어지면 보여주는 함수입니다.

function eventData(data){    
    setFooter(data.cntData);
    mapMarker(data.list);
    dataBox = data.list;
    if(cnt==0){ // 처음 checkBox 설정
        setCheckBox(1);
        cnt = data.list.length;
        return;
    }
    if(dataBox.length!=cnt){ //데이터가 변화가 생기면 현재클릭된 지도부터 set
        setCheckBox(nowRoad);
    }
}
function onError(msg){
    alert("WEBSOCKET ERROR \n");
}
function onClose(msg){
    alert("WEBSOCKET 접속이 해제되었습니다. \n");
    AF.stopTimer(timer);
}