nallwhy

nallwhy

How to replace LiveView stream with new items? (reset or re-assigning)

I expected that the existing stream to be replaced with new items when stream is assigned again, but it isn’t.
It crashes with ** (ArgumentError) existing hook :messages(stream name) already attached on :after_render.

  @impl true
  def update(assigns, socket) do
    ...

    socket =
      socket
      |> assign(assigns)
      |> assign_messages(new_channel_name)

    {:ok, socket}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <div>
      <.h2># <%= @channel_name %></.h2>
      <p>Your ID: <%= @session_id %></p>
      <div id="messages" class="h-96 overflow-y-auto" phx-update="stream" phx-hook="ChatMessages">
        <div :for={{message_id, message} <- @streams.messages} id={message_id} class="mt-4">
          <p>User id: <%= message.user_id %></p>
          <p><%= message.created_at %></p>
          <p><%= message.body %></p>
        </div>
      </div>
      ...
    </div>
    """
  end

  defp assign_messages(socket, channel_name) do
    {:ok, messages} = Chat.list_messages(channel_name)

    socket
    |> stream(:messages, messages)
    ...
  end

You can test it on the page below, by changing channel.

Is it possible to replace stream with new items? (re-assigning)

page: Chat in Elixir · Json Media
code: json_corp/apps/json_corp_web/lib/json_corp_web/live/playgrounds/chat_live/channel.ex at chat · nallwhy/json_corp · GitHub

Marked As Solved

rio517

rio517

FYI, this is now implemented.

Resetting a stream

To empty a stream container on the client, you can pass :reset with an empty list:

stream(socket, :songs, [], reset: true)

Or you can replace the entire stream on the client with a new collection:

stream(socket, :songs, new_songs, reset: true)

Also Liked

codeanpeace

codeanpeace

At the moment, you can stream_insert to update or add or stream_delete to delete individual elements e.g. message within @streams.messages within an existing stream. Emptying/clearing out an existing stream at the @streams.messages level isn’t currently supported, but it is on the roadmap.

rio517

rio517

FYI, if you do replace a stream, note that the entire collection in the stream is sent down the wire. For many items, that can be quite large. I generated a new app with the default CRUD UI and generated liveview scafolding for posts with a title, ID. For 1000 items, the WebSocket frame had 1.3MB of data sent down the wire. Consider using infinite scrolling as discussed in the guide here: Bindings — Phoenix LiveView v1.2.5

Where Next?

Popular in Questions Top

aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a &gt; b) do {:ok, "a"} end if (a &lt; b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
lucidguppy
I have a super simple question about elixir - how would I take a file like this foo bar baz and output a new file that enumerates th...
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New

Other popular topics Top

vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29377 241
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
hariharasudhan94
Lets say i have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; "XXX...
New

We're in Beta

About us Mission Statement