Dsx_wechat
- นี่คือไคลเอนต์ WeChat เลียนแบบ Vue
- ที่อยู่โครงการ Github: https://github.com/GGwujun/Dsx_wechat
- เว็บแอปที่เลียนแบบ WeChat มีการแชทจริงและฟังก์ชันอื่นๆ และใช้งานโดยการแยกส่วนหน้าและส่วนหลังออก ส่วนหน้าจะขึ้นอยู่กับเฟรมเวิร์ก 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 ฉันได้ทำโปรเจ็กต์ส่วนตัวหลายโปรเจ็กต์ ทั้งเล็กและใหญ่ และเลียนแบบ WeChat เวอร์ชันพีซี เนื่องจากไม่สามารถรีเฟรช sockit.io ได้ ประสบการณ์บนพีซีไม่ดี คุณต้องเข้าสู่ระบบอีกครั้งหลังจากรีเฟรชก่อนจึงจะสามารถส่งข้อความถึงเพื่อนได้
- สิ่งที่ใช้ในบริษัทส่วนใหญ่คือไอออนิก ซึ่งเป็นเฟรมเวิร์ก UI บางส่วนที่เน้นไปที่เว็บแอปบนมือถือ ซึ่งใช้เฟรมเวิร์ก angularjs ด้วย Cordova ใช้สำหรับบรรจุภัณฑ์ และต่อมาฉันก็คิดถึงการใช้ Vue เพื่อสร้างไคลเอนต์ WeChat และบรรจุด้วย Cordova
- ปัจจุบันฮาร์ดแวร์ของโทรศัพท์มือถือนั้นดีมากแล้ว ประสบการณ์การใช้งานแอพของแพ็คเกจ Cordova พื้นฐานยังคงราบรื่นมาก การใช้งานแบบหน้าเดียวที่มี Vue สามารถกลายเป็นแอพเนทิฟได้โดยไม่มีความแตกต่างใดๆ
- ส่วนหน้าสร้างและแพ็กเกจโดยใช้ vue-cli และเขียนโค้ดด้วยบัคเก็ตตระกูล vue (vue, vuex, vue-router)
- ใช้ axios เพื่อทำการร้องขอทรัพยากร
- แบ็กเอนด์ได้รับการพัฒนาโดยใช้สถาปัตยกรรมด่วนของ Node.js ขณะนี้มีอินเทอร์เฟซไม่มากนัก แต่จะมีการอัปเดตอย่างต่อเนื่อง
เซิร์ฟเวอร์
- พัฒนาโดยใช้ Nodejs + Express
- ตระหนักถึงการลงทะเบียน เข้าสู่ระบบ ออกจากระบบ ดูเพื่อน หน้าแรกส่วนตัว เพิ่มเพื่อน แชทแบบตัวต่อตัวและแชทกลุ่ม
- ที่อยู่โครงการ Github: https://github.com/GGwujun/chatserve
ดูตัวอย่าง
ดาวน์โหลด apk
คลิกที่นี่เพื่อดาวน์โหลดและติดตั้ง APK ปัจจุบันรองรับเฉพาะระบบ Android (5.0 ขึ้นไป) เท่านั้น (เนื่องจากโครงการยังอยู่ระหว่างการพัฒนา ฟังก์ชันบางอย่างอาจไม่ใช่เวอร์ชันล่าสุดหรือใช้งานไม่ได้ชั่วคราว)
ผู้ใช้ใหม่จะต้องเข้าโดยการลงทะเบียนบัญชี และผู้ใช้ที่ลงทะเบียนสามารถเข้าสู่ระบบได้โดยตรง ปัจจุบัน บัญชีไม่รองรับข้อความออฟไลน์ และไม่รองรับการเพิ่มผู้ใช้ออฟไลน์เป็นเพื่อน (ฟังก์ชันที่เกี่ยวข้องกับการส่งข้อความโต้ตอบแบบทันทีต้องตรวจสอบให้แน่ใจว่าอีกฝ่ายออนไลน์อยู่)
การใช้งานในท้องถิ่น
สมมติว่าคุณได้ติดตั้ง Node.js แล้ว ให้โคลนพื้นที่เก็บข้อมูลโดยตรงไปยังพื้นที่ท้องถิ่นของคุณ ติดตั้งปลั๊กอินทั้งหมด และเริ่มต้นเซิร์ฟเวอร์ ขอแนะนำให้ใช้ Google Chrome และดูในโหมดแก้ไขจุดบกพร่องบนมือถือ (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 ที่เลียนแบบระดับสูง พร้อมการกด ป๊อป โมดอล ยกเลิก และแอนิเมชั่นการเปลี่ยนแปลงอื่น ๆ
- ฟังก์ชั่นการลงทะเบียน เข้าสู่ระบบ และออกจากระบบสามารถจดจำสถานะการเข้าสู่ระบบและหลีกเลี่ยงการเข้าสู่ระบบหลายครั้ง
- ฟังก์ชั่นห้องสนทนา ผู้ใช้ออนไลน์ทุกคนสามารถแชทเป็นกลุ่มได้
- ในการเพิ่มเพื่อน คุณต้องแน่ใจว่าอีกฝ่ายออนไลน์อยู่ก่อนจึงจะสามารถเพิ่มเพื่อนได้อย่างถูกต้อง
- ผู้ใช้สามารถสนทนาแบบส่วนตัวได้ ขณะนี้อีกฝ่ายจะต้องออนไลน์ก่อนจึงจะสามารถสนทนาได้ตามปกติ
- ขณะนี้รองรับเฉพาะการแชทแบบข้อความเท่านั้น
คุณสมบัติเพิ่มเติมที่จะดำเนินต่อไป ...
หากคุณคิดว่าโครงการนี้ดี โปรด ติดดาว และแชร์ด้วย!
