웹 소켓 (코드 분석)

전체 코드 (index.jsp)

var webSocket = new WebSocket("ws://192.168.110.104:8001");

 webSocket.onopen = function(message) {
    var data = {};
     var sendData = [];
     data['req'] = 'con';
     sendData.push(data);
     var jsonData = JSON.stringify(sendData);
     webSocket.send(jsonData);
   };
   
   // WebSocket 서버와 접속이 끊기면 호출되는 함수
   webSocket.onclose = function(message) {
     
   };
   
   // WebSocket 서버와 통신 중에 에러가 발생하면 요청되는 함수
   webSocket.onerror = function(message) {
     // 콘솔 텍스트에 메시지를 출력한다.
   };
   
   // WebSocket 서버로 부터 메시지가 오면 호출되는 함수
   webSocket.onmessage = function(message) {
      jsonRev = JSON.parse(e.data);
       console.log('e.data ::: ' + e.data);
      
      if(jsonRev[i].req == "up"){
      // message.data =="1"은 up을 나타낸다.
      
         document.getElementById("passenger1").innerHTML = jsonRev[i].upCnt;
      }
      else if(jsonRev[i].req == "down"){
      // message.data =="2"은 down을 나타낸다.
        
         document.getElementById("passenger2").innerHTML = jsonRev[i].downCnt;
      }
   };

 

---

 

var webSocket = new WebSocket("ws://192.168.110.104:8001");

👉WebSocket 객체 생성 에 대한 코드입니다.

ws 는 지난 글(https://couchcoding.tistory.com/330)에 보면 설명을 해두었는데요 

ws 는 http , wss는 https 를 의미한다고 했었습니다.

그러니까 http://192.168.~~~ 로 자동 접속 시작한다는 의미입니다. + onopen 함수가 호출됩니다.

 

 webSocket.onopen = function(message) {
    var data = {};
     var sendData = [];
     data['req'] = 'con';
     sendData.push(data);
     var jsonData = JSON.stringify(sendData);
     webSocket.send(jsonData);
   };

👉WebSocket 서버와 접속이 되면 호출되는 함수입니다.(onopen)

 

var data = {}

var sendData=[] 이렇게 되어있습니다.

이 둘의 차이점에 대해서 간단히 설명하자면 {}는 객체이고 []는 배열이라는 점이죠.

배열은 숫자 키만 할당되도록 의도된 개체 유형입니다.

그렇기 때문에 

JSON.stringify(sendData);  이 코드가 왜 있는지 자연스럽게 이해가 되는거죠.

배열로 받은 값을 숫자가 아닌 json화 시키는 코드입니다.

 

그 후 jsonData 변수에 저장후, WebSocket 오브젝트의 send()호출하여 보내고 싶은 메시지인 jsonData변수를 보내버립니다.

 

 

JSON을 쓰는 이유가 뭘까?
=>  JSON을 사용하면 복잡한 데이터를 편리하게 보낼 수 있다.

   webSocket.onclose = function(message) {
     
   };

👉WebSocket서버와 접속이 끊기면 호출되는 함수입니다.(onclose)

 

 

 

   webSocket.onerror = function(message) {
     // 콘솔 텍스트에 메시지를 출력한다.
   };

👉WebSocket서버와 통신 중에 에러가 발생하면 요청되는 함수입니다. (onerror)

 

 

 

   webSocket.onmessage = function(message) {
      jsonRev = JSON.parse(e.data);
       console.log('e.data ::: ' + e.data);
      
      if(jsonRev[i].req == "up"){
      // message.data =="1"은 up을 나타낸다.
      
         document.getElementById("passenger1").innerHTML = jsonRev[i].upCnt;
      }
      else if(jsonRev[i].req == "down"){
      // message.data =="2"은 down을 나타낸다.
        
         document.getElementById("passenger2").innerHTML = jsonRev[i].downCnt;
      }
   };

👉WebSocket 서버로 부터 메시지가 오면 호출되는 함수입니다. (onmessage)

 

json.parse() 를 하면 ()안에 값은 json 형식이여야 합니다.

만약 json 형식이 아니라면 자바스크립 오류가 발생합니다.

 

var data = '{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14}'; // JSON 형식의 문자열

var dog = JSON.parse(data);   // JSON 형식의 문자열을 자바스크립트 객체로 변환함.

http://www.tcpschool.com/examples/tryit/tryhtml.php?filename=json_use_js_02

 

 

 

 

참고:

https://eloquentjavascript.net/1st_edition/chapter4.html (객체와 배열)

https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications (웹 소켓)

https://velog.io/@jinjinhyojin/WebSocket-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 (웹 소켓)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse (json.parse(), reviver 매개변수)