I'll try to explain this as much as possible, but basically what I'm trying to do is create an Instant Messaging Service for my website to be used by privately by a group of people. I've got the sending and receiving down pat, but I can't seem to find a work around for the notification sounds.
What I would like is for a notification sound to play when a new message is received. I've been fiddling with it for about 45 minutes, and I've tried looking around for a solution, but I can't seem to find any avail.
Here is my Javascript:
function update() {
var xmlhttp=new XMLHttpRequest();
var username = "<?php echo $ugt ?>";
var output = "";
var number = 0;
var messages = msgarea.childElementCount / 2;
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var response = xmlhttp.responseText.split("\n")
var rl = response.length
var item = "";
for (var i = 0; i < rl; i++) {
item = response[i].split("\\")
if (item[1] != undefined) {
if (item[0] == username) {
output += "<div class=\"msgsentby ext\"><div class='imgprop'></div></div><div class=\"msgc\"> <div class=\"msg msgfrom\">" + item[1] + "</div> <div class=\"msgarr msgarrfrom\"></div> </div>";
} else {
output += "<div class=\"msgsentby\"><img src='https://api.lspd-fibo.com/avatar/?gt=" + item[0] + "'></div> <div class=\"msgc\"> <div class=\"msg\">" + item[1] + "</div> <div class=\"msgarr\"></div></div>";
number = msgarea.childElementCount / 2;
}
}
}
msgarea.innerHTML = output;
if (messages < number ) {
audio.play();
setTimeout(function() {
messages = msgarea.childElementCount / 2;
}, 500);
}
msgarea.innerHTML += "number: " + number;
msgarea.innerHTML += " messages: " + messages;
}
}
xmlhttp.open("GET","get-messages.php?username=" + username,true);
xmlhttp.send();
}
function sendmsg() {
var message = msginput.value;
var delay = 1500;
if (message != "") {
var username = "<?php echo $ugt ?>";
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {}
}
message = escapehtml(message)
msgarea.innerHTML += "<div class=\"msgc\" style=\"margin-bottom: 30px;\"> <div class=\"msg msgfrom sending\">" + message + "</div> <div class=\"msgarr msgarrfrom\"></div> <div class=\"msgsentby msgsentbyfrom\">Sending...</div> </div>";
msginput.value = "";
var objDiv = document.getElementById("msg-area");
objDiv.scrollTop = objDiv.scrollHeight;
xmlhttp.open("GET","update-messages.php?username=" + username + "&message=" + message,true);
xmlhttp.send();
setTimeout(function() {
var objDiv = document.getElementById("msg-area");
objDiv.scrollTop = objDiv.scrollHeight;
}, delay);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var objDiv = document.getElementById("msg-area");
objDiv.scrollTop = objDiv.scrollHeight;
}
}
}
}
I apologize if it's a little messy, but this is what I have to work with. I appreciate any assistance that anyone can offer in advance :)
//EDIT 1
Personally, what I was thinking may work, was to count all of the messages when the page had loaded, and every time the script refreshed and a new number was detected, make a sound.. I've tried getting this particular method to work, also with no avail but that is likely due to my lack of knowledge in the process.
//EDIT 2
I've edited my JavaScript with what I've been trying to work with in the meantime.