Challenge 1 / 1

Mercure is installed and ready. I have the following template in my chat page that can receive new messages from other users!

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

<turbo-frame id="chat-messages">
    {{ include('chat/_messages.html.twig') }}
</div>

<turbo-frame id="user-list">
    {{ include('chat/_user-list.html.twig') }}
</div>

Now I need to send updates to that template in order to receive new messages coming from other users!

Assuming our JWT is already correctly signed, what should the data (i.e. the HTML) portion of that message look like?

<turbo-stream target="chat-messages" action="replace">
    <template>
        <div class="message">Hello!</div>
    </teamplte>
</turbo-stream>

<turbo-stream target="chat-messages" action="update">
    <div class="message">Hello!</div>
</turbo-stream>

<turbo-stream target="chat-messages" action="update">
    <template>
        <div class="message">Hello!</div>
    </teamplte>
</turbo-stream>

Any message we send with HTML in it won't update anything because our page needs to contain a correponsing <turbo-stream> element!

Rewatch the video