Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
TRACK

JavaScript Frameworks & Tools >

COURSE

Symfony UX: Turbo >

CHAPTER

Smartly Updating Elements for all Users

Buy Access to Course
Next Chapter

Challenge #1 of 1

Q: 

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?

a)

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.

b)

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.

c)

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.

d)

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.

Rewatch Video
userVoice