NextJS chat app
1.0.0
Contoh langsung di: https://next-js-cat-app.vercel.app
Panduan Langkah demi Langkah di: https://ables.com/blog/realtime-cat-app-nextjs-vercel
Ini adalah aplikasi obrolan demo dengan Next.js menggunakan Ably sebagai platform pesan.
Itu menunjukkan penggunaan:
Proyek ini menggunakan komponen berikut:
Next.js adalah kerangka kerja bereaksi dari Vercel. Ini digunakan untuk membangun aplikasi web statis dengan rendering sisi server, fungsi tanpa server, dan hosting yang mulus. Ini adalah kerangka kerja yang mengambil pengetahuan bereaksi yang sudah Anda miliki, dan menempatkan beberapa struktur dan konvensi di tempatnya.
Ably adalah realtime, platform pub/sub pesan dengan serangkaian layanan terintegrasi untuk memberikan fungsionalitas realtime yang lengkap secara langsung ke pengguna akhir.
Vercel adalah platform hosting, dibangun dari bawah ke atas ke hosting aplikasi selanjutnya.js, dan fungsi tanpa server dengan mereka.
React adalah pustaka JavaScript untuk membangun antarmuka pengguna dengan komponen yang dienkapsulasi yang mengelola keadaan mereka sendiri.
UI aplikasi yang akan kami bangun dengan walkthrough ini
Kami akan membangun aplikasi obrolan realtime yang berjalan di browser. Ini akan dibangun di atas template create-next-app berikutnya.js, itu akan berisi komponen bereaksi yang akan menggunakan dengan cakap untuk mengirim dan menerima pesan. Kami juga akan menulis fungsi serverless next.js yang akan digunakan untuk terhubung ke Ably.
Untuk membangun dan menggunakan aplikasi ini, Anda perlu:
Anda juga akan membutuhkan kunci API dari dengan cakap untuk mengotentikasi dengan layanan yang cakap. Untuk mendapatkan kunci API, setelah Anda membuat akun yang cakap:
.env di akar proyek yang berisi kunci API Anda yang cakap: ABLY_API_KEY=your-ably-api-key:goes-herenpm install .npm run dev .Server dev next.js akan berputar dan Anda akan melihat aplikasi obrolan demo.
Kami menggunakan Vercel sebagai server pengembangan kami dan membangun pipa.
Cara termudah untuk menggunakan Next.js ke produksi adalah dengan menggunakan platform Vercel dari pencipta Next.js. Vercel adalah platform all-in-one dengan CDN global yang mendukung penyebaran Static & JamStack dan fungsi tanpa server. - Dokumentasi Next.js
Untuk menggunakan aplikasi obrolan baru Anda ke Vercel, Anda harus:
ABLY_API_KEY Anda sebagai variabel lingkunganAda beberapa cara contoh ini dapat diperpanjang:
Saat ini tidak ada riwayat obrolan dalam demo ini, Anda hanya akan melihat pesan yang masuk setelah Anda bergabung dengan obrolan. Anda dapat memperluas demo ini dengan menggunakan fitur mundur Ably untuk hingga dua menit sejarah gratis, atau dengan akun berbayar, hingga ~ 48 jam.
Tidak ada nama pengguna yang dikirim dengan pesan obrolan. Demo ini dapat diperluas untuk memperkenalkan kotak input nama pengguna, dan untuk menambahkan nama pengguna saat ini ke pesan saat dikirim.
Demo ini menggunakan ID klien yang dimiliki secara acak sebagai pengidentifikasi unik - yang dapat dideteksi apakah itu "saya" atau "orang lain" yang mengirim pesan.
