React, Nodejs 및 Socket.io를 사용한 실시간 채팅 애플리케이션

블로그

React, Nodejs 및 Socket.io를 사용한 실시간 채팅 애플리케이션

실시간 채팅 애플리케이션

시작

  1. |_+_|
  2. |_+_|
  3. 'server'라는 다른 디렉터리를 만듭니다.
  4. |_+_|
  5. |_+_|

고객 입장에서

6. client/src 폴더에서 불필요한 파일을 모두 제거하고 index.js와 App.js를 생성합니다. 코드 복사



7. client/src/components에서 찾은 모든 구성 요소를 복사합니다.






8. 구성 요소에는 다음이 포함됩니다.



  • 가입하다
  • 채팅
  • 입력
  • 인포바
  • 메시지 및 메시지
  • 텍스트 컨테이너

서버 측

9. 서버에서 index.js, router.js, users.js 생성



10. 코드 복사






배포

11. Heroku 및 Netlify에 로그인합니다. Heroku cli 및 Netlify cli 다운로드

12. 새로운 Heroku 앱 만들기

13. 서버 폴더에서 다음을 수행하십시오 -
|_+_|

14. heroku 앱 서버 웹사이트 링크를 복사하여 client/src/components/Chat/Chat.js에 |_+_|로 붙여넣습니다.

15. |_+_|

16. 게시 디렉토리를 ./build로 만듭니다.

17. |_+_| 반응 채팅 애플리케이션이 성공적으로 배포되었습니다!!

또는 설정:

|_+_| 클라이언트와 서버 모두 sude가 개발 서버를 시작하도록 합니다.

이것은 링크가 있는 튜토리얼을 통해 만든 저장소입니다. - 실시간 채팅 애플리케이션 빌드 및 배포 - Socket.io, Node.js 및 React.js

다운로드 세부 정보:

작가: 우주인-개발자
다운로드 링크: 소스 코드 다운로드
공식 웹 사이트: https://github.com/spaceman-dev/Chat-Application