강의 #5

클라이언트 -> 서버로 향하는 메시지 수신하기

websocket.on("message", function incomming(message) {
    message = JSON.parse(message);
    console.log(message);
})

Event: 'message'

• https://github.com/websockets/ws/blob/master/doc/ws.md#event-message
• data {Buffer|ArrayBuffer|Buffer[]}
  isBinary {Boolean}
• 메시지가 수신될 때 발생한다. data는 메시지 내용. isBinary는 메시지가 바이너리인지 여부를 지정한다.

새로운 접속자 정보 수신하기

• switch문으로 받은 메세지 코드가 connect_name일 때 user_name을 저장할 수 있게 한다.
• 갱신한 user정보를 클라이언트 측에도 전달한다

server

websocket.on("message", function incomming(message) {
    message = JSON.parse(message);
    console.log(message);
    switch (message.code) {
        case "connect_name": // 사용자 추가
            ALL_WS.forEach(function (element, index) {
                if (element.user_id == message.user_id) {
                    element.user_name = message.user_name;
                }
            })
            sendAllUsers();
            break;
    }
})

function sendAllUsers() { // 전체 사용자 정보를 보냄
    let data = {
        "code": "all_users",
        "msg": JSON.stringify(ALL_WS)
    };
    ALL_WS.forEach(function (element, index) {
        element.ws.send(JSON.stringify(data));
    });
}

client

websocket.onmessage = function (e) { // 서버로부터 메시지가 올 때, 이 이벤트가 실행
    let message = JSON.parse(e.data);
    switch (message.code) {
        case "my_user_id": // user_id가 전송됨
            MY_USER_ID = message.user_id;
            sendMyNmae(my_user_name);
            // alert("user_id 받음: " + MY_USER_ID);
            break;
        case "all_users": // 전체 사용자를 받음
            let ALL_WS = JSON.parse(message.msg);
            $("#divAllUser").html(""); // divAllUser 초기화
            ALL_WS.forEach(function (element, index) {
                $("#divAllUser").append(`
							<div>
								${element.user_name}
							</div>
							`);
            });
            break;
    }
}