Challenge 1 / 1

In my chat application, whenever a user sends a message to the chat, I return a turbo stream message to update all of the user's pages with the new message. My stream code looks like this:

<turbo-stream action="update" id="new-messages-{{ chat.id }}">
    <template>
        {% for message in chat.newMessages %}
            <div class="message">
                <span class="user">{{ message.from }}</span>:
                {{ message.text }}
            </div>
        {% endfor %}
    </template>
</turbo-stream>

But whenever a user sends a message, the entire chat room disappears and only shows the last messages. Why? And how can I fix it?

Because the template we're sending does not contain all the old messages but only the new ones. You need to use Turbo Frames for this, instead of Turbo Streams.

Because the action="update" will replace the entire target DOM element with the new contents instead of appending them. You need to use action="append" instead.

Because the template we're sending does not contain all the old messages, but only the new ones. You need to include all the old messages in the turbo stream template.

Because the action="update" will replace the entire target DOM element with the new contents instead of appending them. You need to create a new container with the right chat id so that old mesages stay in the page.

Rewatch the video