[7] 채팅 구현하기 + 인원 수 조절

사실 이건 별거 없고,, 그냥 CSS만 열심히 검색했다ㅋㅋㅋ

 

이벤트 리스너 구현

 

chatForm.addEventListener("submit", handleChatSubmit);

function handleChatSubmit(event){
    event.preventDefault();
    const input = chatForm.querySelector("input");

    message = input.value;
    socket.emit("chat", message, roomName);
    addMessage("나 : " +message);
    input.value="";
}

상대에게도 보내주고, 내 채팅창에도 표시한다.

 

 

socket 메세지 전송

 

wsServer.on("connection", socket => {
	/* Message 전송 */
    socket.on("chat", (msg, roomName)=> {
        socket.to(roomName).emit("show_message", msg);
    });
});

같은 Room의 peer에게 메세지 전송

 

 

socket.on("show_message", (message) => {
    console.log(message);
    addMessage("상대 : "+message);
});

받아서 추가해줌

 

 

 

UI에 추가

 

function addMessage(message){
    const ul = chat.querySelector("ul");
    const li = document.createElement("li");
    const showChat = chat.querySelector("div");
    li.innerText = message;
    ul.appendChild(li);
    showChat.scrollTop = showChat.scrollHeight;
}

list로 하고 일정 Height 넘어가면 스크롤 생기도록 함 (페이지 무한 확장 방지)

 

 

인원 수 2명 이하로 조정

 

async function handleWelcomeSubmit(event){
    event.preventDefault();
    const input = welcomeForm.querySelector("input");
    socket.emit("check", input.value, isFulled);
}

우선 방 이름을 입력하고 추가하기 전에 인원수를 체크한다.

 

wsServer.on("connection", socket => {
    socket.on("check", (roomName, isFulled)=> {
        let rn = wsServer.sockets.adapter.rooms.get(roomName);
        console.log(roomName);
        if(rn == undefined)
            isFulled(false);
        else if(rn.size < 2)
            isFulled(false);
        else 
            isFulled(true);
    });
});

인원 수 구하기 : wsServer.sockets.adapter.rooms.get(roomName)    - undefined가 나올 수 있음

인원 수에 따라 함수 매개변수를 바꿔 호출한다.

 

 

 

async function isFulled(isFull){
    if(isFull){
        console.log("fulled");
        swal('입장 불가',"방의 인원이 모두 찼습니다.",'warning');
    } else {
        const input = welcomeForm.querySelector("input");
        console.log("not fulled");
        /* emit으로 보내지 않고, join 전에 실행 */
        await initCall();

        const header = document.querySelector("header");
        const h1 = header.querySelector("h1");
        h1.textContent = "ROOM - "+input.value;

        socket.emit("join_room", input.value);
        roomName = input.value;
        input.value = "";
    }
    
}

비동기 처리라 이렇게 해주는 게 낫다.

0~1명은 호출 안하고, 2명은 호출하고 이렇게 하면 값이 꼬이게 된다.

 

다음엔 결과물 영상 올리겠어요!