Is it possible to catch broadcasted messages directly in a live component (i.e., without having the root live view catch it first)?

Phoenix Forum Questions / Help
, , , ,
1

I have a live view that contains a live component. I want the live component to respond to certain broadcasted messages (broadcasted from elsewhere). Do I have to use the root live view to catch the broadcasted messages and pass them on to the live component? Or is it possible to catch the broadcasted messages in the live component directly?

Currently my root live view uses handle_info to catch the broadcasted messages and sends an update to the live component with send_update.

2

For example, in my root live view I have:

  def handle_info(%{event: "user_banned", payload: %{id: user_id}}, socket) do
    send_update(
      self(),
      Groups.TopicChatComponent,
      %{id: "groups-topic-component", event: "user_banned", payload: %{user_id: user_id}}
    )
    {:noreply, socket}
  end

And in my live component:

  def update(%{event: "user_banned", payload: %{user_id: user_id}}, socket) do
    # Do stuff
  end
3

is it possible to catch the broadcasted messages in the live component directly

Unfortunately, it is not, because LiveComponents are not actual processes and so they lack the ability to receive messages from other processes.

Your options are to either continue with send_update* or you can consider using an abstraction such as live_event

2 Likes
4

You could use a nested liveview… with the responsability of doing what You don’t want to do in the root liveview.

1 Like
5

Thank you.

I expected that much. It felt a bit verbose, so I wanted to check if I wasn’t missing anything.

Would it be a bad idea to simply send all events with their payloads to the live component of the root live view? In reality my root live view has multiple live components. So I am considering doing something like:

  def handle_info(%{event: event, payload: payload}, socket) do
    send_update(
      self(),
      Groups.TopicChatComponent,
      %{id: "groups-topic-component", event: event, payload: payload}
    )

    send_update(
      self(),
      Groups.SidebarComponent,
      %{id: "groups-sidebar-component", event: event, payload: payload}
    )

    send_update(
      self(),
      Groups.ReportsComponent,
      %{id: "groups-reports-component", event: event, payload: payload}
    )

    {:noreply, socket}
  end

As a consequence each live component will also receive updates that aren’t meant for them. They would just ignore those updates.

6

That’s what I was planning initially, but when I started implementing it, the approach fairly often felt awkward and unnecessarily complex/not-so-elegant to me (for my use case, at least). That could be my lack of mastery, though, rather than a problem with the approach.