NextJS chat app
1.0.0
Exemple en direct à: https://next-js-chat-app.vercel.app
Guide étape par étape à: https://ably.com/blog/realtime-chat-app-nextjs-vercel
Il s'agit d'une application de chat de démonstration avec Next.js en utilisant Ably comme plate-forme de messagerie.
Il démontre l'utilisation de:
Le projet utilise les composants suivants:
Next.js est un framework React de Vercel. Il est utilisé pour créer des applications Web statiques avec rendu côté serveur, fonctions sans serveur et hébergement transparent. C'est un cadre qui prend les connaissances réagites que vous avez déjà et met en place une structure et des conventions.
Est habilement en temps réel, la plate-forme de messagerie Pub / Subs avec une suite de services intégrés pour offrir des fonctionnalités complètes en temps réel directement aux utilisateurs finaux.
Vercel est une plate-forme d'hébergement, construite à partir de zéro pour héberger des applications Next.js et des fonctions sans serveur avec eux.
React est une bibliothèque JavaScript pour créer des interfaces utilisateur avec des composants encapsulés qui gèrent leur propre état.
L'interface utilisateur de l'application que nous allons construire avec cette procédure pas à pas
Nous allons créer une application de chat en temps réel qui s'exécute dans le navigateur. Il sera construit sur le modèle Next.js Create-next-App, il contiendra un composant React qui utilisera habilement pour envoyer et recevoir des messages. Nous rédigerons également une fonction Sext.js sans serveur qui sera utilisée pour se connecter à Ably.
Afin de créer et de déployer cette application, vous aurez besoin:
Vous aurez également besoin d'une touche API pour vous authentifier avec le service habilement. Pour obtenir une clé API, une fois que vous avez créé un compte habilement:
.env à la racine du projet contenant votre clé API et votre API: ABLY_API_KEY=your-ably-api-key:goes-herenpm install .npm run dev .Le serveur Dev Next.js se révèlera et vous verrez une application de chat de démonstration.
Nous utilisons Vercel comme serveur de développement et Build Pipeline.
La façon la plus simple de déployer Next.js à la production est d'utiliser la plate-forme Vercel à partir des créateurs de next.js. Vercel est une plate-forme tout-en-un avec un CDN global prenant en charge le déploiement statique et Jamstack et les fonctions sans serveur. - la documentation suivante.js
Afin de déployer votre nouvelle application de chat à Vercel, vous devrez:
ABLY_API_KEY en tant qu'environnementIl y a quelques façons dont cet exemple pourrait être étendu:
Il n'y a actuellement pas d'historique de chat dans cette démo, vous ne verrez que des messages qui arrivent après avoir rejoint le chat. Vous pouvez étendre cette démo en utilisant la fonctionnalité de rembobinage d'Ably pendant deux minutes d'histoire gratuitement, ou avec un compte payant, jusqu'à ~ 48 heures.
Il n'y a aucun nom d'utilisateur envoyé avec les messages de chat. Cette démo pourrait être étendue pour introduire une boîte d'entrée de nom d'utilisateur et pour ajouter le nom d'utilisateur actuel aux messages tels qu'ils sont envoyés.
La démonstration utilise l'ID client habilement généré au hasard comme un identifiant unique - c'est ainsi qu'il peut détecter si c'est "moi" ou "quelqu'un d'autre qui a envoyé le message.
