Erstellen einer serverlosen Chat-Anwendung mit Supabase

In der heutigen Zeit gibt es eine Explosion an Diensten, die eine Vielzahl serverloser Möglichkeiten bieten. Aber was ist serverlos? Bedeutet das, dass es keine Server gibt? Man könnte meinen, aber nein.

„Serverlos“ beschreibt traditionell Cloud-Anbieter, die den Aufwand für die Bereitstellung, Wartung, das Patchen und die Skalierung einer Serverinfrastruktur von der Anwendungsentwicklung abstrahieren. Dadurch können sich Anwendungsentwicklungsteams auf die Bereitstellung von Funktionen für ihre Kunden konzentrieren und gleichzeitig von einem Pay-as-you-use-Modell profitieren.

In den letzten Jahren haben Dienstanbieter die Idee der Serverlosigkeit noch weiter entwickelt, indem sie Dienstangebote bereitgestellt haben, die sowohl die Serverinfrastruktur als auch Standardfunktionen für die Anwendungsentwicklung wie Authentifizierung, Autorisierung, relationale Datenbanken, Edge-Funktionen und Echtzeitdienste vollständig verwalten. Diese Dienste abstrahieren die Infrastruktur- und Implementierungsverantwortung, die Anwendungsentwickler ansonsten selbst entwerfen und implementieren müssten.

Wir stellen vor: Supabase

Supabase bezeichnet sich selbst als Open-Source-Alternative zu Googles Firebase. Beide verwalten die gängigsten Dienste, die zum Erstellen von Anwendungen benötigt werden, darunter verwaltete Datenbanken, Authentifizierung, Edge-Funktionen, Echtzeit und Speicher. Der Supabase Echtzeit Broadcast- und Presence-Dienste verwenden ein Pub-Sub-Muster, um die Clientkommunikation zu ermöglichen. Die Präsenzfunktion verwaltet den Status aller Clients, die derzeit mit einem Echtzeitkanal „verbunden“ sind, und verarbeitet technisch detaillierte Anforderungen wie Online-Status.

Es gibt mehrere Alternativen zu Supabase, wie z Gekonnt, PusherUnd PubNub, aber wir fanden, dass die Open-Source-Prinzipien und die lokale Entwicklungsunterstützung von Supabase erstklassig sind. Supabase ermöglicht Entwicklern, die meisten ihrer Dienste während der Entwicklung lokal auszuführen, einschließlich einer lokalen Version seines Dashboards.

Erstellen unserer serverlosen Chat-Anwendung

Benutzen Typoskript, Reagieren, ViteUnd Muihaben wir eine Shell für eine Chat-Anwendung erstellt, in der Benutzer eine Nachricht eingeben können und die Anwendung Nachrichten im Chat-Fenster rendert.

Wir werden unser Projekt für diese Demo aktualisieren, um Supabase Realtime zu verwenden, um unsere Shell in eine funktionierende Mehrbenutzer-Chat-Anwendung zu verwandeln. Wir haben einige einfache Ziele für unsere Chat-Anwendung:

1. Senden Sie Nachrichten an alle mit dem Chatroom verbundenen Benutzer
2. Zeigen Sie Online-Benutzer in einem Chatroom an
3. Geben Sie an, wann Benutzer dem Chatroom beitreten und ihn verlassen

Um den Aufbau unserer Chat-Anwendung zu verfolgen, können Sie die verwenden Github-Repository oder nutzen Sie unsere StackBlitz-Projekt.

Hinweis: Für StackBlitz müssen Sie sich registrieren und ein erstellen Supabase-Projekt da die lokale Supabase-Entwicklung nicht unterstützt wird.

Entwicklungsvoraussetzungen

Um die Chat-Anwendung zu erstellen, muss Folgendes installiert sein.

• Knoten Version 16+
• Docker (getestet mit Version 20.10.17)

Starten der Chat-Anwendung

Um den Anwendungslauf zu nutzen, npm run dev in einem Terminal und navigieren Sie zu ?room=test.

Supabase installieren und initialisieren

Installieren Sie den Supabase-Client und das SDK mit NPM:

npm install supabase --save-dev
npm install @supabase/supabase-js

Sobald der Client installiert ist, konfigurieren Sie das Projekt für die lokale Verwendung von Supabase:

./node_modules/.bin/supabase init

NOTIZ: Wenn Sie das Stackblitz-Projekt weiterverfolgen, sind die oben genannten Schritte nicht erforderlich

In src/App.tsxSupabase-Client-Factory importieren:

import { createClient } from '@supabase/supabase-js';

Anschließend erstellen Sie den Client mithilfe des anonymen Schlüssels und der URL des Projekts. Diese sind auf die Standardwerte im konfiguriert .env.local für die lokale Entwicklung. Wenn Sie StackBlitz verwenden, müssen Sie die Umgebungsvariablen aktualisieren, um die Werte des Supabase-Projekts widerzuspiegeln. Lesen Sie mehr über Verwalten von Umgebungsvariablen mit Vite.

const supabase = createClient(import.meta.env.VITE_SUPABASE_URL, 
 import.meta.env.VITE_SUPABASE_ANON_KEY);

Einrichten des Supabase-Kanals für unseren Chatroom

Der Broadcast-Kanal muss mithilfe des Supabase-Clients für den Chatroom erstellt und konfiguriert werden.

1. Erstellen Sie den Supabase-Kanal für roomCode konfiguriert, um von ihm gesendete Nachrichten zu empfangen
2. Hören Sie sich den Kanal eine Zeit lang an broadcast mit dem message Ereignistyp.
3. Abonnieren Sie den Echtzeitkanal.
4. Legen Sie den Kanal im Anwendungsstatus fest, sodass die Nachricht von der MessageInput kann über den Kanal im versendet werden onMessage Ruf zurück.
5. Gibt eine Funktion zurück, die sich vom Kanal abmeldet und den Status löscht.

const (channel, setChannel) = useState<RealtimeChannel>();


useEffect(() => {
    
    if (roomCode && username) {
        
        const channel = supabase.channel(`room:${roomCode}`, {
            config: {
                broadcast: {
                    self: true
                }
            }
        });

        
        channel.on('broadcast', { event: 'message' }, ({ payload }) => {
            setMessages((messages) => (...messages, payload));
        });

        
        channel.subscribe();

        
        setChannel(channel);

        
        return () => {
            channel.unsubscribe();
            setChannel(undefined);
        };
    }
}, (roomCode, username));

Der Chat-Kanal ist einsatzbereit! Unser letzter Schritt besteht darin, die Chat-Nachrichten an den Kanal zu senden, anstatt sie direkt im Status „Nachrichten“ zu speichern. Wir tun dies, indem wir die Kanäle anrufen .send im MessageInput Komponenten onMessage Ruf zurück:

onMessage={(message) => {
    setMessages((messages) => {
        return (
            ...messages,
            {
                id: createIdentifier(),
                message,
                username,
                type: 'chat'
            }
        );
    });
}}

Um unsere Änderungen lokal zu testen, starten Sie die Supabase-Dienste mit dem folgenden Befehl:

npm run start:supabase

NOTIZ: Beim ersten lokalen Start von Supabase kann es einige Minuten dauern, bis die erforderlichen Docker-Images heruntergeladen sind.

Offen in zwei Browsern und testen Sie, ob Nachrichten zwischen den beiden Chatfenstern gesendet und empfangen werden.

Online-Chat-Benutzer anzeigen

Mithilfe der Präsenzfunktion von Supabase können wir alle Benutzer im Raumkanal abonnieren, die „verbunden“ sind. Zuhören sync Veranstaltung für presence Wenn Sie Nachrichten vom Typ Nachrichten eingeben, können wir die Liste der verbundenen Benutzer im Status der Anwendung aktualisieren.

Der presenceState ist ein Objekt, das mehrere Elemente für jeden Schlüssel enthält. Daher müssen wir die Daten massieren, um die Liste der Benutzer zurückzugeben.

Folgendes zu unserem bestehenden hinzufügen useEffect:

channel.on('presence', { event: 'sync' }, () => {
    
    const presenceState = channel.presenceState();

    
    const users = Object.keys(presenceState)
        .map((presenceId) => {
            const presences = presenceState(presenceId) as unknown as { username: string }();
            return presences.map((presence) => presence.username);
        })
        .flat();
    
    setUsers(users.sort());
});

Damit Benutzer den Benutzernamen der verbundenen Clients ermitteln können, muss jeder Client seine Detailkanäle übergeben track Funktion innerhalb des Abonnement-Callbacks. Wir tun dies, indem wir den vorhandenen Kanalabonnementaufruf aktualisieren:

channel.subscribe((status) => {
    if (status === 'SUBSCRIBED') {
        channel.track({ username });
    }
});

Geben Sie an, wann Benutzer dem Chatroom beitreten und ihn verlassen

Das letzte Ziel des Chatrooms besteht darin, anzuzeigen, wann Benutzer dem Raum beitreten und ihn verlassen join Und leave Ereignistypen für Anwesenheitsnachrichten. Wir müssen einen Listener für diese Ereignisse in unsere bestehende Datenbank aufnehmen useEffectund wir senden eine bestimmte Art von Nachricht, um anzugeben, dass es sich um die Anwesenheit handelt:

1. Fügen Sie einen Listener für hinzu join Anwesenheitsereignis, ordnen Sie es dem Anwesenheitsnachrichtenformat zu und fügen Sie es zum Nachrichtenstatus hinzu.
2. Fügen Sie einen Listener für hinzu leave Anwesenheitsereignis, ordnen Sie es dem Anwesenheitsnachrichtenformat zu und fügen Sie es zum Nachrichtenstatus hinzu.

channel.on('presence', { event: 'join' }, ({ newPresences }) => {
	const presenceMsg = newPresences.map(({ username }) => {
		return {
			id: createIdentifier(),
			type: 'presence' as const,
			username,
			message: 'joined' as const
		};
	});
	setMessages((messages) => (...messages, ...presenceMsg));
});


channel.on('presence', { event: 'leave' }, ({ leftPresences }) => {
	const presenceMsg = leftPresences.map(({ username }) => {
		return {
			id: createIdentifier(),
			type: 'presence' as const,
			username,
			message: 'left' as const
		};
	});
	setMessages((messages) => (...messages, ...presenceMsg));
});

NOTIZ: Der ChatMessage Und PresenceMessage Schnittstellen sind in der src/components/ChatWindow.tsx Komponente.

Erstellen eines Supabase-Projekts

Es ist Zeit, unsere Chat-Anwendung mit dem Live-Supabase-Dienst auszuprobieren!

Eröffnen Sie ein Konto unter und erstellen Sie Ihr „Chatter“-Projekt.

Aktualisieren Sie Chatters VITE_SUPABASE_URL Und VITE_SUPABASE_ANON_KEY Umgebungsvariablen in der .env.production Datei mit den Werten aus Ihrem neu erstellten Supabase-Projekt.

Laufen npm run build && npm run preview im Terminal.

NOTIZ: Der anonyme Supabase-Schlüssel und die URL sind in den API-Projekteinstellungen verfügbar

Um sicherzustellen, dass Sie die lokalen Entwicklungsdienste von Supabase nicht mehr verwenden, führen Sie Folgendes aus: ./node_modules/.bin/supabase stop alle Dienste zu beenden.

Wir haben jetzt unsere fertige Chat-Anwendung, und obwohl wir viele zusätzliche Änderungen vornehmen könnten, um die Benutzerfreundlichkeit unserer lustigen kleinen App zu verbessern, haben wir heute nur noch mehr Zeit, Kinder. Hier sind einige Ideen für weitere Erkundungen:

• Speichern Sie den Benutzernamen für den Chatroom im lokalen Speicher des Browsers
• Aktivieren Sie das Bearbeiten von Nachrichten mithilfe der Nachrichtenkennung
• Zeigen Sie Chatnachrichten im Status „Ausstehend“ und „Fehlgeschlagen“ mit einer Wiederholungsoption an
• Behalten Sie Chatroom-Nachrichten mithilfe der serverlosen Datenbankdienste von Supabase bei
• Benutzeravatare, die die serverlosen Speicherdienste von Supabase nutzen
• Abstrahieren Sie die Chatroom-Funktionalität zu einem benutzerdefinierten React-Hook

Abschließende Gedanken

Supabase ist ein fantastischer Satz an Tools, der es Entwicklern ermöglicht, Prototypen für Ideen zu entwickeln und End-to-End-Produkte bereitzustellen, ohne dass eine Infrastruktur oder in manchen Fällen ein kompletter Backend-Code eingerichtet und gewartet werden muss. SitePen nutzte Supabase, um eine digitale Version von Milestone Mayhem zu erstellen, einem Spiel, das sich mit den Irrungen und Wirrungen der Softwareentwicklung beschäftigt.