강의 #6

채팅 메시지 전송하기

function sendMessage() {
	let message = $.trim($("#txtMessage").val());
	if (!message) {
		alert("보낼 메시지를 입력해 주세요");
		$("#txtMessage").focus();
		return false;
	}

	let data = {
		"code": "send_message",
		"user_name": MY_NAME,
		"user_id": MY_USER_ID,
		"msg": message
	};
	websocket.send(JSON.stringify(data));
}

• client측에서 메세지가 입력되면 send_message code로 user_name, user_id, message 전송

case "send_message": //채팅 메시지 받음
    ALL_WS.forEach(function(element, index) {
        //element.ws 클라이언트와의 연결 지점
        let data = {
            "code": "chat_message",
            "msg": message.msg,
            "sender": message.user_name
        };
        element.ws.send(JSON.stringify(data));
    });
    break;

• server측에선 받은 message 소켓을 모든 클라이언트들에게 다시 전송

case "chat_message":
    $("#divMsg").append(`
                            <div>
                                ${message.sender}: ${message.msg}
                            </div>
                            `);
    break;

• server측에서 뿌린 메시지를 클라이언트 측에서 처리

클라이언트 접속 종료 처리하기

websocket.on("close", function close(code, reason) {
	ALL_WS.forEach(function(element, index) {
		if (element.ws == websocket) {
			ALL_WS.splice(index, 1); //index로부터 한 개만 제거
		}
	});
	sendAllUsers();
});

• close event 처리
• ALL_WS 배열에서 닫힌 웹소켓에 해당하는 인덱스 제거 후 sendAllUsers 함수로 목록을 업데이트 해준다.

Event: close

• https://github.com/websockets/ws/blob/master/doc/ws.md#event-close
• 서버가 닫힐 때 발생.