💡 소켓 채팅에서 메시지마다 읽지 않은 사람 수 보여주기 방법

이번 프로젝트에서 구현한 방법입니다.
DB와 연동한 소켓으로 구현한 채팅방에서 메시지마다 읽지않은 사람 수를 실시간으로 보여주는 기능입니다.

✏️ 한 클라이언트가 readMember() 호출하면서부터 시작

readMember() 호출 시점

• 방에 입장했을 때 (소켓 연결 됐을 때)
• 소켓 메세지를 읽었을 때

readMember()

• 클라이언트 본인이 읽었다는 것을 서버에 알려주는 js 함수
• 클라이언트가 입장한 방과 본인의 아이디(m_id)를 알려준다.
• 서버는 db에 해당 유저가 읽었다는 사실을 업데이트
• db 업데이트 이후 콜백함수로 유저는 send('readMember') 호출

function readMember() {
	$.ajax({
		url: _contextPath + '/talk/readMember',
		data: {	'roomNumber' : $("#roomNumber").val(),
				'm_id' : $("#m_id").val()
		},
		type: 'get',
		success: function (res) {
			send('readMember');
		},
		error : function(err){
			console.log('error');
		}
	});
}

✏️ send('readMember')를 통해 서버에 type이 'readMember'인 소켓 메시지 전송

• type을 'readMember'인 소켓 메시지 전송하는 js 함수

function send(type) {
	if (!type) {
		type = 'message';
	}
	var option ={
		type: type,
		roomNumber : $("#roomNumber").val(),  
		sessionId : $("#sessionId").val(),
		userName : $("#m_name").val(),
		msg : $("#chatting").val(),
		m_id : $("#m_id").val()
	}
	ws.send(JSON.stringify(option))
	if (type == 'message') {
		$('#chatting').val("");
	}
}

✏️ type이 'readMember'인 소켓 메시지를 서버가 받았을 때

sendMessageOfUpdateOfSession(rN) 메소드 호출

✏️ sendMessageOfUpdateOfSession(rN)를 통해 해당 방 소켓 세션들에게 type이 'updateOfSession'인 소켓 메시지 전달

• 방번호 rN을 변수로 받는 자바 메소드
• 해당 방에 있는 모든 소켓 세션들에게 type이 'updateOfSession'인 소켓 메시지 전달

	private void sendMessageOfUpdateOfSession(String roomNumber) {
		JSONObject objOfNumOfSession = new JSONObject();
		objOfNumOfSession.put("type", "updateOfSession");
		int numOfAllMember = talkService.selectJoinGroupMemberList(Integer.parseInt(roomNumber)).size();
		int numOfSessionMember = findNumOfSessionMember(roomNumber);
		objOfNumOfSession.put("numOfAllMember", numOfAllMember);
		objOfNumOfSession.put("numOfSessionMember", numOfSessionMember);
		sendMessage(roomNumber, objOfNumOfSession); // 해당 방에 연결되어 있는 소켓 세션들에게 메시지 전달하는 메소드
	}

✏️ type이 'updateOfSession'인 소켓 메시지를 해당 방에 소켓 연결되어 있는 클라이언트들이 받았을 때

• countUnread($("#roomNumber").val()) 호출

✏️ countUnread($("#roomNumber").val())를 통해 메시지마다 읽지 않은 사람 수 보여주기

countUnread(tkrm_num)

• 방번호를 변수로 받는 js 함수
• 서버에 ajax로 방번호를 넘기면서 해당 방의 모든 메시지마다 읽지 않은 사람 수를 응답받는다.
• 받은 데이터를 각 메시지 옆에 보여준다.

function countUnread(tkrm_num) {
	$.ajax({
        url : _contextPath + '/talk/countUnread',
        data: {'roomNumber' : $("#roomNumber").val()},
        type : 'get',
        success: function(res) {
            let numOfUnreadList = res.numOfUnreadList;
            for(var i = 0; i<numOfUnreadList.length; i++) {
                let tk_num = numOfUnreadList[i].tk_num;
                let unread_num = numOfUnreadList[i].unread_num;
                $('#unReadNum' + tk_num).text(unread_num);
                if (unread_num == 0) {
                    $('#unReadNum' + tk_num).text('');
                }
            }
        },
        error : function(err){
            console.log('error');
        }        
	});
}