[프로젝트] REACT 채팅서버 만들기 [3]

- REACT를 사용한 채팅 어플리케이션 구현

 

1. 환경

• REACT
• node.js
• socket.io

 

2.  프로젝트 구성

• node.js 환경의 server 구성
• socket.io 라이브러리로 웹소켓 통신 및 실시간 채팅기능 구현
• client front 환경 분리 및 서버간의 실시간 통신 구현

 

3.  흐름도

 

1. 먼저 server(node)를 start 명령어로 실행합니다(서버가 동작하고 있다는 전제하에 진행합니다)
2. client(react) 환경에서 접속하여 채팅방 가입을 위한 정보를 입력하여 "가입" 버튼을 클릭합니다.
3. 가입 버튼을 클릭하면 이벤트가 호출되어 아래의 url의 컴포넌트에 이름과 방 이름을 전달합니다.
4. chat 컴포넌트는 서버의 sccket.io-client를 통한 sever간의 실시간 웹소켓 통신을 수행합니다.
5. 채팅방에 접속하면 server의 로그를 확인할 수 있고 브라우저 접속이 끊어졌을경우 동일하게 확인할 수 있습니다.

 

 

4. 결과  

아래 영상과 같이 socket 통신을 사용하여 실시간으로 끊김없이 전송할 수 있습니다. 

화면 기록 2022-07-25 오후 10.08.01.mov

4.09MB

 

 

GitHub - S-YC/react-chatt: 리엑트 채팅 앱 제작