Collaborer à temps réel avec Supabase

Introduction

L'envoi de données simultanément joue un rôle essentiel dans divers aspects de notre vie moderne. Que ce soit dans le domaine du travail ou dans nos interactions quotidiennes sur les réseaux sociaux, la capacité à transférer des informations en temps réel est importants. Cela permet une communication instantanée, facilitant ainsi la collaboration et la prise de décision rapide. En entreprise, par exemple, l'envoi simultané de données entre les filiales assure une coordination efficace et une gestion fluide des opérations. Dans la vie sociale, l'envoi simultané de données est crucial pour coordonner des événements, parler avec sa famille ou ses amis n’importe où sur terre. En bref, l'envoi simultané de données est bien plus que simplement une simple commodité. C'est un élément fondamental de notre infrastructure numérique d’aujourd’hui qui soutient l'innovation, la connectivité, le progrès et la vie sociale.

Le Realtime de Supabase

Supabase met à disposition les outils nécessaires pour effectuer l'envoi de données en même temps. Il offre une solution de base de données en temps réel qui se nomme Realtime en anglais. Grâce à cette fonctionnalité, les données sont synchronisées en temps réel entre la base de données PostgreSQL et l'interface utilisateur, permettant une expérience utilisateur fluide et dynamique. Cette technologie permet aux applications de réagir instantanément aux changements de données, offrant ainsi des fonctionnalités telles que les mises à jour en direct, les notifications en temps réel et les interactions collaboratives et bien plus encore. Avec Supabase, les développeurs peuvent créer des applications modernes et réactives sans avoir à se soucier de la complexité de la synchronisation des données, ouvrant ainsi la voie à de nouvelles possibilités d'innovation dans le développement d'applications.

Les trois concepts principaux

Channels

Les Channels « canal en français » est l'élément de base du temps réel. C’est grâce à cette fonction qu’on peut créer des salles de discussion entre plusieurs clients comme Discord ou Slack, afin qu’il puisse communiquer ensemble en temps réel. Lorsque les clients sont initialisés, il est possible de définir un sujet qui référence de manière unique un canal. Les clients peuvent alors envoyer et recevoir des messages dans les deux sens sur un canal.

const roomOne = client.channel('room-one')

Broadcast

La fonction Broadcast permet à un client d’envoyer un message à le Channel sélectionner. Par exemple, un client peut envoyer un message dans le Channel « roomOne » et seuls les clients abonnés dans cette salle pourront recevoir ce message. Le Broadcast fait ce qui s’appelle le Publish-subscribe : Un modèle qui permet aux clients de diffuser des messages à des abonnés sur des canaux thématiques, facilitant une communication asynchrone et décentralisée.

roomOne.send({

  type: 'broadcast',

  event: 'test',

  payload: { message: 'hello, world' },

})

Presence

La Presence « présence en français » peut être utilisée pour partager l'état d'un individu avec d'autres participants au sein d'un canal. Cette fonction est principalement utilisée pour savoir si un client est connecté ou déconnecté. Elle est très utile pour gérer les déconnexions inattendues, par exemple, si un client passe mystérieusement hors ligne son état est automatiquement supprimé de l'état partagé.

const presenceTrackStatus = await roomOne.track({

  user: 'user-1',

  online_at: new Date().toISOString(),

})

Postgres Change

Le Postgres Change est l’extension qui va tout simplement servir de base de données. C’est la ou les clients auront la possibilité de modifier, lire, insérer ou supprimer des données en temps réel avec d’autre utilisateur.

const allChanges = client

 .channel('schema-db-changes')

  .on(

   'postgres_changes',

    {

      event: '*',

      schema: 'public',

    },

    (payload) => console.log(payload)

  )

  .subscribe()

Source

Concepts. https://supabase.com/docs/guides/realtime/concepts (consulté le 15 Mars 2024)

Broadcast. https://supabase.com/docs/guides/realtime/broadcast (consulté le 15 Mars 2024)

Presence. https://supabase.com/docs/guides/realtime/presence  (consulté le 15 Mars 2024)

Postgres-Changes. https://supabase.com/docs/guides/realtime/postgres-changes (consulté le 15 Mars 2024)

What is Pub/Sub? The Publish/Subscribe model explained. https://ably.com/topic/pub-sub  (consulté le 15 Mars 2024)