Wechat Wecat

위캣

소개하다

• Vue.js Family Bucket + WebSocket + Node.js + Koa2 + MongoDB 기반 인스턴트 채팅 프로젝트
• 기능 부분은 WeChat을 참조하며 몇 가지 흥미로운 기능이 추가되었습니다. 프로젝트 코드 설명이 매우 상세하며 Vue, Node.js, koa를 배우기에 좋은 풀스택 입문 프로젝트입니다.
• 프로젝트의 프런트엔드와 배포는 독립적으로 완료됩니다. 다양한 상호 작용 및 다양한 비즈니스 로직 기능에 결함이 있는 경우 자유롭게 개선해 주시기 바랍니다.

프로젝트 디스플레이

1. 로그인

2. 등록

3. 비밀번호 찾기

4. 등록이 완료되었습니다. 아바타를 선택하세요.

5. 메인 패널

6. 친구 추가

7. 친구 정보 패널

8. 메시지 및 파일 보내기

9. 다기능 패널, 이모티콘 보내기

10. 개인 설정 메뉴

11. 관리자 페이지, 사용자 정보

12. 모든 채팅 기록 조회

13. 채팅 기록 세부정보

14. API 문서

디렉토리 구조

1. 서버는 서버다
2. public은 정적 파일입니다.
3. db는 MongoDB 내보내기 백업입니다.
4. src는 프로젝트 폴더입니다.

설치 튜토리얼

1. 프로젝트 git clone https://github.com/imzusheng/Wecat.git 복제
2. CD 프로젝트 루트 디렉터리, 종속성 설치 npm install
3. 서비스 실행 npm run serve
4. cd ./server를 누른 다음 서버 종속성을 설치합니다. npm install
5. 데이터베이스 mongorestore -d wecat ./db 가져오기
6. 서버 실행 npm run dev

테스트 계정

사용자ID: [email protected]
비밀번호: a123456

TODO

• 로그인
• 중복 로그인 방지
• 마지막 로그인 시간
• 최근 로그인 위치(도-시-구)
• 회원가입(이메일 인증)
• 비밀번호 찾기(이메일 인증)
• 사용자 아바타 선택
• 로그아웃
• 친구들과의 P2P 채팅
• WS 하트비트 연결 및 연결 끊김 다시 연결
• 친구 온라인 및 오프라인 메시지
• 친구 추가 및 친구 요청 확인
• 친구요청 알림
• 읽지 않은 메시지 알림
• 사용자 검색
• 사용자 맞춤형 구성
• 채팅 기록의 지연 로딩
• 실시간으로 업데이트되는 친구 입력 현황
• 웹사이트 제목에 읽지 않은 메시지 개수가 실시간으로 표시됩니다.
• 최근 채팅한 친구가 상단에 고정됩니다.
• 백엔드 관리
• 채팅 사진 및 파일 업로드(다중 업로드)
• 채팅 사진 및 파일 미리보기 및 다운로드
• 그룹 채팅
• 사용자 프로필 카드
• 친구 삭제
• 그룹 만들기
• 단체안내카드
• 그룹에 가입
• 그룹 탈퇴

관련 기술 스택

• VueCli 3
• Vuex
• Node.js
• 요소UI
• 액시오스
• 몽고DB
• 코아2
• 웹소켓
• ws

참고 사항 및 요약

• 여러 파일을 분할하여 업로드
• Vue 라우터 기록 모드에서 웹사이트의 루트가 아닌 디렉터리에 배포됩니다.
• js 키보드 모니터링은 ctrl + Enter 키 조합을 구현하여 메시지를 보냅니다.
• ES6 모듈을 사용하여 자체 Websocket 서비스 캡슐화

~에 대한

• [email protected]으로 이메일을 보내세요.
• 프로젝트 주소
• 나에 대해
• 깃허브
• 기티