NextJS chat app Download - NextJS chat app Quellcode Download

NextJS chat app

AI-Quellcode

1.0.0

Herunterladen

Erstellen einer Echtzeit -Chat -App mit Next.js, geschickt und Vercel

Live-Beispiel bei: https://next-js-chat-app.vercel.app

Schritt-für-Schritt

Dies ist eine Demo -Chat -Anwendung mit Next.js, die als Messaging -Plattform geschickt verwendet wird.

Beschreibung

Es zeigt die Verwendung von:

Pub/Sub Messaging
Reages Haken geschickt
Token -Authentifizierung mit geschickt

Tech Stack

Das Projekt verwendet die folgenden Komponenten:

Next.js ist ein React -Framework von Vercel. Es wird verwendet, um statische Webanwendungen mit Server -Side -Rendering, serverlosen Funktionen und nahtlosen Hosting zu erstellen. Es ist ein Framework, der das React -Wissen nimmt, das Sie bereits haben, und einige Struktur und Konventionen einrichten.
Es handelt sich um Echtzeit-, Pub-/Sub-Messaging-Plattform mit einer Reihe integrierter Dienste, um den Endbenutzern vollständige Echtzeitfunktionen zu liefern.
Vercel ist eine Hosting -Plattform, die von Grund auf bis zu Host Next.js -Apps erstellt wurde, und serverlose Funktionen mit ihnen.
React ist eine JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen mit eingekapselten Komponenten, die ihren eigenen Status verwalten.

Was werden wir bauen?

Die Benutzeroberfläche der App, die wir mit dieser Vorgehensweise bauen werden

Wir werden eine Echtzeit -Chat -App erstellen, die im Browser ausgeführt wird. Es wird auf der nächsten erstellt.js create-next-App-Vorlage, sie enthält eine React-Komponente, mit der Nachrichten geschickt werden, um Nachrichten zu senden und zu empfangen. Wir werden auch eine serverlose Funktion als Next.JS -Funktion schreiben, mit der eine Verbindung zu kräftiger Verbindung hergestellt wird.

Gebäude und vor Ort laufen

Voraussetzungen

Um diese App zu erstellen und bereitzustellen, benötigen Sie:

Ein berechtigtes Konto für das Senden von Nachrichten: Erstellen Sie ein Konto mit kostbarem KOSTENLOS.
Ein Vercel -Konto für das Hosting in Produktion: Erstellen Sie ein Konto bei Vercel kostenlos.
Knoten 16 oder mehr: Knoten installieren.

Sie benötigen außerdem einen API -Schlüssel, um sich mit dem geschickten Service zu authentifizieren. Um einen API -Schlüssel zu erhalten, haben Sie nach dem Erstellen eines geschickten Kontos:

Besuchen Sie Ihr App -Dashboard und klicken Sie auf "Neue App erstellen".
Geben Sie der neuen App einen Namen.
Kopieren Sie den privaten API -Schlüssel, sobald die App erstellt wurde. Halten Sie es sicher, so werden Sie sich mit dem geschickten Service authentifizieren.

Aufbau des Projekts

Um dieses Projekt lokal auszuführen, geben Sie dieses Repo aus und erstellen Sie eine Datei mit dem Titel .env im Stamm "des Projekts, das Ihren geschickten API -Schlüssel enthält:

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

Führen Sie npm install aus.
Run npm run dev .

Der nächste.

Hosting auf Vercel

Wir verwenden Vercel als unseren Entwicklungsserver und erstellen Sie Pipeline.

Der einfachste Weg, um als Next.js für die Produktion einzusetzen, besteht darin, die Vercel -Plattform der Ersteller von Next.js. zu nutzen. Vercel ist eine All-in-One-Plattform mit globaler CDN, die statische und Jamstack-Bereitstellung und serverlose Funktionen unterstützt. - Die nächste Dokumentation

Um Ihre neue Chat -App in Vercel bereitzustellen, müssen Sie:

Erstellen Sie ein GitHub -Konto (wenn Sie noch keines haben)
Drücken Sie Ihre App in ein Github -Repository
Erstellen Sie ein Vercel -Konto
Erstellen Sie eine neue Vercel -App und importieren Sie Ihre App aus Ihrem Github -Repository. (Auf diese Weise müssen Sie Vercel zur Verwendung Ihres Github -Kontos autorisieren.)
Fügen Sie Ihren ABLY_API_KEY als Umgebungsvariable hinzu
Sehen Sie sich Ihre App -Bereitstellung an
Besuchen Sie die neu erstellte URL in Ihrem Browser!

Mach es zu deinem eigenen

Es gibt einige Möglichkeiten, wie dieses Beispiel erweitert werden könnte:

Meldungsverlauf hinzufügen

Derzeit gibt es in dieser Demo keinen Chat -Historie. Sie werden nur Nachrichten sehen, die nach dem Auftreten des Chats eingehen. Sie können diese Demo erweitern, indem Sie die Rückspulenfunktion von Ably für bis zu zwei Minuten Geschichte kostenlos oder mit einem kostenpflichtigen Konto für bis zu ~ 48 Stunden verwenden.

Fügen Sie Benutzernamen hinzu

Es gibt keine Benutzernamen, die mit den Chat -Nachrichten gesendet werden. Diese Demo könnte erweitert werden, um ein Benutzername -Eingabefeld einzuführen und den aktuellen Benutzernamen den Nachrichten hinzuzufügen, wie sie gesendet werden.

Die Demo verwendet die zufällig generierte Client -ID als eindeutige Kennung - so kann sie feststellen, ob es sich um "ich" oder "jemand anderes" handelt, der die Nachricht gesendet hat.