웹 소켓(WebSocket) 코드분석(server.js 편)

전체 코드

var WebSocketServer = require("ws").Server;
var wss = new WebSocketServer({ port: 8001 });
CLIENTS = [];
updown = [];


// 연결이 수립되면 클라이언트에 메시지를 전송하고 클라이언트로부터의 메시지를 수신한다
wss.on("connection", function (ws) {
  //CLIENTS.push(ws);

  ws.on("message", function (message) {
    console.log("received: %s", message);
    var jsonData = JSON.parse(message);
    console.log("json=" + jsonData[0].req);

    if (jsonData[0].req == "con") {
      CLIENTS.push(ws);
      console.log(updown);
      ws.send(JSON.stringify(updown));
      // ws.send(JSON.stringify(tables));
      // ///////test
      // userInfo = {};
      // userInfo["req"] = "currentUser";
      // userID.push(userInfo);
      // //ws.send(JSON.stringify(userID));
      // ws.send(JSON.stringify(userID));
      //sendAllExceptMe(message, ws);
    } else if (jsonData[0].req == "up") {
      console.log("send: " + message);
      updownInfo = {};
      updownInfo["req"] = jsonData[0].req;
      updown.push(updownInfo);
      sendAll(message);
    } else if (jsonData[0].req == "down") {
      console.log("send: " + message);
      updownInfo = {};
      updownInfo["req"] = jsonData[0].req;
      updownInfo["downCnt"] = jsonData[0].downCnt;
      updown.push(updownInfo);
      sendAll(message);
    } else if (jsonData[0].req == "passengerClose") {
      console.log("send: " + message);
      updownInfo = {};
      updownInfo["req"] = jsonData[0].req;
      updown.push(updownInfo);
      sendAll(message);
      updown = [];
    }
  });

  ws.on("close", function (message) {
    console.log("close");
    for (var i = 0; i < CLIENTS.length; i++) {
      if (CLIENTS[i] == ws) {
        CLIENTS.splice(i, 1);
      }
    }
  });
  //ws.send("NEW USER JOINED");
  ws.send(JSON.stringify("리선호등장"));
});

function sendAll(message) {
  for (var i = 0; i < CLIENTS.length; i++) {
    //console.log(CLIENTS[i].id);
    CLIENTS[i].send("" + message);
  }
}

function sendAllExceptMe(message, ws) {
  for (var i = 0; i < CLIENTS.length; i++) {
    if (CLIENTS[i] != ws) {
      //console.log("클라이언트 " + CLIENTS[i].id); // userName
      CLIENTS[i].send("" + message);
    }
  }
}

---

한줄 해석

 

var WebSocketServer = require("ws").Server

웹 소켓을 사용하기위해 require을 합니다. 그 값을 WebSocketServer 라는 변수에 담아둡니다.

var wss = new WebSocketServer({ port: 8001 });

WebSocketServer를 열어줍니다. 이때 포트번호는 마음대로 정하면 됩니다. 3000을 하든, 4000을 하든 상관없습니다.

(저는 8001 로 설정했습니다.)

CLIENTS = [];
updown = [];

CLIENTS 와 updown 배열 생성. 이 두가지 배열은 나중에 쓰임.

 

======🙂연결이 수립되면 클라이언트에 메시지를 전송하고 클라이언트로부터의 메시지를 수신한다🙂======

wss.on("connection", function (ws) {
    ws.on("message", function (message) {
    console.log("received: %s", message);
    var jsonData = JSON.parse(message);
    console.log("json=" + jsonData[0].req);

클라이언트가 서버에 접속했을때 처리하는 이벤트 메소드 입니다.

  ㄴ클라이언트로 부터 메시지 수신 시 처리하는 이벤트 메소드.

  ㄴ어떤 메시지를 수신하였는지 console로그로 찍은 코드.

  ㄴ 클라이언트로 받은 메시지를  자바스크립트 함수인 json.parse() 함수를 이용하여 텍스트를 javascript 객체로 변환시킵니다.   그 값을 jsonData 변수에 넣어두는겁니다.

*이때 텍스트가 JSON 형식인지 확인해야 합니다. 그렇지 않으면 구문 오류가 발생합니다.

  ㄴ jsonData의 첫번째 값 중 req 을 콘솔로그에 찍어봅니다.

 

여기서 req 는 제가 임의로 설정해둔 키 입니다. json 형식은 대표적은 키:값 으로 이루어져 있는데 

저는 const text = '{"name":"John", "birth":"1986-12-14", "city":"New York", "req":"up"}';

const text = '{"name":"John", "birth":"1986-12-14", "city":"New York", "req":"up"}';

 

 

그렇다면 콘솔로그에 json = (req 키의 첫번째 값) 이 찍히겠죠? 😊

 

 if (jsonData[0].req == "con") {
      CLIENTS.push(ws);
      console.log(updown);
      ws.send(JSON.stringify(updown));

다음으로는 if 조건문인데요.

 만약 jsonData의 첫번째 값의 req키값이 con일 경우 [ index.jsp 참고]

 } else if (jsonData[0].req == "up") {
      console.log("send: " + message);
      updownInfo = {};
      updownInfo["req"] = jsonData[0].req;
      updown.push(updownInfo);
      sendAll(message);
      
    } else if (jsonData[0].req == "down") {
      console.log("send: " + message);
      updownInfo = {};
      updownInfo["req"] = jsonData[0].req;
      updownInfo["downCnt"] = jsonData[0].downCnt;
      updown.push(updownInfo);
      sendAll(message);
      
    } else if (jsonData[0].req == "passengerClose") {
      console.log("send: " + message);
      updownInfo = {};
      updownInfo["req"] = jsonData[0].req;
      updown.push(updownInfo);
      sendAll(message);
      updown = [];
    }
  });

참고
1. https://kamang-it.tistory.com/entry/NodeJSWebSocketJavaScriptWebSocket-%EA%B8%B0%EC%B4%88-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EB%8B%A8%EC%9D%BC-%ED%86%B5%EC%8B%A0-serverclient1 
2.https://www.npmjs.com/package/ws#api-docs (웹소켓 참고)
3.https://www.w3schools.com/js/js_json_parse.asp (json parse() 참고)