Updates on broadcast

[CosteaPaul]

I'm new to both LiveView and Elixir, so there's a good chance i'm mostly confused, though i'm hoping this is not a stupid question.

Using the simple example given in the README, i tried to "share" the counter across all users. What ends up happening is really patchy updating. Sometimes the counter goes up in the session where i'm incrementing, sometimes in a different session and everything runs out of sync.

At first i though it's just me doing something stupid with the broadcasting or the handling of the broadcast. But, if i change the render to this:

def render(assigns) do
    ~H"""
    <div>{@count}</div>
    <.vue
      count={@count}
      edges={@live_edges}
      v-component="Counter"
      v-socket={@socket}
      v-on:inc={JS.push("inc")}
    />
    """
end

and just add a vanilla div with the count in it, the updating of this looks like what i would expect it to look.

For the record, the full live_view looks like this:

defmodule LiveVueExamplesWeb.LiveCounter do
  use LiveVueExamplesWeb, :live_view
  @topic "shared_session"

  def render(assigns) do
    ~H"""
    <div>{@count}</div>
    <.vue
      count={@count}
      v-component="Counter"
      v-socket={@socket}
      v-on:inc={JS.push("inc")}
    />
    """
  end

  def mount(_params, _session, socket) do
   if connected?(socket) do
      LiveVueExamplesWeb.Endpoint.subscribe(@topic)
    end

    {:ok, assign(socket, :count, 0)}
  end

  def handle_event("inc", %{"value" => diff}, socket) do
    new_count = socket.assigns.count + diff
    LiveVueExamplesWeb.Endpoint.broadcast(@topic, "update_count", new_count)
    {:noreply, socket}
  end

  def handle_info(%{event: "update_count", payload: new_count}, socket) do
    # Update the count for all connected users
    {:noreply, assign(socket, :count, new_count)}
  end
  
end

Am i missing something fundamental here?

[Valian]

@CosteaPaul No, it's all good! Everything works on my machine with your example, I will record a short video showcasing what are my results.

Your code is not storing anywhere a "starting value" of a counter, so when a new user comes to the page he always starts with count: 0. But that value should be updated as soon as some other user does an update.

PS. There's a small bug in Counter.vue, it says it will increase the diff by X * 2 but in reality updates it just by X. Maybe it's the source of your confusion?

[Valian]

A short recording, low quality because Github allows up to 10MB attachements. Also speaking quietly, kids are sleeping ;)

LiveVueCounterShared.mp4

[CosteaPaul]

Uhh, screen capture. That's a good idea.

This is what it looks like for me:

update_small.mp4

Your debug env looks a lot nice than mine. I'm just trying this out in edge. What are you using?