ห้องแชท Astro Boy
รหัสคลาวด์
ที่อยู่ออนไลน์ www.genal.fun (ไม่ถูกต้องและไม่ได้วางแผนที่จะปรับใช้อีกต่อไป)
หากคุณมีข้อเสนอแนะใด ๆ โปรดไปที่ประเด็นปัญหา
แนะนำโครงการ
? ในเวลาว่าง ฉันต้องการสร้างห้องแชทเพื่อรวบรวมทักษะส่วนหน้า ดังนั้นฉันจึงเริ่มการเดินทางของการพัฒนาห้องแชท Astro Boy ในวันที่ 24 มิถุนายน 2020
? โครงการนี้ได้รับการพัฒนาโดยใช้ typescript เต็มรูปแบบ ซึ่งเป็นการวางรากฐานสำหรับการทำซ้ำการทำงานในอนาคต แน่นอนว่าฉันก็ชอบตัวพิมพ์ดีดมากเช่นกัน
? ปัจจุบันห้องสนทนามีฟังก์ชั่นการแชทครบแล้ว คุณสมบัติเจ๋ง ๆ เพิ่มเติมจะได้รับการพัฒนาในอนาคต การวนซ้ำได้หยุดลงแล้ว! เพื่อนที่สนใจสามารถแยกและพัฒนามันเองได้ และคุณสามารถแก้ไขมันได้ตามใจชอบ! ฉันจะอัปเกรดฟีเจอร์ใหม่เมื่อฉันมีเวลา!
อินเทอร์เฟซโครงการ
เวอร์ชั่นพีซี
เทอร์มินัลมือถือ
การแนะนำฟังก์ชัน
- รองรับมือถือ
- การแก้ไขข้อมูลผู้ใช้ (อวาตาร์/ชื่อผู้ใช้/รหัสผ่าน)
- แชทกลุ่ม/แชทส่วนตัว
- สร้างกลุ่ม/เข้าร่วมกลุ่ม/ออกจากกลุ่ม/กลุ่มการค้นหาแบบคลุมเครือ
- เพิ่มเพื่อน/ลบเพื่อน/ผู้ใช้ค้นหาแบบคลุมเครือ
- การแบ่งหน้าข้อความ
- อีโมติคอน
- การส่งรูปภาพ/การแสดงตัวอย่างรูปภาพ
- สถิติคนออนไลน์
- ธีมที่กำหนดเอง
- เชื่อมต่อการแจ้งเตือนอีกครั้ง
ภาพรวมเทคโนโลยี
- 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
บันทึกการทำซ้ำของระบบ
คลิกเพื่อดู
เวอร์ชัน 1.0.0
การทำงาน
- เพิ่มผู้ใช้ใหม่
- เพิ่มกลุ่มใหม่
- แชทเป็นกลุ่ม
อินเทอร์เฟซ v1.0.0
เวอร์ชัน 2.0.0
การทำงาน
- แชทกลุ่ม/แชทส่วนตัว
- สร้างกลุ่ม/เข้าร่วมแชทกลุ่ม/กลุ่มค้นหาแบบคลุมเครือ
- เพิ่มเพื่อน/ค้นหาเพื่อนแบบคลุมเครือ
- เปลี่ยนชื่อผู้ใช้/อัพโหลดอวาตาร์
- อีโมติคอน
- การแบ่งหน้าข้อความ
อินเทอร์เฟซ v2.0.0
เวอร์ชัน 3.0.0
การทำงาน
- แชทกลุ่ม/แชทส่วนตัว
- สร้างกลุ่ม/เข้าร่วมแชทกลุ่ม/กลุ่มค้นหาแบบคลุมเครือ
- เพิ่มเพื่อน/ค้นหาเพื่อนแบบคลุมเครือ
- อัพโหลดรูปภาพ/วาง ส่งรูปภาพ/ดูตัวอย่างรูปภาพ
- เปลี่ยนชื่อผู้ใช้/อัพโหลดอวาตาร์
- อีโมติคอน
- การแบ่งหน้าข้อความ
อินเทอร์เฟซ v3.0.0
เช่นเดียวกับเวอร์ชัน 2.0.0
เวอร์ชัน 4.0.0
การทำงาน
- แชทกลุ่ม/แชทส่วนตัว
- สร้างกลุ่ม/เข้าร่วมแชทกลุ่ม/กลุ่มค้นหาแบบคลุมเครือ
- เพิ่มเพื่อน/ค้นหาเพื่อนแบบคลุมเครือ
- อัพโหลดรูปภาพ/วาง ส่งรูปภาพ/ดูตัวอย่างรูปภาพ
- เปลี่ยนชื่อผู้ใช้/อัพโหลดอวาตาร์
- อีโมติคอน
- การแบ่งหน้าข้อความ
- รองรับมือถือ
อินเทอร์เฟซ v4.0.0
เช่นเดียวกับเวอร์ชัน 2.0.0
เวอร์ชัน 5.0.0
การทำงาน
- แชทกลุ่ม/แชทส่วนตัว
- สร้างกลุ่ม/เข้าร่วมแชทกลุ่ม/ออกจากกลุ่ม/กลุ่มค้นหาแบบคลุมเครือ
- เพิ่มเพื่อน/ลบเพื่อน/ค้นหาเพื่อนแบบคลุมเครือ
- อัพโหลดรูปภาพ/วาง ส่งรูปภาพ/ดูตัวอย่างรูปภาพ
- เปลี่ยนชื่อผู้ใช้/อัพโหลดอวาตาร์
- อีโมติคอน
- การแบ่งหน้าข้อความ
- รองรับมือถือ
- สถิติคนออนไลน์
- เชื่อมต่อการแจ้งเตือนอีกครั้ง
อินเทอร์เฟซ v5.0.0
เวอร์ชัน 6.0.0
การทำงาน
- รองรับมือถือ
- การแก้ไขข้อมูลผู้ใช้ (อวาตาร์/ชื่อผู้ใช้/รหัสผ่าน)
- แชทกลุ่ม/แชทส่วนตัว
- สร้างกลุ่ม/เข้าร่วมกลุ่ม/ออกจากกลุ่ม/กลุ่มการค้นหาแบบคลุมเครือ
- เพิ่มเพื่อน/ลบเพื่อน/ผู้ใช้ค้นหาแบบคลุมเครือ
- การแบ่งหน้าข้อความ
- อีโมติคอน
- การส่งรูปภาพ/การแสดงตัวอย่างรูปภาพ
- สถิติคนออนไลน์
- ธีมที่กำหนดเอง
- เชื่อมต่อการแจ้งเตือนอีกครั้ง
อินเทอร์เฟซ v6.0.0
ผู้เขียน
GitHub: เอดิสัน
รายชื่อผู้ร่วมให้ข้อมูล
mtnbgx, BoBoooooo, Nyaasu66, BeanCookie (ไม่เรียงตามลำดับ)
วิธีการปรับใช้
คำแนะนำในการปรับใช้ห้องแชท Astro Boy
รายละเอียดเพิ่มเติม
ใช้ typescript เพื่อสร้างห้องแชทบนเว็บที่มีประสิทธิภาพ
