아이스베어의 개발 일기

2021.06.07 - [FRONT-END/React] - [React] 리액트 & socket.io 기반 채팅 어플리케이션 만들기 - 3

전 포스팅에서 모든 코드를 적용하고 돌린 작업을 하였다. 

이번시간은 전체적인 동작과 코드설명을 할 것이다.

채팅을 하기 위해 localhost:3000으로 두 개의 창을 띄어준다.

사용자 이름을 다르게 입력한다. room은 반드시 같은 값으로 해줘야 채팅할 수 있다!

아이스베어 먼저 입장한 후 그리즐리를 입장할 것이다.

아이스베어의 채팅차에는 그리즐리가 가입했다고 뜬다.

이제 대화를 해보도록 하자

화면을 크게하면 사진의 오른쪽 부분처럼 채팅중인 사람의 목록도 볼 수 있다.

아이스 베어가 방을 나가보았다.

아이스베어가 나갔다고 뜨고 오른쪽에도 온라인 표시가 사라졌음을 확인할 수 있다.