실시간 채팅 시스템 만들기- 공부한 개념 정리

app.js 일부

server.js 일부

frontEnd와 backEnd 사이에서 메시지 주고 받기

server.js 에서 socket.on을 통해 메세지를 받을 수 있으며 socket.send를 통해 메시지를 보낼 수 있다. app.js에서 socket.addEventListener를 통해 메세지를 받을 수 있으며 socket.send를 통해 메시지를 보낼 수 있다.

메시지 보내기

메시지를 입력할 때, 원하는 닉네임과 메시지 데이터 이 두 개 타입의 입력이 있는데 {type:xx, payload:xxx}와 같은 형식의 데이터를 보내고자 한다. 하지만 socket.on에서 받을 때는 string 형태 타입을 받을 수 있기 때문에, **front에서 backend로 메시지를 보낼 때는 string 형태로 보내야한다. Backend에서 String타입의 JSON 데이터로 Parse해서 type이 닉네임인지, 새로운 메시지 인지 구분하여 다시 front로 보내어 화면에 출력해준다.

** 왜 backEnd로는 JS object 를 보내면 안될까? backEnd 서버가 JS가 아닐 수 있기 때문이다! back쪽은 언어도 다양하고 Java나 다른 언어일 수 있기 때문에 string으로 바꿔서 전송한다.

socket 즉 사용자 구분하기

중요한 것은 여러 사용자가 Brave 나 Chrome 같이 다른 브라우저에서 접속할 수 있기 때문에 각 socket의 구분을 위해서 sockets 배열을 만들어 push 해주고 사용자가 별명을 입력하면 객체인 socket에 nickname이라는 property를 추가해주어 (socket["nickname"] = message.payload 부분)각 사용자의 socket을 구분하고 누구인지 구분 가능하도록 해준다. 또한 메세지가 입력 되면 접속한 모든 브라우저 상에서 즉 모든 사용자에게 메시지를 보이기 위해서 sockets.forEach를 사용하여 메시지를 보낸다.