Live view blocks handle_info during event

Phoenix Forum Questions / Help
, ,
1

Hello

My application (photobooth) has an event trigger that starts a process. This process captures several images (camera) in a row (with a few seconds pause between every image) and should update the frontend (broadcast). This works perfectly if I trigger the process directly in iex. If I push the button in phoenix and trigger the live_view event, It only updates the frontend after the process is completely done.

  def handle_event("shot_picture", _value, socket) do
     Engine.start_process()
    {:noreply, assign(socket, process_step: "Done.")}
  end

  def handle_info(%{topic: @topic, event: "state_data", payload: payload}, socket) do
    {:noreply, assign(socket, %{state_data: payload.state_data})}
  end

And this is the command, how the engine broadcasts the state_data.

    Frontend.Endpoint.broadcast!("photobooth", "state_data", %{state_data: state_data})

Any idea how I can solve this?

2

What’s happening in Engine.start_process() - is it spawning a new process or running synchronously?

2 Likes
3

I’m guessing this has to do with the browser’s single threaded event loop. Generally, we push a message up to the server (handle_event) and await for receive.

A few questions. Is the data streaming back? How large is the data?

For example, when streaming audio through a websocket, it might make sense to throw it in a web worker to avoid blocking the Web Audio API and experiencing interruptions.

4

I would check this first. It was the first thing that came to my mind before I saw the code.

LiveViews are just processes at the end of the day. handle_event/3 is a callback invoked by LiveView when it gets a certain message. When the handle_event function runs, it is going to block other messages from processing until it’s done.

This could be a challenge for your situation, because it appears that you want to synchronously block the LiveView, but also get state updates. I would recommend looking at making the process fully asynchronous. That would alleviate this issue because messages would be quickly processed, which minimizes blocked time.

1 Like
5

Thank you all for your answers and your thoughts. This is the solution:

  def handle_event("shot_picture", _value, socket) do
    spawn(Engine, :start_process, [])
    {:noreply, assign(socket, process_step: "Done.")}
  end

  def handle_info(%{topic: @topic, event: "state_data", payload: payload}, socket) do
    {:noreply, assign(socket, %{state_data: payload.state_data})}
  end

Have a nice day!

1 Like
6

This won’t cleanup our Engine process when your liveview process exits.

7

Not?
How would you do it?

8

Unless processes are linked they’ll exist unrelated from each other. You could use spawn_link and link the process, but that would also mean the liveview process might exist if your Engine process crashes (unless it traps exists, which I’m not sure if it already does).