채팅 앱 만들기 - socket(2)

socket에서 이벤트가 발생할 때 html에도 변화가 생겨야 한다. 그래서 socket 이벤트에 따라 변화가 생겨야 하는 chat.html, main.html에 socket이벤트리스너 코드를 추가하였다.

chat.html - script

socket.on('join', function (data) {
    const div = document.createElement('div');
    div.classList.add('system');
    const chat = document.createElement('div');
    div.textContent = data.chat;
    div.appendChild(chat);
    document.querySelector('#chat-list').appendChild(div);
});
socket.on('exit', function (data) {
    const div = document.createElement('div');
    div.classList.add('system');
    const chat = document.createElement('div');
    div.textContent = data.chat;
    div.appendChild(chat);
    document.querySelector('#chat-list').appendChild(div);
});
socket.on('chat', function (data) {
    const div = document.createElement('div');
    if (data.user === '{{user}}') {
        div.classList.add('mine');
    } else {
        div.classList.add('other');
    }
    const name = document.createElement('div');
    name.textContent = data.user;
    div.appendChild(name);
    const chat = document.createElement('div');
    chat.textContent = data.chat;
    div.appendChild(chat);
       
    document.querySelector('#chat-list').appendChild(div);
});

각각 join, exit, chat 이벤트가 발생했을 때 html 함수에 대한 설명이다.

main.html - script

socket.on('newRoom', function (data) {
    const tr = document.createElement('tr');
    let td = document.createElement('td');
    td.textContent = data.title;
    tr.appendChild(td);
    td = document.createElement('td');
    td.textContent = data.password ? '비밀방' : '공개방';
    tr.appendChild(td);
    td = document.createElement('td');
    td.textContent = data.max;
    tr.appendChild(td);
    td = document.createElement('td');
    td.style.color = data.owner;
    td.textContent = data.owner;
    tr.appendChild(td);
    td = document.createElement('td');
    const button = document.createElement('button');
    button.textContent = '입장';
    button.dataset.password = data.password ? 'true' : 'false';
    button.dataset.id = data._id;
    button.addEventListener('click', addBtnEvent);
    td.appendChild(button);
    tr.appendChild(td);
    tr.dataset.id = data._id;
    document.querySelector('table tbody').appendChild(tr);
});
	
socket.on(removeRoom), function (data){
    //방 제거 이벤트 발생 시 id가 일치하는 방 제거
    document.querySeletorAll('tbody tr').forEach(function (tr){
        if(tr.dataset.id===data){
	        tr.parentNode.removeChild(tr);
        }
    });
};

각각 newRoom, removeRoom 이벤트가 발생했을 때의 html 함수에 대한 설명이다.