줌클론 #5 | Anonymous Chat on Console Tab

개요

• 서버(백엔드) 브라우저(프론트엔드)를 webSocket 프로토콜로 통신할 수 있게 연결했고 확인했습니다.
• 이제 서버를 축으로 연결된 브라우저들끼리 메세지를 주고 받을 수 있도록 만듭니다.

---

1. HTML 태그 생성

• 메세지 입력을 위해 form, input, button 엘레먼트 생성합니다.
• 메세지 출력을 위해 ul 엘레먼트 생성합니다.

---

2. DOM 연결

• app.js 파일에 DOM 으로 각각 form : messageFrom, ul : messageList 로 연결합니다.

---

3. addEventListener("submit", fn)

• form submit 이벤트 시에 input.value 를 socket.send(input.value) 로 넘겨줍니다.
• input.value 는 비워줍니다.

---

4. on("message", fn)

• socket.on("message", (message) => socket.send(message.toString()));
  • 백엔드 -> 프론트엔드로 다시 메세지를 넘겨줍니다.

---

5. addEventListener("message", fn)

• socket.addEventListener("message", (message) => console.log(message.data));
  • 프론트엔드에서 메세지를 콘솔출력 합니다.

---

현재 까지 통신 조직도

문제점

• 서버 <-> 브라우저간 통신만 있고 아직 브라우저 <-> 브라우저 통신이 안되
  는 상태라 이 문제를 해결해줍니다.

해결법

• 데이터베이스를 이용해서 접속하는 socket 들의 정보를 모읍니다.
• 백엔드에서 프론트엔드로 메세지를 다시 돌려줄때 데이터베이스에 있는 접속된 각 socket 들 모두에게 메세지를 돌려줍니다.

---

6. 데이터베이스 생성

• '줌클론' 은 webSocket 프로토콜 학습이 목적이니 우선 가짜 데이터베이스를 생성해줍니다.
  • const sockets = [];

---

7. 데이터베이스 탐색하여 메세지 전달

• 백 -> 프론트 메세지 전달시 데이터베이스 탐색하여 연결되어 있는 모든 socket 들에게 메시지 전달해줍니다.

---

해결 후 통신 조직도

• 여전히 각 브라우저끼리 직접적인 통신을 하는 것은 아니지만 서버가 브라우저1 에서 메세지를 받을때 브라우저2 에게도 전달해주는 방법으로 브라우저1, 브라우저2 가 동일한 데이터를 동시에 받으며 연결되어있는 것 같은 동작을 합니다.
  • 각 브라우저가 서버를 통해서 연결되었습니다.

---

추가 개선 사항

• 채팅창에서 메세지 보이게
• 본인이 작성할 메세지를 수신하지 않게
• 익명 아니라 닉네임으로 메세지 주고 받게

---