NextJS chat app
1.0.0
Ejemplo en vivo en: https://next-js-chat-app.vercel.app
Guía paso a paso en: https://lact.com/blog/realtime-chat-app-nextjs-vercel
Esta es una aplicación de chat de demostración con Next.js usando hábilmente como la plataforma de mensajería.
Demuestra el uso de:
El proyecto utiliza los siguientes componentes:
Next.js es un marco React de Vercel. Se utiliza para crear aplicaciones web estáticas con representación del lado del servidor, funciones sin servidor y alojamiento sin problemas. Es un marco que toma el conocimiento React que ya tiene, y pone algunas estructuras y convenciones en su lugar.
Es hábilmente la plataforma de mensajería en tiempo real, pub/subconsportamiento con un conjunto de servicios integrados para ofrecer una funcionalidad completa en tiempo real directamente a los usuarios finales.
VERCEL es una plataforma de alojamiento, construida desde cero hasta las aplicaciones Host Next.js y las funciones sin servidor con ellas.
React es una biblioteca JavaScript para construir interfaces de usuario con componentes encapsulados que administran su propio estado.
La interfaz de usuario de la aplicación construiremos con este tutorial
Construiremos una aplicación de chat en tiempo real que se ejecute en el navegador. Se construirá sobre la plantilla de Next.js create-next-app, contendrá un componente React que usará hábilmente para enviar y recibir mensajes. También escribiremos una función sin servidor Next.js que se usará para conectarse hábilmente.
Para construir e implementar esta aplicación, necesitará:
También necesitará una clave API de hábilmente para autenticarse con el servicio hábilmente. Para obtener una clave API, una vez que haya creado una cuenta hábil:
.env en la raíz del proyecto que contiene su clave API hábilmente: ABLY_API_KEY=your-ably-api-key:goes-herenpm install .npm run dev .El servidor de desarrollo Next.js girará y verá una aplicación de chat de demostración.
Estamos utilizando Vercel como nuestro servidor de desarrollo y Built Pipeline.
La forma más fácil de implementar Next.js a Production es usar la plataforma Vercel de los creadores de Next.js. VERCEL es una plataforma todo en uno con CDN global que admite la implementación de Static & Jamstack y las funciones sin servidor. - la documentación Next.js
Para implementar su nueva aplicación de chat en VERCEL, necesitará:
ABLY_API_KEY como una variable de entornoHay algunas maneras en que este ejemplo podría extenderse:
Actualmente no hay historial de chat en esta demostración, solo verá mensajes que vienen después de unirse al chat. Puede expandir esta demostración utilizando la función Rewind de Ably por hasta dos minutos de historia de forma gratuita, o con una cuenta pagada, por hasta ~ 48 horas.
No hay nombres de usuario enviados con los mensajes de chat. Esta demostración podría extenderse para introducir un cuadro de entrada de nombre de usuario y para agregar el nombre de usuario actual a los mensajes a medida que se envían.
La demostración utiliza la identificación del cliente hábilmente generada al azar como un identificador único, que es cómo puede detectar si soy "yo" o "alguien más" que envió el mensaje.
