Liveview diff tracking with pub/sub

Anyone?

I still cant make sense of it.

I haven’t really used LiveView yet but what I know is that it tracks elements by DOM ID from this reply How do I optimize LiveView when using pagination? - #3 by josevalim . Do you have DOM ID’s set for your elements?

Hi,
thanks for the reply. I do have DOM IDs set for every comment component.

Just have a quick look at the code from link you posted. It shows that preload/1 loads all comments before update/2 (default; i.e. didn’t override)

Try define update function next to preload function

def update(assigns, socket) do
IO.inspect(assigns.children, label: "assigns")
IO.inspect(socket.assigns.children, label: "socket")
end

I hope you find answer around there.

But wouldn’t liveview do the diff and send only the newest child comments even though I load all of them when I have children in temporary assigns and use phx-append?

Normally, yes, Diff = Current - Previous, right? The example code has temporary_assigns: [comment: nil, children: []]} so once view is rendered, and new comment is submitted, fetched_children - [] = fetched_children. (I didn’t pull the code and run debugging though that’s why you could try IO.inspect in update function there)

I’d debug both the broadcaster and the receiver. The broadcaster has children: [new_comment] on their socket, but receiver will call send_update which will call preload/1 and update/2 the first parameter (assigns) of update/2 will come from the send_update and through preload/1, and the second parameter is existing socket.assigns (at this point it should be empty [ ]), and it will merge the assigns (first parameter) into it.

Did you try debugging around the preload and update function? I won’t be sure for sure until I really pull the code down, run, and debug. Hope this helps a little more.

I have not yet debugged the code around update/2 and preload/1. I will soon.

So that would mean, if I understand it correctly, that even though I’m sending only new comment through send_update(comments: [new_comment]), all of the comments are assigned to socket and sent to client, since I’m loading all of them in the preload/1 function. Right?

The broadcaster node is already correct (only send a new reply)
To fix the receiver node, put these new 3 lines of code. That’s it!

lib/live_comment_web/live/comment_live/show.ex

  def preload(list_of_assigns) do
    # https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html#module-preloading-and-update
+   {send_update_assigns, list_of_assigns} = Enum.split_with(list_of_assigns, fn a -> Map.get(a, :prevent_preload) end)
    
+   if send_update_assigns == [] do
      parent_ids = Enum.map(list_of_assigns, & &1.id)
      children = Managed.fetch_child_comments(parent_ids)
    
      Enum.map(list_of_assigns, fn assigns ->
        Map.put(assigns, :children, Map.get(children, assigns.id, []))
      end)
+  else
+    send_update_assigns
+  end 
  end

lib/live_comment_web/live/comment_live/index.ex

  def handle_info({Managed, :new_comment, comment}, socket) do
    if comment.parent_id do
-     send_update(CommentLive.Show, id: comment.parent_id, children: [comment])
+     send_update(CommentLive.Show, id: comment.parent_id, children: [comment], prevent_preload: true)
      {:noreply, socket}
    else
      {:noreply, assign(socket, comments: [comment])}
    end 
  end 

Thank you very much, I will try that out

I just got the chance to test your solution and it totally worked. Thanks a lot