Challenge 1 / 1

As mentioned in a previous challenge, my chat application is ready to receive updates from our PHP server!

The chat app looks like this:

<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>

How can I we publish a turbo stream from our server that will update the chat-messages element with a new message for all users?

public function updateChatMessages(HubInterface $mercureHub): HubInterface
{
    return new $mercureHub->publish(new Update(
        'new-messages',
        '<turbo-stream action="update" target="chat-messages"><template>New Chat Message Here!</template></turbo-stream>',
    ));
}

public function updateChatMessages(HubInterface $mercureHub): Response
{
    $mercureHub->publish(new Update(
        '<turbo-stream action="update" target="new-messages"><template>New Chat Message Here!</template></turbo-stream>',
    ));

    return new Response(204, null);
}

public function updateChatMessages(): Update
{
    return new new Update(
        'new-messages',
        '<turbo-stream action="update" target="chat-messages"><template>New Chat Message Here!</template></turbo-stream>',
    );
}

public function updateChatMessages(HubInterface $mercureHub): Response
{
    $mercureHub->publish(new Update(
        'new-messages',
        '<turbo-stream action="update" target="chat-messages"><template>New Chat Message Here!</template></turbo-stream>',
    ));

    return new Response(204, null);
}

Rewatch the video