Chatterbox เป็นแอปพลิเคชั่นการส่งข้อความแบบเรียลไทม์ที่สร้างขึ้นด้วย 13 และ Pusher ถัดไป
คุณสามารถสร้างการแชทเป็นกลุ่มหรือเริ่ม DM ผู้ใช้สามารถส่งข้อความหรืออัปโหลดวิดีโอหรือรูปภาพหลายรายการ
UI ได้รับการอัปเดตแบบเรียลไทม์ ความหมายเมื่อช่องถูกสร้างขึ้นโดยผู้ใช้รายอื่นหรือเมื่อส่งข้อความคุณจะเห็นการอัปเดตทันที
ปรับใช้บน vercel: https://chatterboxes.vercel.app/
โครงการนี้ใช้เราเตอร์แอป Next.js 13, ส่วนประกอบเซิร์ฟเวอร์ React, การกระทำของเซิร์ฟเวอร์, ความสงสัยและการตอบสนองของ cache()
นอกจากนี้เรายังใช้ประโยชน์จากเส้นทาง API (ปรับใช้เป็นฟังก์ชั่น Serverless ไปยัง Vercel) สำหรับการกระทำเช่นการลงทะเบียนผู้ใช้ใหม่การสร้างข้อความ ฯลฯ
เมื่อใดก็ตามที่ผู้ใช้ส่งข้อความสร้างการแชทหรือมาออนไลน์ตัวอย่างเช่นผู้ใช้รายอื่นทั้งหมดจะได้รับแจ้งและ UI ของพวกเขาจะได้รับการอัปเดตแบบเรียลไทม์
สิ่งนี้ทำด้วยแรงผลักดัน เรา ฟังเหตุการณ์ เช่น message:new
หรือ chat:update
เมื่อผู้ใช้ดำเนินการเรา จะเรียก เหตุการณ์บนเซิร์ฟเวอร์และการฟังของผู้ใช้อื่น ๆ จะได้รับการอัปเดต
นอกเหนือจากการฟังและการเรียกใช้เหตุการณ์แล้วช่องแสดงของ Pusher ยังใช้เพื่อให้ผู้ใช้ทุกคนออนไลน์อยู่ในปัจจุบัน
เมื่อผู้ใช้เข้าสู่ระบบเราจะได้รับผู้ใช้ที่ใช้งานทุกคนจาก Pusher และเก็บไว้ในร้านค้า Jotai ในพื้นที่ เมื่อผู้ใช้เข้าสู่ระบบหรือออกจากระบบ Pusher จะส่งการอัปเดตและเราจะอัปเดตร้านค้า Jotai ในเครื่อง
โครงการนี้เขียนด้วย TypeScript และใช้ ประเภท Prisma ที่สร้างขึ้น & zod schemas และประเภทเพื่อให้แน่ใจว่า typesafety ทั่ว codebase เนื่องจากประเภท Generates อัตโนมัติของ Prisma เราไม่ค่อยจะประกาศหรือรักษาประเภทใด ๆ
zod
ใช้เพื่อตรวจสอบทุกรูปแบบไคลเอ็นต์เพื่อให้แน่ใจว่าค่าถูกต้องก่อนที่จะทำการเรียก API หรือการกลายพันธุ์ใด ๆ
บนเซิร์ฟเวอร์เส้นทาง API ทุกเส้นทางยังมีการตรวจสอบความถูกต้องของ ZOD เพื่อให้แน่ใจว่าอินพุตนั้นถูกต้องและสอดคล้องกับ ZOD Schema ก่อนดำเนินการต่อ
ESLINT ได้รับการกำหนดค่าด้วยกฎที่เข้มงวดเพื่อให้แน่ใจว่าคุณภาพของรหัสและลดข้อบกพร่อง
nodemailer