Ajax : How/ Is it possible to parse a '.html(response)'

Question

so am making this chat, and am trying to add functionalities. SO far, I have here is what i achieved.

I have a function that displays messages.

function displayMessages()
    {
        $.post('core/chat.php?action=read',function(response)
        {
            $('.message_display').html(response);
            
        });
}

this function is called every second

setInterval(function(){displayMessages();},1000);

the content of the 'reponse' is generated in php.

foreach($messages as $chat_msg)
    {
        echo '<span style="color:#'.$chat_msg['color'].';">['.$chat_msg['user_name'].']:'.$chat_msg['txt'].' </span><br>';              
    }

so i build a function that play sound: playsound(file). I initially wanted to attach it to the function displayMessages()...

function displayMessages()
{
        $.post('core/chat.php?action=read',function(response)
        {
            $('.message_display').html(response);

        });
        playSound ("send_message");

}

...but of course, that plays the sound at each refresh, having a new message or not. So,to fix it, i thought of adding on the php sidee, a code that triggers the sounds if a new message was posted: "ex:

echo $playsoundtrigger="playsound";

but then i have no clue, on what to do next. how can i parse response, so the ajax break down the html on 1 side and the $playsoundtrigger on the other? something along the line i would have approach like this if it was php:

parse_str("reponse+$triger=true");
if ($triger){
   playsound();
}

I look for a parse function in ajax, but all reference i could find was to parse json... any solution? or hint on a logic to address my problem?

Note: I looked, and find that ajax, could tell me if the content has changed, based on his side, but I do not want to go this way, as I would like in the long run, to adapt the sounds on the message:)

thank you

Answer 1

Polling your server on every second... Hm... you are essentially DDOS ing your own server. I think web sockets are what you need. But don't know much about it.

As for your answer, you could actually use json, then build the nodes from browser.

Eg:

$data = [];

foreach ($messages as $chat_msg) {
   $data[] = [
        'color' => $chat_msg['color'],
        'user_name' => $chat_msg['user_name'],
        'txt' => $chat_msg['txt']
   ];
}

echo json_encode([
    'trigger' => 1
    'data' => $data
]);

and in your js

function displayMessages()
{
    $.post(
        'core/chat.php?action=read',
        {},
        function(res) {
            var html = '';
            res.data.foreach(function(msg) {
                html += '<span style="color:#' + msg.color + ';">[' + msg.user_name + ']:' + msg.txt + '</span><br>';
            }
            $('.message_display').html(html);
            if(res.trigger) {
                 playSound ("send_message");
            }
        },
        'json'
    );
}