Elixir & Phoenix: Scalable Backend Development · Leçon

Présence et mises à jour des données en direct

Ajoutez le suivi de présence à vos applications et gérez les mises à jour de données en direct pour créer des interfaces utilisateur dynamiques.

Leçon 3 sur 411 étapes

Présence et mises à jour des données en direct est une leçon Elixir & Phoenix: Scalable Backend Development gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Elixir & Phoenix: Scalable Backend Development, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Elixir & Phoenix: Scalable Backend Development comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

What is User Presence?

In real-time applications, presence refers to tracking who is currently online, active, or viewing a specific resource.

  • Think of a chat application showing 'online' status.
  • Or a collaborative document editor indicating who else is viewing or editing.
  • It's crucial for dynamic, interactive user interfaces.

Phoenix.Presence Explained

Phoenix Framework provides a powerful, built-in module called Phoenix.Presence to manage presence information.

  • It leverages Elixir's concurrency and distribution features.
  • It automatically handles users joining, leaving, and even network disconnections.
  • This makes building robust presence features much simpler.

Integrating Presence in Channels

To use Phoenix.Presence, you typically integrate it into your Phoenix Channel modules.

First, ensure your UserSocket defines a pubsub_server (e.g., MyApp.PubSub). Then, within your channel module, you add use Phoenix.Presence.

This mixin provides helpers for tracking and retrieving presence data.

Tracking Users with `track/3`

The core function for adding a user to presence is Phoenix.Presence.track/3.

  • It takes the socket, a unique key (e.g., user ID), and metadata (e.g., username, status).
  • You usually call this in your channel's join/3 callback.
  • When a user joins a channel, they are tracked; when they leave, their presence is automatically removed.

Example: Basic Presence Track

Let's see how track/3 is called when a user joins a channel. We'll simulate a socket for this example.

defmodule MyRoomChannel do
  use Phoenix.Channel
  use Phoenix.Presence

  @impl true
  def join("room:lobby", _payload, socket) do
    # In a real app, user_id would come from auth
    user_id = "user_#{System.unique_integer([:positive])}"
    metadata = %{username: "Guest_#{user_id}", status: "online"}

    # Track the user's presence for this topic
    Phoenix.Presence.track(socket, user_id, metadata)
    IO.puts "User #{user_id} joined and tracked in room:lobby"
    {:ok, socket}
  end

  # Minimal run_example to simulate join
  def run_example do
    mock_socket = %{topic: "room:lobby", assigns: %{}}
    join("room:lobby", %{}, mock_socket)
  end
end

MyRoomChannel.run_example()

Accessing Presence Information

Once users are tracked, you can retrieve their presence information:

  • Phoenix.Presence.list(socket): Returns a map of all presences for the channel's topic.
  • Phoenix.Presence.get_by_key(socket, user_key): Retrieves presence data for a specific user key.

These functions allow you to build dynamic UI elements based on who is online.

Live Data Updates Concept

Beyond just knowing who is online, real-time apps often need to push live data updates to clients.

  • This could be a new chat message, a score update in a game, or a change in a shared item's status.
  • The key is to send structured data to all connected clients on a specific channel topic.
  • Clients then receive this data and update their UI accordingly.

Broadcasting Data with `broadcast!`

You can send live data updates using the broadcast!/3 function (or push/3 for direct messages) from your channel or another process.

  • broadcast!(socket, "event_name", %{data: "payload"}): Sends an event and payload to all clients subscribed to the socket's topic.
  • The "event_name" helps clients differentiate between types of updates.

This is how you keep all connected clients in sync with server-side changes.

Example: Broadcasting Live Data

Here's how you might broadcast a new message to all clients in a room. We simulate the broadcast call.

defmodule MyDataUpdater do
  # We use Phoenix.Channel for its broadcast! helper
  use Phoenix.Channel

  # Function to simulate sending an update
  def send_new_message(topic, sender, text) do
    event = "new_message"
    payload = %{sender: sender, text: text, timestamp: System.system_time(:second)}

    # In a real app, you'd call broadcast! from a channel context
    # or use Phoenix.PubSub.broadcast from a GenServer.
    # For this runnable example, we'll just demonstrate the payload.
    IO.puts "Simulating broadcast to '#{topic}' with event '#{event}' and payload:"
    IO.inspect payload
    :ok
  end

  # To run this example
  def run_example do
    send_new_message("room:lobby", "Alice", "Hello everyone!")
  end
end

MyDataUpdater.run_example()

Presence & Updates Check

Which of the following statements about Phoenix.Presence and live data updates are TRUE?

Summary: Presence & Live Data

Great job! You've learned how Phoenix.Presence simplifies tracking user activity in real-time applications.

  • We covered using Phoenix.Presence.track/3 to mark users as present.
  • You also saw how to retrieve presence information with list/1 and get_by_key/2.
  • Finally, we explored sending dynamic live data updates to clients using broadcast!/3 for interactive UIs.

These tools are fundamental for building engaging real-time features!

Gratuit pour commencer

Apprends Elixir avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
12
Leçons
48

Questions Fréquemment Posées

La leçon « Présence et mises à jour des données en direct » est-elle gratuite ?

Oui — le texte complet de « Présence et mises à jour des données en direct » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Elixir & Phoenix: Scalable Backend Development, passe à CoddyKit PRO. Le cours Elixir & Phoenix: Scalable Backend Development comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Présence et mises à jour des données en direct » ?

Ajoutez le suivi de présence à vos applications et gérez les mises à jour de données en direct pour créer des interfaces utilisateur dynamiques. Tu pratiques Elixir & Phoenix: Scalable Backend Development avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Elixir & Phoenix: Scalable Backend Development ?

Aucune expérience préalable n'est requise. Elixir & Phoenix: Scalable Backend Development sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Présence et mises à jour des données en direct » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Elixir & Phoenix: Scalable Backend Development ?

Oui. Chaque leçon Elixir & Phoenix: Scalable Backend Development inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Introduction aux canaux Phoenix
  2. Diffusion et messagerie Pub/Sub
  3. Présence et mises à jour des données en direct
  4. Authentification et autorisation des Channels
← Retour à Elixir & Phoenix: Scalable Backend Development