Softknobs

Softknobs

Problem handling a timeout in a LiveComponent

Hi,

I have a stateful LiveComponent where I would like to handle a timeout. This timeout should occur a few seconds after one of the handle_event functions is no longer being called.
I already did this in a LiveView and it was super easy: I call Process.send_after and do the work in the matching handle_info that is called with socket as a parameter.

In a LiveComponent, handle_info does not exist. Handling this in the parent LiveView won’t work because I need to alter the socket from the component but the socket passed to handle_infois the parent LiveView’s socket.

In every scenario I tried I end up with the following problem: at one point I need to update the socket after the delay, so I do something like this:

def start_timeout(socket) do
Process.sleep(2000)
<send event with the socket with whatever tool>
end

The problem with this approach is that there is no garantee that the socket was not altered during the sleep time. And I really have no idea, with my actual knowledge of Elixir and Phoenix, how to handle this case.

Any clues on how this can be done at the LiveComponent’s level? At this point the only solution I see is to migrate the LiveComponent’s code in the LiveView and use handle_info from there. I know this is not the best solution as I would loose the modularity and end up with monolithic Liveviews. But I am just not ready to dig in LiveViews code to fully understand the inner logic.

Thank you.

Marked As Solved

benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

FYI:

       spawn fn ->
         IO.puts("====================== sleep start")
        Process.sleep(5000)
         IO.puts("====================== sleep over")
         \< update socket state here \>
       end

The whole \< update socket state here \> bit was never going to work, even if did all of this in the parent live view. You can send the live view a message and have it update the socket there, but the socket is immutable, and can’t be changed in another process at all.

Perhaps a relatively simple solution could look like this:

live_component(YourComponent, %{
... other assigns
done: @done_components[id-of-component]
})
  # in your livesocket
  def update(params, socket) do
     # The parent live view is telling this live component that it has timed out, react accordingly.
     if params.done do
     end
  end

  def handle_event("patch_received", patch, socket) do
    socket = assign(socket, :import, %{socket.assigns.import | count: socket.assigns.import.count + 1})
    socket = reset_timer(socket)
    {:noreply, socket}
  end

  defp timer(socket) do
    Process.cancel_timer(socket.assigns.timer_ref)
    # clear out the timeout. This is important because technically the timer could have fired 
    # right as we canceled it.
    id = socket.assigns.id
    receive do
      {:timeout, ^id} -> :ok
    after
      0 -> :ok
    end
    # Send ourselves a message in 5 seconds with the id of the live socket
    Process.send_after(self, {:timeout, socket.assigns.id}, 5_000)
  end

Then in the live view we just need to handle the message and set the done flag properly:

# in the live view
# you also need to initialize :done_components on mount to `%{}`
def handle_info({:timeout, component_id}, socket) do
  socket = update(socket, :done_components, fn done_components ->
    Map.put(done_components, component_id, true)
  end)
  {:noreply, socket}
end

Basically, the idea is this. The live component manages the timeout timer, canceling it and restarting it if you get a payload. If the timeout timer is allowed to fire it sends a message to the actual live view, which essentially “routes” that fact to the live component via the params to the live component.

Also Liked

Softknobs

Softknobs

Yes, that’s it! I knew my solution did not work because of immutability but just could not find how to communicate to the component from the parent. I had not realized update could be used for this in this case, this was the missing link I was looking for, thank you!

I also like the use you make of the id, I will probably reuse this idea.
Thank you.

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