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

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'
);
}