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:
- Senden Sie Nachrichten an alle mit dem Chatroom verbundenen Benutzer
- Zeigen Sie Online-Benutzer in einem Chatroom an
- 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.tsx
Supabase-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.
- Erstellen Sie den Supabase-Kanal für
roomCode
konfiguriert, um von ihm gesendete Nachrichten zu empfangen - Hören Sie sich den Kanal eine Zeit lang an
broadcast
mit demmessage
Ereignistyp. - Abonnieren Sie den Echtzeitkanal.
- Legen Sie den Kanal im Anwendungsstatus fest, sodass die Nachricht von der
MessageInput
kann über den Kanal im versendet werdenonMessage
Ruf zurück. - 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 useEffect
und wir senden eine bestimmte Art von Nachricht, um anzugeben, dass es sich um die Anwesenheit handelt:
- Fügen Sie einen Listener für hinzu
join
Anwesenheitsereignis, ordnen Sie es dem Anwesenheitsnachrichtenformat zu und fügen Sie es zum Nachrichtenstatus hinzu. - 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
UndPresenceMessage
Schnittstellen sind in dersrc/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.