Dsx_wechat
- 이것은 Vue 모방 WeChat 클라이언트입니다
- Github 프로젝트 주소: https://github.com/GGwujun/Dsx_wechat
- 위챗을 모방하고, 실시간 채팅 등의 기능을 갖추고 있으며, 프론트엔드와 백엔드를 분리하여 구현한 Web App입니다. 프론트엔드는 Vue 2.0 프레임워크를 기반으로 하고, 백엔드는 Node.js + Express + MongoDB를 기반으로 하며, 채팅 기능과 친구 추가 기능은 Websocket을 통해 구현됩니다.
- 내 공개 계정을 팔로우하는 것을 환영합니다.
- 프론트엔드 기술 스택: vue 2.0, vue-cli, vuex, vue-router, webpack 2.x, pug, sass, babel 등;
- 백엔드 기술 스택: Node.js, Express, express-session, WebSocket(ws), MongoDB, mongoose, ES6 등
소개
- 한동안 Vue를 배웠는데 회사에서는 Vue를 사용하지 않습니다. Vue를 연습하기 위해 크고 작은 개인 프로젝트도 여러 번 해봤고, sockit.io는 새로고침이 안 되기 때문에 PC 버전을 따라하기도 했습니다. , PC 환경이 좋지 않습니다. 친구에게 메시지를 보내려면 새로고침 후 다시 로그인해야 합니다.
- 회사에서 가장 많이 사용되는 것은 모바일 웹앱에 초점을 맞춘 부분 UI 프레임워크인 ionic이며, 이 프레임워크도 역시 anglejs 프레임워크를 사용합니다. 패키징에는 Cordova를 사용했고 나중에 Vue를 사용하여 WeChat 클라이언트를 만들고 Cordova로 패키징하는 것을 생각했습니다.
- 현재 휴대폰의 하드웨어는 이미 매우 우수합니다. Vue를 사용한 단일 페이지 애플리케이션은 기본적으로 아무런 차이 없이 기본 앱이 될 수 있습니다.
- 프런트 엔드 부분은 vue-cli를 사용하여 빌드 및 패키징되며 vue 패밀리 버킷(vue, vuex, vue-router)으로 코딩됩니다.
- axios를 사용하여 리소스 요청 만들기
- 백엔드는 Node.js의 Express 아키텍처를 사용하여 개발되었습니다. 현재 인터페이스는 많지 않지만 지속적으로 업데이트될 예정입니다.
섬기는 사람
- Nodejs + Express를 사용하여 개발
- 등록, 로그인, 로그아웃, 친구 보기, 개인 홈페이지, 친구 추가, 일대일 채팅 및 그룹 채팅 실현
- Github 프로젝트 주소: https://github.com/GGwujun/chatserve
시사
APK 다운로드
APK를 다운로드하고 설치하려면 여기를 클릭하세요. 현재 Android(5.0 이상) 시스템만 지원합니다(프로젝트가 아직 개발 중이므로 일부 기능이 최신이 아니거나 일시적으로 사용하지 못할 수 있습니다).
신규 사용자는 반드시 계정 등록을 통해 입장해야 하며, 등록된 사용자는 바로 로그인이 가능합니다. 현재 계정은 오프라인 메시지를 지원하지 않으며 오프라인 사용자를 친구로 추가하는 것도 지원하지 않습니다. (인스턴트 메시징 관련 기능은 상대방이 온라인 상태인지 확인해야 함)
현지 사용
Node.js
설치했다고 가정하고 저장소를 로컬 영역에 직접 복제하고 모든 플러그인을 설치한 후 서버를 시작하세요. 구글 크롬을 사용하시고, 모바일 디버깅 모드(http://localhost:8808/)에서 보시는 것을 권장합니다.
# clone
git clone https://github.com/GGwujun/Dsx_wechat.git
# 进入到目录 安装所有依赖包 国内建议使用cnpm
cd Dsx_wechat
npm install
# 开启本地服务器 监听8808端口
npm run dev
팁
- 내가 구성한 백엔드 인터페이스가 내 서버이기 때문에 등록이나 데이터 획득이 불가능합니다. 백엔드 코드를 직접 다운로드하여 자신의 서버에 배포할 수 있지만 일반적으로 접근이 가능합니다.
- 자체 서버를 구축하려면 노드 관련 종속성을 설치하는 것 외에도 MongoDB 데이터베이스도 설치해야 합니다.
기능
이 프로젝트는 실제 채팅 기능으로 백엔드 서버 지원을 구현했습니다. 백엔드 부분을 여기에 옮겨주세요
- 푸시, 팝, 모달, 해제 및 기타 전환 애니메이션을 갖춘 높은 모방 WeChat 클라이언트 인터페이스 디자인 스타일
- 등록, 로그인 및 로그아웃 기능은 로그인 상태를 기억하고 다중 로그인을 방지할 수 있습니다.
- 채팅방 기능, 모든 온라인 사용자는 그룹 채팅을 할 수 있습니다.
- 친구를 추가하려면 먼저 상대방이 온라인 상태인지 확인해야 친구를 올바르게 추가할 수 있습니다.
- 사용자는 비공개로 채팅할 수 있습니다. 현재는 상대방이 온라인 상태여야 정상적으로 채팅할 수 있습니다.
- 현재는 텍스트 전용 채팅만 지원됩니다.
계속해서 더 많은 기능이 제공됩니다...
이 프로젝트가 좋다고 생각하신다면 별표표시 와 공유 부탁드립니다!