Problem handling a timeout in a LiveComponent

Questions & Help Questions
, ,
1

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.

2

This is a great question overall, but there are some minor details to your approach here that are a bit off.

Live components are NOT a separate process from the liveview. If you Process.sleep within the component, you lock the whole view. Thus, the socket after the sleep is 100% the same socket. This also makes sense from a functional perspective: the socket is not a mutable entity.

BUT your overall point stands. If you use Process.send_after or any other thing that There are things that you may want to do in a live component that cause messages to be sent to self(). This will trigger handle_info inside the live view module, and it isn’t really clear how that can be communicated well down to the view.

Perhaps if you dig into your usecase a little more?

3

Thanks for pointing out the problem with Process.sleep. My example is a bit simplistic, in most of my tests the Process.sleep was in a new process.

The use case is: I have a hook on the client side that sends a series of events to the server with pushEventTo to the component that is part of a LiveView. I only know that I expect messages to arrive but I don’t know the exact count.

On the server side, for example, I tried this:

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

The timer start takes the socket as a parameter and kills existing timeout process (if it exists) and spawns a new process that sleeps for a few seconds. This way, the timeout will occur after the last message, not a few seconds after the first message:

   def timer(socket) do
     pid = socket.assigns.timeout_pid
     Process.exit(pid, :kill)
     new_pid =
       spawn fn ->
         IO.puts("====================== sleep start")
        Process.sleep(5000)
         IO.puts("====================== sleep over")
         \< update socket state here \>
       end
     socket |> assign(:timeout_pid, new_pid)
   end

But this approach won’t work because even if I have a reference to the socket, it will be a snapshot of a previous state and I can’t use it because I don’t know where to send it. I think I need some kind of call back but I have no clue on how to do this.

Any hint would be appreciated… Thanks

4

Instead of letting the server guess when the full batch was sent can you make your client side send a special event once it’s done?

5

Thanks for the hint. Yes, this was also one of my first thoughts and it would work.
I might end up with this solution, however I did not want to rely on a client for the timout: the client may not be able to send it for any reason and pending operations on server side would not be done.
I am not out of alternatives but I did not want to make that design choice just because I do not know how to do it. Thanks

6

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.

7

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.