NextJS chat app

การสร้างแอพแชทแบบเรียลไทม์ด้วย next.js, Ably และ vercel

ตัวอย่างสดที่: https://next-js-chat-app.vercel.app

คู่มือทีละขั้นตอนที่: https://ably.com/blog/realtime-chat-app-nextjs-vercel

นี่คือแอปพลิเคชั่นแชทสาธิตที่มี next.js โดยใช้ความสามารถเป็นแพลตฟอร์มการส่งข้อความ

คำอธิบาย

มันแสดงให้เห็นถึงการใช้:

• ผับ/การส่งข้อความย่อย
• เบ็ดตอบสนองของ Ably
• การตรวจสอบโทเค็นด้วยความสามารถ

ซ้อนเทค

โครงการใช้ส่วนประกอบต่อไปนี้:

• Next.js เป็นกรอบการตอบสนองจาก Vercel มันถูกใช้เพื่อสร้างเว็บแอปพลิเคชันแบบคงที่ด้วยการเรนเดอร์ด้านเซิร์ฟเวอร์ฟังก์ชั่นที่ไม่มีเซิร์ฟเวอร์และโฮสติ้งที่ราบรื่น มันเป็นกรอบที่ใช้ความรู้ที่ตอบสนองที่คุณมีอยู่แล้วและวางโครงสร้างและการประชุมบางอย่าง

• เป็นแบบเรียลไทม์แพลตฟอร์มการส่งข้อความแบบผับ/ย่อยพร้อมชุดบริการแบบบูรณาการเพื่อส่งมอบฟังก์ชั่นเรียลไทม์ที่สมบูรณ์โดยตรงไปยังผู้ใช้ปลายทาง

• Vercel เป็นแพลตฟอร์มโฮสติ้งที่สร้างขึ้นจากพื้นดินจนถึงโฮสต์แอพ Next.js และฟังก์ชั่นที่ไม่มีเซิร์ฟเวอร์กับพวกเขา

• React เป็นไลบรารี JavaScript สำหรับการสร้างส่วนต่อประสานผู้ใช้ด้วยส่วนประกอบที่ห่อหุ้มซึ่งจัดการสถานะของตนเอง

เราจะสร้างอะไร?

UI ของแอพที่เราจะสร้างด้วยคำแนะนำนี้

เราจะสร้างแอพแชทแบบเรียลไทม์ที่ทำงานในเบราว์เซอร์ มันจะถูกสร้างขึ้นบนเทมเพลต create-next-app ถัดไปมันจะมีส่วนประกอบปฏิกิริยาซึ่งจะใช้ในการส่งและรับข้อความ นอกจากนี้เราจะเขียนฟังก์ชั่น Next.js Serverless ซึ่งจะใช้ในการเชื่อมต่อกับ Ably

การสร้างและวิ่งในพื้นที่

ข้อกำหนดเบื้องต้น

ในการสร้างและปรับใช้แอพนี้คุณจะต้อง:

• บัญชีที่มีความสามารถ ในการส่งข้อความ: สร้างบัญชีด้วยความสามารถฟรี
• บัญชี vercel สำหรับโฮสติ้งในการผลิต: สร้างบัญชีด้วย vercel ฟรี
• โหนด 16 ขึ้นไป: ติดตั้งโหนด

นอกจากนี้คุณยังต้องใช้คีย์ API จากความสามารถในการตรวจสอบด้วยบริการด้วยความสามารถ ในการรับคีย์ API เมื่อคุณสร้างบัญชี Ably:

1. เยี่ยมชมแดชบอร์ดแอพของคุณและคลิกที่ "สร้างแอพใหม่"
2. ตั้งชื่อแอปใหม่
3. คัดลอกคีย์ API ส่วนตัวเมื่อสร้างแอปแล้ว รักษาความปลอดภัยนี่คือวิธีที่คุณจะตรวจสอบความถูกต้องด้วยบริการด้วยความสามารถ

การสร้างโครงการ

1. ในการเรียกใช้โครงการนี้ในพื้นที่ให้แยก repo นี้และสร้างไฟล์ที่เรียกว่า .env ในรูทของโครงการที่มีคีย์ API ของคุณ:

ABLY_API_KEY=your-ably-api-key:goes-here

2. เรียกใช้ npm install
3. เรียกใช้ npm run dev

เซิร์ฟเวอร์ dev next.js จะหมุนขึ้นและคุณจะเห็นแอปพลิเคชันแชทสาธิต

โฮสติ้งบน vercel

เราใช้ Vercel เป็นเซิร์ฟเวอร์การพัฒนาของเราและสร้างท่อ

วิธีที่ง่ายที่สุดในการปรับใช้ next.js ในการผลิตคือการใช้แพลตฟอร์ม vercel จากผู้สร้างของ Next.js Vercel เป็นแพลตฟอร์มแบบ all-in-one พร้อมการปรับใช้แบบคงที่และการใช้งาน Jamstack และฟังก์ชั่น Serverless - เอกสารถัดไป JS

ในการปรับใช้แอพแชทใหม่ของคุณไปยัง Vercel คุณจะต้อง:

1. สร้างบัญชี GitHub (ถ้าคุณยังไม่มี)
2. กดแอพของคุณไปยังที่เก็บ GitHub
3. สร้างบัญชี vercel
4. สร้างแอพ Vercel ใหม่และนำเข้าแอปของคุณจากที่เก็บ GitHub ของคุณ (สิ่งนี้จะทำให้คุณต้องอนุญาตให้ Vercel ใช้บัญชี GitHub ของคุณ)
5. เพิ่ม ABLY_API_KEY ของคุณเป็นตัวแปรสภาพแวดล้อม
6. ดูแอปของคุณปรับใช้
7. เยี่ยมชม URL ที่สร้างขึ้นใหม่ในเบราว์เซอร์ของคุณ!

ทำให้เป็นของคุณเอง

มีหลายวิธีที่ตัวอย่างนี้สามารถขยายได้:

เพิ่มประวัติข้อความ

ขณะนี้ไม่มีประวัติการแชทในการสาธิตนี้คุณจะเห็นเฉพาะข้อความที่เข้ามาหลังจากที่คุณเข้าร่วมการแชท คุณสามารถขยายการสาธิตนี้โดยใช้คุณสมบัติ Rewind ของ Ably สำหรับประวัติสูงสุดสองนาทีฟรีหรือด้วยบัญชีที่ชำระเงินนานถึง ~ 48 ชั่วโมง

เพิ่มชื่อผู้ใช้

ไม่มีชื่อผู้ใช้ใด ๆ ที่ส่งพร้อมข้อความแชท การสาธิตนี้สามารถขยายออกไปเพื่อแนะนำกล่องอินพุตชื่อผู้ใช้และเพื่อเพิ่มชื่อผู้ใช้ปัจจุบันลงในข้อความตามที่ส่ง

การสาธิตใช้รหัสไคลเอนต์ที่สร้างขึ้นแบบสุ่มเป็นตัวระบุที่ไม่ซ้ำกัน - ซึ่งเป็นวิธีที่สามารถตรวจจับได้ว่าเป็น "ฉัน" หรือ "คนอื่น" ที่ส่งข้อความ

ข้อมูลเพิ่มเติม

• เข้าร่วมเซิร์ฟเวอร์ Discord ของเรา
• ติดตามเราบน Twitter
• ใช้ SDK ของเรา
• เยี่ยมชมเว็บไซต์ของเรา

---