Challenge 1 / 1

My chat application is finally ready to become interactive! I've just installed the symfony/ux-turbo-mercure package and set up Mercure in my server. I'm ready to receive messages from other people!

My current template looks like this:

<turbo-stream action="update" target="chat-messages">
    <template>
        {{ include('chat/_messages.html.twig') }}
    </template>
</turbo-stream>

<turbo-stream action="replace" target="chat-user-list">
    <template>
        {{ include('chat/_user-list.html.twig') }}
    </template>
</turbo-stream>

And I now need to listen to a new-messages topic in Mercure in order to receive them. How can I do that?

1

<turbo-stream data-mercure-topic="new-messages" action="update" target="chat-messages">
    <template>
        {{ include('chat/_messages.html.twig') }}
    </template>
</turbo-stream>

2

<turbo-frame data-mercure-topic="new-messages">
    {{ include('chat/_messages.html.twig') }}
<turbo-frame>

3

<div {{ turbo_stream_listen('new-messages') }}></div>

4

Both A and C are correct.

Rewatch the video