Phoenix disappearing streams

streams_disappear.ex

Application.put_env(:sample, SamplePhoenix.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 5001],
  server: true,
  live_view: [signing_salt: "aaaaaaaa"],
  secret_key_base: String.duplicate("a", 64)
)

Mix.install([
  {:plug_cowboy, "~> 2.5"},
  {:jason, "~> 1.0"},
  {:phoenix, "~> 1.7.0", override: true},
  {:phoenix_live_view, "~> 0.18.16"}
])

defmodule SamplePhoenix.ErrorView do
  def render(template, _), do: Phoenix.Controller.status_message_from_template(template)
end

defmodule SamplePhoenix.SampleLive do
  use Phoenix.LiveView, layout: {__MODULE__, :live}

  use Phoenix.VerifiedRoutes,
    endpoint: SamplePhoenix.Endpoint,
    router: SamplePhoenix.Router

  def mount(_params, _session, socket) do
    if connected?(socket), do: send(self(), {:load_external_data})

    apples = Enum.map(Enum.take_random(1..10, 3), &%{id: &1, value: &1})

    {:ok, stream(socket, :apples, apples)}
  end

  def render("live.html", assigns) do
    ~H"""
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/priv/static/phoenix.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/priv/static/phoenix_live_view.min.js"></script>
    <script>
      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket)
      liveSocket.connect()
    </script>
    <style>
      * { font-size: 1.1em; }
    </style>
    <%= @inner_content %>
    """
  end

  def render(assigns) do
    ~H"""
    <h1>Streams Test</h1>

    <.link navigate={~p"/"}>Navigate again</.link>

    <p :if={assigns[:external_data]}><%= @external_data %></p>

    <ul id="apples" phx-update="stream"><li :for={{dom_id, apple} <- @streams.apples} id={dom_id}>Apple: <%= apple.value %></li></ul>
    """
  end

  def handle_info({:load_external_data}, socket) do
    Process.sleep(2000)
    {:noreply, assign(socket, :external_data, "External data.")}
  end
end

defmodule Router do
  use Phoenix.Router
  import Phoenix.LiveView.Router

  pipeline :browser do
    plug(:accepts, ["html"])
  end

  scope "/", SamplePhoenix do
    pipe_through(:browser)

    live("/", SampleLive, :index)
  end
end

defmodule SamplePhoenix.Endpoint do
  use Phoenix.Endpoint, otp_app: :sample
  socket("/live", Phoenix.LiveView.Socket)
  plug(Router)
end

{:ok, _} = Supervisor.start_link([SamplePhoenix.Endpoint], strategy: :one_for_one)
Process.sleep(:infinity)

works.ex

Application.put_env(:sample, SamplePhoenix.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 5001],
  server: true,
  live_view: [signing_salt: "aaaaaaaa"],
  secret_key_base: String.duplicate("a", 64)
)

Mix.install([
  {:plug_cowboy, "~> 2.5"},
  {:jason, "~> 1.0"},
  {:phoenix, "~> 1.7.0", override: true},
  {:phoenix_live_view, "~> 0.18.16"}
])

defmodule SamplePhoenix.ErrorView do
  def render(template, _), do: Phoenix.Controller.status_message_from_template(template)
end

defmodule SamplePhoenix.SampleLive do
  use Phoenix.LiveView, layout: {__MODULE__, :live}

  use Phoenix.VerifiedRoutes,
    endpoint: SamplePhoenix.Endpoint,
    router: SamplePhoenix.Router

  def mount(_params, _session, socket) do
    if connected?(socket), do: send(self(), {:load_external_data})

    apples = Enum.map(Enum.take_random(1..10, 3), &%{id: &1, value: &1})

    {:ok, stream(socket, :apples, apples)}
  end

  def render("live.html", assigns) do
    ~H"""
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/priv/static/phoenix.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/priv/static/phoenix_live_view.min.js"></script>
    <script>
      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket)
      liveSocket.connect()
    </script>
    <style>
      * { font-size: 1.1em; }
    </style>
    <%= @inner_content %>
    """
  end

  def render(assigns) do
    ~H"""
    <h1>Streams Test</h1>

    <.link navigate={~p"/"}>Navigate again</.link>

    <p :if={assigns[:external_data]}><%= @external_data %></p>

    <ul id="apples" phx-update="stream">
      <li :for={{dom_id, apple} <- @streams.apples} id={dom_id}>Apple: <%= apple.value %></li>
    </ul>
    """
  end

  def handle_info({:load_external_data}, socket) do
    Process.sleep(2000)
    {:noreply, assign(socket, :external_data, "External data.")}
  end
end

defmodule Router do
  use Phoenix.Router
  import Phoenix.LiveView.Router

  pipeline :browser do
    plug(:accepts, ["html"])
  end

  scope "/", SamplePhoenix do
    pipe_through(:browser)

    live("/", SampleLive, :index)
  end
end

defmodule SamplePhoenix.Endpoint do
  use Phoenix.Endpoint, otp_app: :sample
  socket("/live", Phoenix.LiveView.Socket)
  plug(Router)
end

{:ok, _} = Supervisor.start_link([SamplePhoenix.Endpoint], strategy: :one_for_one)
Process.sleep(:infinity)