Supabase Realtime Chat
supabase/supabase ↗ ·★ 104.7k ·TypeScript ·Apache-2.0
Un exemple de chat de groupe en temps réel propulsé par Supabase Realtime et la sécurité au niveau des lignes, avec un front-end React que vous pouvez livrer sur n'importe quel hébergeur statique.
Aperçu
Supabase Realtime Chat est un exemple compact qui montre comment construire des fonctionnalités en direct et multi-utilisateurs avec Supabase comme back-end complet. Les messages sont diffusés avec Supabase Realtime, qui broadcaste les changements de lignes Postgres à chaque client abonné via WebSockets — de sorte qu’un nouveau message apparaît instantanément pour tout le monde, sans polling ni serveur de sockets personnalisé à exploiter.
L’exemple est aussi une leçon claire sur la façon de faire des front-ends directement connectés à la base de données en toute sécurité. Comme le client React se connecte à Supabase avec une clé anon publique, les politiques de sécurité au niveau des lignes sont ce qui décide réellement qui peut lire et écrire chaque ligne. Étudier comment les politiques sont écrites ici est la meilleure façon de comprendre le modèle de sécurité de Supabase avant de l’appliquer à une vraie application, où réussir le RLS est non négociable.
Sur le plan architectural, il n’y a aucun serveur à déployer. Supabase héberge la base de données, l’authentification et la couche temps réel, et le front-end est un simple build React statique. Cela signifie que vous livrez l’interface sur n’importe quel hébergeur statique gratuit — Netlify ou Cloudflare Pages fonctionnent tous deux bien — et vous la pointez vers votre projet Supabase. C’est un point de départ idéal pour ajouter du chat, de la présence ou d’autres fonctionnalités en direct à quelque chose que vous construisez déjà.
Points forts
- ✓ Messages en direct via Supabase Realtime sur les changements Postgres
- ✓ Sécurité au niveau des lignes, pour que les utilisateurs n'accèdent qu'à ce qui leur est autorisé
- ✓ Supabase Auth pour la connexion, prêt à l'emploi
- ✓ Front-end React statique qui se déploie sur n'importe quel hébergeur gratuit
Idéal pour
- →Apprendre le modèle Supabase Realtime + RLS
- →Ajouter un chat en direct ou la présence à une application existante
- →Démos qui ont besoin d'un back-end sans faire tourner de serveur
Pour commencer
- 1 Créez un projet Supabase et exécutez le SQL de l'exemple pour mettre en place les tables et les politiques
- 2 Activez Realtime sur la table des messages et configurez les politiques RLS
- 3 Ajoutez l'URL de votre Supabase et votre clé anon aux variables d'environnement du front-end
- 4 Déployez le front-end React sur Netlify ou Cloudflare Pages
FAQ
Supabase Realtime diffuse les changements de lignes Postgres vers les clients abonnés via WebSockets. Lorsqu'une ligne est insérée dans la table des messages, chaque client connecté la reçoit instantanément — sans polling.
Parce que le front-end parle directement à Supabase avec une clé anon publique, les politiques RLS sont ce qui impose qui peut lire et écrire des lignes. Elles sont la véritable frontière de sécurité, pas le code client.
Non. Supabase est le back-end. Le front-end est une application React statique, vous la déployez donc sur un hébergeur statique gratuit comme Netlify ou Cloudflare Pages et vous la pointez vers votre projet Supabase.
Déployer Supabase Realtime Chat gratuitement
Plateformes à offre gratuite capables d’héberger ce projet. Choisissez-en une et lancez-vous.
