react slack clone

react slack clone

Chatkit으로 구동되는 Slack 클론. 여기에서 실제로 작동하는 모습을 확인하세요 https://pusher.github.io/react-slack-clone

이는 설정, 배포 및 개발이 용이하도록 create-react-app으로 부트스트랩된 정적 단일 페이지 웹 앱입니다. pusher-chatkit-client 라이브러리를 둘러싼 얇은 UI 래퍼로, 다양한 기능이 어떻게 함께 작동하여 다양한 잠재적인 제품 애플리케이션을 갖춘 강력한 실시간 채팅 클라이언트를 형성할 수 있는지 보여줍니다.

특징

Chatkit SDK를 사용하면 채팅 클라이언트에서 기대할 수 있는 기능을 구현할 수 있습니다. 여기에는 다음이 포함됩니다.

• 공개 및 비공개 채팅방
• ? 실시간 메시지 송수신
• ? 리치 미디어 첨부 파일(끌어서 놓기)
• 입력 및 현재 상태 표시기
• 메시지 커서 읽기

참여하고 싶나요? 초보자에게 친숙한 GitHub 문제가 많이 있습니다.

구성요소

데모는 여기 문서에 따라 완전한 기능을 갖추려고 시도합니다. 기능 요청은 이슈나 이 저장소에 대한 풀 요청을 통해 이루어져야 합니다.

• CreateMessageForm - 텍스트 본문과 트리거 입력 표시기가 포함된 메시지를 보냅니다.
• CreateRoomForm - 새 룸을 생성하고 생성 시 참여합니다.
• FileInput - 리치 미디어 첨부 파일이 포함된 메시지를 보냅니다.
• 메시지 - 첨부 파일이 포함될 수 있는 메시지를 렌더링합니다.
• MessageList - 키 값 저장소에서 메시지 목록을 렌더링합니다.
• RoomHeader - 특정 방에 대한 유용한 정보를 표시합니다.
• RoomList - 현재 사용자가 구독할 수 있는 룸 목록을 렌더링합니다.
• TypingIndicator - 다른 사용자가 특정 방에 입력하고 있음을 사용자에게 나타냅니다.
• UserHeader - 특정 사용자에 대한 유용한 정보를 표시합니다.

용법

애플리케이션을 로컬에서 실행하려면 저장소를 복제하고, 종속성을 설치하고, 앱을 실행하세요.

 $ git clone https://github.com/pusher/react-slack-clone
$ cd react-slack-clone
$ yarn && yarn start

앱이 개발 모드에서 시작되고 http://localhost:3000 에서 브라우저 창을 엽니다. 소스 파일이 변경되면 프로젝트가 다시 빌드되고 브라우저가 자동으로 다시 로드됩니다. 모든 빌드 또는 런타임 오류는 전파되어 브라우저에 표시됩니다.

앱은 GitHub 인증과 https://chatkit-demo-server.herokuapp.com에서 호스팅되는 사용자 생성 엔드포인트에 따라 달라집니다. 엔드포인트는 /auth 및 /token 입니다.