ZOOM 만들기 7. 실시간 채팅구현 +@

이전에 실시간 채팅을 구현하였고

 

이번 포스팅에서는 닉네임과 메시지 구분처리 / 익명처리 / 데이터 모양 다듬기 위주로 

부가적인 내용을 다룰 예정이다. 

1. 닉네임과 메시지 처리하기

닉네임은 닉네임대로 / 메시지는 메시지대로 처리할 예정.

if문 대신에 switch문을 사용하여 가독성을 높힘

 

server.js코드를 다음과 같이 수정함.

wss.on("connection", (socket) => {

   sockets.push(socket);

   // 브라우저가 연결됐을 때.

   console.log("Connected to Browser");

   //브라우저가 종료되었을 때를 의미하는 close

   socket.on("close", () => console.log("Disconnected from Browser"));

   //브라우저에서 서버로 메시지가 보내졌을때, 콘솔(터미널)에 그 내용을 출력

   socket.on("message", (msg) => {

        const message = JSON.parse(msg);

        switch(message.type){

            case "new_message":

                sockets.forEach(aSocket => aSocket.send(`${message.payload}`));

                break;

            case "nickname":

                socket["nickname"] =message.payload;

                break;

        }

       

   });

   //브라우저로 메시지 전송 테스트

   //socket.send("hello!!");

})

설명 : switch 문의 case는 message.type의 값에 따라 어떤 코드를 사용할 것인지 결정하는 역할

메시지가 오면 메시지의 내용인 payload를 사용자에게 보내줌

닉네임이 오면 소켓이 nickname이라는 키를 추가하고 거기에 payload를 대입해 주고 있음.

 

→ 브라우저에서 메시지를 입력하면 각 사용자의 브라우저에 메시지가 추가되고,

→ 닉네임을 입력하면 브라우저에는 아무런 표시도 안뜰 것임.

---

2. 익명의 사용자 고려하기

닉네임을 사용하지 않는 경우도 구별되어야함. 

→ 사용자가 닉네임을 입력하면 서버는 소켓에 닉네임을 추가하지만, 닉네임을 입력하지 않은 사용자에게는 이 사용자가 익명이라는 정보라도 추가해줘야 구별이 가능함.

 

server.js에 다음의 코드를 추가 ( 디폴트 값을 '익명' 으로 미리 담아둠 )

socket["nickname"] = "Anonymous"

---

3. 메시지에 닉네임 표시하기

메시지를 주고받는 과정에서 메시지를 보낸 사람이 누구인지 표시해주는 작업 필요.

server.js를 다음과 같이 수정

 

switch(message.type){

            case "new_message":

                sockets.forEach(aSocket => aSocket.send(`${socket.nickname}:

                ${message.payload}`));

                break;

            case "nickname":

                socket["nickname"] =message.payload;

                break;

        }

설명 : 어떤 사용자가 메시지를 입력하면 서버가 그것을 받고 거기에 닉네임을 표시해서 다른 사용자에게 보내줌.

 

<결과화면>

 

브라우저 1 / 브라우저 2 를 켜서 확인해보자

브라우저 1에서 닉네임 : bobotrain / 메시지 : test message 내용을 send

 

브라우저 1 / 브라우저 2 모두 잘 내용이 출력됨을 확인가능

만약 닉네임을 비우고 메시지만 test message2 로 보낸다면

다음과 같이 anonymous : test message2가 잘 출력됨을 확인할 수 있다.