socket.io 채팅 5분만에 만들기!🚀

jjunn0·2020년 10월 4일
0

https://socket.io/docs/rooms/ 글을 참고했습니다.

Server


너무 간단하다. join이라는 이벤트가 들어오면 룸 아이디를 join 하고 방의 인원들에게 참여했다는 메시지를 뿌려준다.
chat이라는 이벤트가 들어오면 룸 전체에 채팅 메시지를 뿌려준다.

Client


유저 아이디와 룸ID를 입력한다.

유저를 추가한다🤔

위와 같이 같은 방안에 있는 사람끼리 잘 소통이 된다! ⭐️

Next.js를 사용했습니다.

_app.js


소켓을 어디서나 쓰기위해 _app.js에서 props로 넘겨준다.

chat.js


join이라는 이벤트에 입력받은 roomID와 유저 이름을 보낸다. useEffect에는 받을 이벤트들을 등록한다.
채팅을 치면 서버로 채팅 내용을 보내고 받게 된다!👍

profile
서울로 상경해 매일매일 생존기를 찍고 있는 Front end 개발자 최준영입니다 🥰

0개의 댓글