레차트! | 실시간 메신저 | Pern-Graphql
Pern + GraphQL로 제작 된 실시간 채팅 앱 - 개인, 글로벌 및 그룹 메시징 기능
데모
NetLify (프론트 엔드) 및 Heroku (백엔드)에 배포
구축 된 사용
프론트 엔드
- Reactjs- 프론트 엔드 프레임 워크
- Apollo Client- GraphQL을 사용하여 로컬 및 원격 데이터를 모두 관리하는 주 관리 라이브러리
- Apollo 구독 - GraphQl Server에서 실시간 업데이트 받기
- 컨텍스트 API w/ hooks- 사용자의 상태, 선택한 채팅, 토스트 노티프, 테마 등.
- 라우터 반응 - 일반 라우팅 및 내비게이션
- 고리 형태 - 유연한 형태의 반응
- 많은 CSS 사용자 정의가있는 자재 - UI 라이브러리
- 예 - 양식 검증 용
- 날짜 -FN- 날짜 조작 및 형식
백엔드
- Node.js- JS 용 런타임 환경
- Apollo Server- 자체 문서화 GraphQL API 서버 구축
- Apollo 구독 - 구독은 Apollo Server에서 방출 된 이벤트를 시청하는 GraphQL 작업입니다.
- PostgreSQL- 데이터를 저장하려면 소스 SQL 데이터베이스를 엽니 다
- Sequelize -SQL 기반 데이터베이스 용 Nodejs ORM
- JSON WEB TOKEN- HTTP 요청을 보호/인증하는 표준
- bcrypt.js- 해싱 비밀번호의 경우
- dotenv- .env 파일에서 환경 변수를로드하려면
특징
- 인증 (사용자 이름 및 비밀번호로 로그인/ 등록)
- 웹 소켓을 사용한 실시간 채팅
- 등록 된 모든 사용자와의 개인 메시지
- All-Users-At One-One-Place 채팅을위한 글로벌 채널
- 선택한 사용자가있는 그룹 생성
- 사용자는 추가 된 후 그룹에서 떠날 수 있습니다
- 그룹 제작자는 그룹에서 멤버를 추가/제거 할 수 있습니다
- 그룹 제작자는 그룹과 그 메시지와 함께 그룹을 삭제할 수 있습니다.
- 그룹 제작자는 해당 그룹의 이름을 바꿀 수 있습니다
- 설명 메시지가있는 오류 관리
- 작업에 대한 토스트 알림 : 그룹 생성, 사용자 제거 등
- 관련 페치 프로세스를위한 스피너 로딩
- 질문/답변/댓글 추가/업데이트를위한 형식 날짜
- 다크 모드는 로컬 스토리지 저장으로 전환합니다
- 모든 화면에 적절한 응답 UI
스크린 샷
데스크탑/태블릿
이동하는
용법
ENV 변수 :
서버 디렉토리에서 .env 파일을 만들고 다음을 추가하십시오.
PORT = 4000
JWT_SECRET = "Your JWT secret"
고객:
클라이언트/src/backendurls.js를 열고 "Backendurls"개체를 변경하십시오.
{
http: "http://localhost:4000",
ws: "ws://localhost:4000/graphql"
}
클라이언트 개발 서버 실행 :
cd client
npm install
npm start
섬기는 사람:
서버/config/config.json을 열고 로컬 PostgreSQL 자격 증명에 맞게 개발 키 값을 업데이트하십시오.
아직 전 세계 패키지로 'sequelize-cli'및 'nodemon'을 설치하십시오.
SQL 테이블을 자신의 로컬 PSQL로 마이그레이션하려면이 명령을 실행하십시오 sequelize db:migrate
백엔드 개발 서버 실행 :
cd server
npm install
npm run dev
