2 . 노마드코드 zoom클론코딩 - 채팅기능 구현하기

🔔  #1.6~1.9

 

---

1. 채팅 완성하기 

서버와 클라이어트 간에 서로 연결이 됐으니, 서로 메세지를 주고 받는 것을 구현하기

먼저 home.pug에서 메세지를 담을 수 있는 input 과 send button 만들기

 

>> home.pug 코드 수정

# home.pug
doctype html
html(lang="ko")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Zoom
        link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
    body 
        header 
            h1 Zoom! 
        main

            form#nick       
                input(type="text", placeholder="닉네임을 입력하세요.", required)
                button save
                
            ul  --> 메세지 리스트 
            
            form#message
                input(type="text", placeholder="메세지를 입력하세요.", required)
                button Send
        script(src="/public/js/app.js")

- id = # / class =  .

- required 속성 =  폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시

[html]input의 필수값을 지정하는 required

 

send button 을 눌렀을 때 발생하는 이벤트를 처리해주기 위해 app.js 코드 수정 또는 추가해주기

= > home.pug<보여지는 페이지> 에서 app.js<클라이언트> 를 통해 server.js<서버> 로 데이터가 전달되는 방식

 

>> app.js 코드 수정

서버로 보내는 메세지는 반드시 str 형태여야 하는데

어떤 메세지가 닉네임이고, 채팅인지 구분을 못한다

 

구분을 해주기 위해서 JSON 형태를 사용하는건데,

JSON 을  str 으로 변환해주는 함수를 만들어준다 => JSON.stringify(msg)

# app.js
const messageList = document.querySelector('ul'); 
const nickForm = document.querySelector("#nick");
const messageForm = document.querySelector("#message");

function makeMessage(type, payload) {
    const msg = { type, payload };
    return JSON.stringify(msg);
}

socket.addEventListener("message", (message) => {
    const li = document.createElement('li'); # 새로운 메세지를 받으면 새로운 li 생성 
    li.innerText = message.data; # message.data 를 li 안에 넣어주기
    messageList.append(li);
});

# send button 을 눌렀을 때 발생하는 이벤트인 submit를 처리하기 위한 이벤트리스너도 만들기 위해
# handleSubmit 함수를 만들어 이벤트 처리하기
function handleSubmit(event){
	# 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정
    event.preventDefault(); 
    # messageForm에서 input 찾아오기
    const input = messageForm.querySelector('input'); 
    # 메세지의 내용이 될 input.value 출력
    socket.send(makeMessage("new_message", i nput.value)); 
    
    const li = document.createElement('li');
    li.innerText = `You : ${input.value}`;
    messageList.append(li);
    input.value = "";
}
function handleNickSubmit(event) {
    event.preventDefault(); 
    const input = nickForm.querySelector('input');
    socket.send(makeMessage("nickname", input.value));
    input.value = "";
}

messageForm.addEventListener("submit", handleSubmit);
nickForm.addEventListener("submit", handleNickSubmit);

preventDefault() = 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.

 

 

>> server.js 코드 수정

내가 보낸 채팅이 모든 사람에게 보여질 수 있어야 하기에 sokets 배열을 만들어 연결된 모든 소켓을 배열에 넣고,

배열 내의 모든 브라우저에 메세지를 뿌릴 수 있도록 해야함

 

또 서버에서 받아온 str 형태의 메세지를 JSON 형태로 바꾸고 키값에 따라 다르게 동작해주기 위해

swith 를 이용해 구현하기 (if/ else if 도 가능)

const sockets = []; # 어느 브라우저에서 연결했는지 알기위함

wss.on("connection", (socket) => { # 여기의 socket의 매개변수는 새로운 브라우저를 뜻함 // wss = 전체서버/soket = 하나의 연결이라 생각 
    sockets.push(socket); # 브라우저가 연결되면 sokets 배열에 넣음
    socket['nickname'] = '';
    console.log("Connected to Browser ✅");
    socket.on("close", onSocketClose); # 서버 끄면 작동
    socket.on("message", (msg) => {
        const message = JSON.parse(msg.toString("utf8"));
        switch(message.type) {
            case 'new_message' : 
                sockets.forEach((aSocket) => 
                    aSocket.send(`${socket.nickname}: ${message.payload}`));
            case 'nickname' :
                socket['nickname'] = message.payload;
        }
    });
  });

socket.on("message", (msg) => {
    const message = JSON.parse(msg.toString("utf8"));
    if(message.type === 'new_message') {
        sockets.forEach((aSocket) => aSocket.send(`${socket.nickname}: ${message.payload}`));
    } else if (message.type === 'nickname') {
        socket['nickname'] = message.payload;