Quetzakol

Quetzakol

LiveComponent updating itself at regular intervals

Hello! :slightly_smiling_face:

I am playing a bit with Phoenix LiveView and Surface, and I’m struggling to find the right way to do a component.

Basically, I wanted to do a component with LiveComponent, that takes some text as a property. Then the component would display the text progressively, starting from a blank line and adding characters at a regular pace, like dialogs in video games.

Intuitively, I thought my stateful LiveComponent would be able to use Process.send_after and update the text being displayed in an handle_info. As it turns out, LiveComponents run in the process of their parent LiveView so I can’t do that. The only solution I found then is to handle that in the parent LiveView, but that means breaking the encapsulation as most of the component’s behaviour would not be handled by itself.

So I’m curious, how would you handle such a component?

Thanks for your help

Most Liked

benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

We’ve had similar real world situations (components subscribing to external information) and at the moment you simply can’t encapsulate it without using private Phoenix LiveView APIs. We just bit the bullet and have the parent live view do a handle_info to send_update.

However, I believe there are plans to allow send_update to work from external processes which would allow you to ping the component directly.

AndyL

AndyL

I had another look at this, re-implemented as a LiveView, and everything is much simpler.

defmodule MyApp.ClockLive do
  @moduledoc """
  Renders a live clock that updates at a periodic interval.

  The clock update frequency (`interval`) and the output format (`strftime`)
  are configurable session options.

  To call from the parent template:

      <%= live_render(@socket, MyApp.ClockLive, id: 1, session: %{"interval" => 10_000}) %>
      <%= live_render(@socket, MyApp.ClockLive, id: 2, session: %{"strftime" => "%H:%M"}) %>

  """

  use Phoenix.LiveView

  @impl true
  def mount(_params, session, socket) do
    start_timer(session["interval"] || 1000)
    strftime = session["strftime"] || "%H:%M:%S"
    state = [strftime: strftime, date: local_date(strftime)]
    {:ok, assign(socket, state)}
  end

  @impl true
  def render(assigns) do
    ~L"""
    <%= @date %>
    """
  end

  @impl true
  def handle_info(:clock_tick, socket) do
    newdate = socket.assigns.strftime |> local_date()
    {:noreply, update(socket, :date, fn _ -> newdate end)}
  end

  defp start_timer(interval) do
    :timer.send_interval(interval, self(), :clock_tick)
  end

  defp local_date(format) do
    NaiveDateTime.local_now()
    |> Calendar.strftime(format)
  end
end

AndyL

AndyL

I wrote a clock component, and ran into this self-updating issue too!

My solution also requires a handle-info handler in the parent LiveView…

defmodule MyApp.ClockComponent do
  @moduledoc """
  Renders a live clock that updates at a periodic interval.

  The clock update frequency (`interval`) and the output format (`strftime`)
  are configurable options.

  To call from the parent template:
  
      <%= live_component(@socket, MyApp.ClockComponent, id: 1, interval: 10_000 %>
      <%= live_component(@socket, MyApp.ClockComponent, id: 2, strftime: "%H:%M" %>

  To make this work, the parent LiveView needs a handle_info function:

      @impl true
      def handle_info({:tick, assigns}, socket) do
        send_update MyApp.ClockComponent, assigns
        {:noreply, socket}
      end

  The parent `handle_info` is required because there is no `handle_info` callback 
  for LiveComponent.  

  Ben Wilson (@benwilson512) on Elixir Forum says that in the future, there may
  be a `send_update` feature to allow external processes to ping the component
  directly.

  https://elixirforum.com/t/livecomponent-updating-itself-at-regular-intervals/37047/6

  Also the code in the `update` callback is more complex than desired.

  Ideally the timer would start once in the `mount` callback.  This was not
  possible because the timer interval should be configurable in the assigns,
  and the assigns are not available in the `mount` params. (AFAIK)

  Maybe there is a simpler approach for starting the timer...
  """

  use Phoenix.LiveComponent

  @impl true
  def render(assigns) do
    ~L"""
    <%= @date %>
    """
  end

  @impl true
  def mount(socket) do
    {:ok, socket}
  end

  @impl true
  def update(assigns, socket) do
    opts = update_assigns(assigns) 
    unless assigns[:timer], do: start_timer(opts)
    {:ok, assign(socket, opts)}
  end

  defp update_assigns(assigns) do
    strftime = assigns[:strftime] || "%H:%M:%S"
    [
      id: assigns[:id],
      timer: "started",
      interval: assigns[:interval] || 1000,
      strftime: strftime,
      date: local_date(strftime)
    ]
  end

  defp local_date(format) do
    NaiveDateTime.local_now()
    |> Calendar.strftime(format)
  end

  defp start_timer(opts) do
    :timer.send_interval(opts[:interval], self(), {:tick, opts})
  end
end

Where Next?

Popular in Questions Top

JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
Kurisu
For example for a current url like http://localhost:4000/cosmetic/products?_utf8=✓&amp;query=perfume&amp;page=2, I would like to get: ...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
vac
Hi, I'm quite new in Elixir and I'm trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and ...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call th...
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
hariharasudhan94
Lets say i have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; "XX...
New

Other popular topics Top

sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42842 311
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 35953 110
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement