아스트로 보이 채팅방
코드 클라우드
온라인 주소 www.genal.fun (잘못되었으며 더 이상 배포할 계획이 없습니다)
제안사항이 있으면 문제 영역으로 이동하세요.
프로젝트 소개
? 남는 시간에 프론트엔드 스킬을 강화할 수 있는 채팅방을 만들고 싶어서 2020년 6월 24일 아스트로보이 채팅방 개발 여정을 시작했습니다.
? 이 프로젝트는 향후 기능 반복을 위한 기반을 마련하는 전체 TypeScript를 사용하여 개발되었습니다. 물론 나도 타이프스크립트를 아주 좋아한다.
? 현재 채팅방에는 이미 완전한 채팅 기능이 있습니다. 앞으로 더 멋진 기능이 개발될 예정입니다 이제 반복이 중지되었습니다! 관심 있는 친구들은 직접 포크해서 개발할 수도 있고, 원하는 대로 수정도 가능해요! 시간이 나면 새로운 기능을 업그레이드하겠습니다!
프로젝트 인터페이스
PC 버전
모바일 단말기
기능 소개
- 모바일 호환
- 사용자 정보(아바타/사용자 이름/비밀번호) 수정
- 그룹 채팅/비공개 채팅
- 그룹 생성/그룹 가입/그룹 탈퇴/퍼지 검색 그룹
- 친구 추가/친구 삭제/퍼지 검색 사용자
- 메시지 페이지 매김
- 이모티콘
- 사진 전송/사진 미리보기
- 온라인 사용자 통계
- 맞춤 테마
- 알림 다시 연결
기술개요
- Typescript : JavaScript의 상위 집합으로, 유형 시스템을 제공하고 코드의 가독성과 유지 관리성을 향상시킨다는 것이 가장 큰 장점입니다.
- Vue2.6.x : 프론트엔드 프로그레시브 프레임워크.
- Socket/io : 실시간 통신, websocket 타사 라이브러리.
- Vuex : Vue.js 애플리케이션을 위해 특별히 개발된 상태 관리 패턴입니다.
- Nestjs : 효율적이고 확장 가능한 Node.js 서버 측 애플리케이션을 구축하기 위한 프레임워크로 TypeScript를 기반으로 작성되었으며 OOP1, FP2 및 FRP3의 관련 개념을 결합합니다.
- Typeorm : 최신 JavaScript 기능을 지원하고 데이터베이스를 사용하는 모든 애플리케이션을 개발하는 데 도움이 되는 추가 기능을 제공합니다.
- ES6+ : ES6+ 구문, 화살표 함수, async/await 및 기타 구문을 사용하면 매우 사용하기 쉽습니다.
- SASS(SCSS) : SCSS를 CSS 전처리 언어로 사용하면 적은 양의 코드로 복잡한 디자인을 만드는 가장 효율적인 방법을 사용할 수 있습니다.
데이터베이스 테이블 구조 설계
환경 구성
- 데이터베이스 mysql 및 채팅 데이터베이스(데이터베이스 형식은 utf8mb4입니다.)
- 노드 v10.16.3
프로젝트 실행
- 프론트엔드 프로젝트
cd genal - chat - client
npm i
npm run serve
mysql 구성 mysql이 연결할 수 없고 ER_NOT_SUPPORTED_AUTH_MODE 오류가 보고되는 경우 이는 mysql 버전의 비호환성으로 인해 발생하는 것입니다. https://blog.csdn.net/qq_41831345/article/details/83150502 문서를 참조하세요.
데이터베이스에는 SQL 스크립트가 없습니다. 백엔드 app.module.ts 에서 데이터베이스 비밀번호를 변경하고 새 chat 데이터베이스를 만드세요.
백엔드 프로젝트
cd genal - chat - server
npm i
npm run start: dev
시스템 반복 기록
보려면 클릭하세요
v1.0.0
기능
v1.0.0 인터페이스
v2.0.0
기능
- 그룹 채팅/비공개 채팅
- 그룹 만들기/그룹 채팅/퍼지 검색 그룹 가입
- 친구 추가/친구에 대한 퍼지 검색
- 사용자 이름/아바타 업로드 변경
- 이모티콘
- 메시지 페이지 매김
v2.0.0 인터페이스
v3.0.0
기능
- 그룹 채팅/비공개 채팅
- 그룹 만들기/그룹 채팅/퍼지 검색 그룹 가입
- 친구 추가/친구에 대한 퍼지 검색
- 이미지 업로드/붙여넣기 이미지 보내기/이미지 미리보기
- 사용자 이름/아바타 업로드 변경
- 이모티콘
- 메시지 페이지 매김
v3.0.0 인터페이스
v2.0.0과 동일
v4.0.0
기능
- 그룹 채팅/비공개 채팅
- 그룹 만들기/그룹 채팅/퍼지 검색 그룹 가입
- 친구 추가/친구에 대한 퍼지 검색
- 이미지 업로드/붙여넣기 이미지 보내기/이미지 미리보기
- 사용자 이름/아바타 업로드 변경
- 이모티콘
- 메시지 페이지 매김
- 모바일 호환
v4.0.0 인터페이스
v2.0.0과 동일
v5.0.0
기능
- 그룹 채팅/비공개 채팅
- 그룹 만들기/그룹 채팅 가입/그룹 탈퇴/퍼지 검색 그룹
- 친구 추가/친구 삭제/친구 퍼지 검색
- 이미지 업로드/붙여넣기 이미지 보내기/이미지 미리보기
- 사용자 이름/아바타 업로드 변경
- 이모티콘
- 메시지 페이지 매김
- 모바일 호환
- 온라인 사용자 통계
- 알림 다시 연결
v5.0.0 인터페이스
v6.0.0
기능
- 모바일 호환
- 사용자 정보(아바타/사용자 이름/비밀번호) 수정
- 그룹 채팅/비공개 채팅
- 그룹 생성/그룹 가입/그룹 탈퇴/퍼지 검색 그룹
- 친구 추가/친구 삭제/퍼지 검색 사용자
- 메시지 페이지 매김
- 이모티콘
- 사진 전송/사진 미리보기
- 온라인 사용자 통계
- 맞춤 테마
- 알림 다시 연결
v6.0.0 인터페이스
작가
깃허브: 에디슨
기여자 목록
mtnbgx, BoBoooooo, Nyaasu66, BeanCookie(특정 순서 없음)
배포 방법
아스트로 보이 채팅방 배포 지침
자세한 내용
TypeScript를 사용하여 강력한 웹 채팅방 만들기
