[PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (8) - 채팅 기능 구현 (들어갔으니 채팅을 치자 - 클라이언트)

Socket.io 채팅 애플리케이션 (8) - 채팅 기능 구현 (들어갔으니 채팅을 치자 - 클라이언트)

지난 시간에

지난 시간에는 채팅을 치는 서버측 코드를 작성해 보았다.

이번 차시에서는 채팅방에 들어갔으니 채팅을 치자의 클라이언트 코드를 작성해보자.

 

클라이언트측 구현

지난 시간에 채팅을 치는 플로우를 기억해보자.

1. (c) chatForm 으로 입력받은 값을 서버로 보낸다. send message 이벤트 발생
2. (s) send message 이벤트 발생 시 이벤트를 발생시킨 소켓의 socket.id와 roomId 를 가져와 new message 이벤트 발생
3. (c) new message 이벤트 발생 시 chatLog 에 해당 메세지 내용 추가

1번과 3번을 구현하고 테스트를 해보자.

 

1. (c) chatForm 으로 입력받은 값을 서버로 보낸다. send message 이벤트 발생

# /public/js/script.js
$(function () {
    ----------
    $chatForm.submit(function (e) {
        e.preventDefault();
        let msg = $("#message");
        if (msg.val() === "") {
            return false;
        } else {
            let data = {
                roomId: roomId,
                msg: msg.val()
            };
            socket.emit("send message", data);
            msg.val("");
            msg.focus();
        }
    });
})

chatForm 의 submit 이벤트를 이용해서 #message 의 값을 가져온다. 그리고 send message 를 이용해 roomId 와 msg를 서버에게 보낸다.

 

3. (c) new message 이벤트 발생 시 chatLog 에 해당 메세지 내용 추가

# /public/js/script.js
----------
socket.on('new message', function (data) {
        if (data.socketId === socketId) {
            $chatLog.append(`<div class="myMsg msgEl"><span class="msg">${data.msg}</span></div>`)
        }else {
            $chatLog.append(`<div class="anotherMsg msgEl"><span class="anotherName">${data.name}</span><span class="msg">${data.msg}</span></div>`)
        }
        $chatLog.scrollTop($chatLog[0].scrollHeight - $chatLog[0].clientHeight);
    });

new message 이벤트를 받는 코드이다. if (data.socketId === socketId) 로 이 메세지가 자신이 보낸 것인지 판별한다.

만약 자신이 보낸 메세지면

<div class="myMsg msgEl"><span class="msg">${data.msg}</span></div>

다른 사람이 보낸 메세지일때는

<div class="anotherMsg msgEl"><span class="anotherName">${data.name}</span><span class="msg">${data.msg}</span></div>

를 $chatLog에 추가 시킨다.

$chatLog.scrollTop($chatLog[0].scrollHeight - $chatLog[0].clientHeight); 코드는 채팅을 칠때 가장 최근에 보낸 것을 보여주기 위해 $chatLog 의 스크롤을 가장 하단으로 움직이는 코드이다.

 

테스트를 해보자. 저장한 후 서버를 재시작 해보자.

계정 두개로 로그인 한 후 채팅을 시도해보자.

 

서로 채팅이 잘 쳐진다면 성공한 것이다.

2명 뿐만 아니라 2명 이상도 가능하다.

 

이번에 작성한 전체 코드

# /public/js/script.js
$(function () {
    var socket = io.connect();
    var $userWrap = $('#userWrap');
    var $contentWrap = $('#contentWrap');
    var $loginForm = $('#loginForm');
    var $joinForm = $('#joinForm');
    var $chatForm = $('#chatForm');
    var $roomSelect = $('#roomSelect');
    var $memberSelect = $('#memberSelect');
    var $chatLog = $('#chatLog');
    var roomId = 1;
    var socketId = "";

    $("#loginBtn").click(function (e) {
        e.preventDefault();
        $loginForm.show();
        $joinForm.hide();
    });

    $("#joinBtn").click(function (e) {
        e.preventDefault();
        $joinForm.show();
        $loginForm.hide();
    });
    $("#logoutBtn").click(function (e) {
        e.preventDefault();
        socket.emit('logout');
        socketId = "";
        alert("로그아웃되었습니다.");
        $userWrap.show();
        $contentWrap.hide();
    });

    $roomSelect.on("click", "div", function () {
        if (roomId !== $(this).data('id')) {
            roomId = $(this).data('id');
        }
        $(this).parents().children().removeClass("active");
        $(this).addClass("active");
        $chatLog.html("");
        $('#chatHeader').html(`${$(this).html()}`);
        socket.emit('join room', {
            roomId
        });
    });

    socket.on('userlist', function (data) {
        let html = "";
        data.forEach((el) => {
            if (el.socketId === socketId) {
                html += `<div class="memberEl">${el.name} (me)</div>`
            } else {
                html += `<div class="memberEl">${el.name}</div>`
            }
        });
        $memberSelect.html(html);
    });

    socket.on('lefted room', function (data) {
        $chatLog.append(`<div class="notice"><strong>${data}</strong> lefted the room</div>`)
    });
    socket.on('joined room', function (data) {
        $chatLog.append(`<div class="notice"><strong>${data}</strong> joined the room</div>`)
    });

    $loginForm.submit(function (e) {
        e.preventDefault();
        let id = $("#loginId");
        let pw = $("#loginPw");
        if (id.val() === "" || pw.val() === "") {
            alert("check validation");
            return false;
        } else {
            socket.emit('login user', {
                id: id.val(),
                pw: pw.val()
            }, function (res) {
                if (res.result) {
                    alert(res.data);
                    socketId = socket.id;
                    roomId = 1;
                    id.val("");
                    pw.val("");
                    $userWrap.hide();
                    $contentWrap.show();
                    $chatLog.html("");
                    $('#chatHeader').html("Everyone");
                } else {
                    alert(res.data);
                    id.val("");
                    pw.val("");
                    $("#joinBtn").click();
                }
            });
        }
    });

    $joinForm.submit(function (e) {
        e.preventDefault();
        let id = $("#joinId");
        let pw = $("#joinPw");
        if (id.val() === "" || pw.val() === "") {
            alert("check validation");
            return false;
        } else {
            socket.emit('join user', {
                id: id.val(),
                pw: pw.val()
            }, function (res) {
                if (res.result) {
                    alert(res.data);
                    id.val("");
                    pw.val("");
                    $("#loginBtn").click();
                } else {
                    alert(res.data);
                    return false;
                }
            });
        }
    });

    $chatForm.submit(function (e) {
        e.preventDefault();
        let msg = $("#message");
        if (msg.val() === "") {
            return false;
        } else {
            let data = {
                roomId: roomId,
                msg: msg.val()
            };
            socket.emit("send message", data);
            msg.val("");
            msg.focus();
        }
    });

    socket.on('new message', function (data) {
        if (data.socketId === socketId) {
            $chatLog.append(`<div class="myMsg msgEl"><span class="msg">${data.msg}</span></div>`)
        } else {
            $chatLog.append(`<div class="anotherMsg msgEl"><span class="anotherName">${data.name}</span><span class="msg">${data.msg}</span></div>`)
        }
        $chatLog.scrollTop($chatLog[0].scrollHeight - $chatLog[0].clientHeight);
    });
});

 

다음 시간에

모든 구현이 끝났다. 다음 시간에는 개선할 점과 여러가지 이야기를 하고 끝내겠다.