[3] Chat 기능 구현 및 소켓에 Nickname 부여

1) Chat 기능

 

 

Home Template - Form 설정 (home.PUG)

 

ul
form
	input(type="text", placeholder="write a message", required)
	button Send

• 메세지를 보낼 Form & Button 구현

 

메세지 작성 후 버튼 누르면 BackEnd 로 전송 (App.js)

 

function handleSubmit(event) {
    // 기본 동작 방지 
    event.preventDefault();
    socket.send(input.value);
    input.value = "";   // 전송 후 공백으로 변경 
}

messageForm.addEventListener("submit", handleSubmit);

 

 

접속한 Socket 저장 (Server.js)

 

// 임시용 데이터베이스 
const sockets = [];

// 연결될 때, socket 정보 담기
wss.on("connection", (socket) => { 
	sockets.push(socket);
});

 

 

각 소켓에 메세지 전달 (Server.js)

 

// wss - "connection"시 실행되는 함수
function handleConnection(socket) {
    sockets.push(socket);       // 연결된 소켓 모두 저장 

	// 연결된 모든 소켓에 message 전달
    socket.on("message", (message) => {
        sockets.forEach((aSocket) => aSocket.send(message.toString("utf8")));   // 연결중인 소켓에게 모두 전송 
    }); 
}

 

 

소켓으로부터 받은 메세지 화면에 출력 (App.js)

 

socket.addEventListener("message", (message) => {
	// list 만들어서 추가
    const li = document.createElement("li");
    li.innerText = message.data;
    messageList.append(li);
});

 

 

 

결과

어디서 입력하든 FireFox, Chrome 두 브라우저에 동시에 결과 출력!

 

 

2) Socket에 Data 넣기

 

Socket에 Data 넣기 (Disconnected 전까지 계속 유지)

 

socket["nickname"] = "Anonymous";   // 첫 별명은 익명으로 설정

• wss.on("connection" , 함수)에서 함수 내부에 넣기
• socket[필드명] = 값; 으로 생성 

 

 

Server와 App 간 정보 교환 방식 - String

 

{
    type : "닉네임 / 메세지 등 payload가 가리키는 정보의 유형",
    payload : "내용"
}

• Server에서 내용 생성 : JSON
• Server ↔ App 간 정보 교환 : String  ( JSON.stringify() 이용해서 JSON → String으로 변경 )
• App 에서의 정보 : JSON ( JSON.parse() 이용해서 String → JSON으로 변경 )

 

 

이해한 부분을 그림으로 그려보았다

• 빨간색 과정은 닉네임 변경 / 주황색 과정은 메세지 전송 이다.
• 구름은 JSON 객체를 나타나며, Socket은 Connection시 받아온 해당 브라우저 정보이다