Can't add sound alert on every new message on chat website
Question
I'm building a chat website and i want to add a sound alert whenever a new message is sent so i can alert other users for new unread messages(i use MySQL for storing messages etc.). I use ajax to get the messages from the database and put them on my chatbox. I tryied every way but it doesn't seen to work idividually on every NEW message. Please help!
That's my index.php
<?php session_start (); define('DB_HOST', 'localhost'); define('DB_NAME', '*******'); define('DB_USER','*****'); define('DB_PASSWORD','********'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <META HTTP-EQUIV="content-type" CONTENT= "text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Chat2Chat!</title> </head> <body id="body-color"> <?php if (! isset ( $_SESSION ['user'] )) { header ( "Location: sign-in.html" ); // Redirect the user } else { ?> <div id="wrapper"> <div id="menu"> <p class="welcome"> Καλωσήρθες, <b><?php echo $_SESSION['user']; ?></b> </p> <p class="logout"> <b class="submitmsg" id="exit" href="#">Logout</b> </p> <div style="clear: both"></div> </div> <div id="chatbox" class="chatbox"> </div> <form name="message" action=""> <input name="usermsg" type="text" id="usermsg" size="63" autofocus/> <input class="submitmsg" name="submitmsg" type="submit" id="submitmsg" value="Αποστολή"/> </form> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> // jQuery Document $(document).ready(function(){ setInterval ( "get()", 2000 ); }); //jQuery Document $(document).ready(function(){ //If user wants to end session $("#exit").click(function(){ var exit = confirm("Είσαι σίγουρος πως θέλεις να αποσυνδεθείς;"); if(exit==true){window.location = 'index.php?logout=true';} }); }); //If user submits the form $("#submitmsg").click(function(){ var clientmsg = $("#usermsg").val(); $.post("post.php", {text: clientmsg}); $("#usermsg").attr("value", ""); loadLog; return false; }); setInterval (loadLog, 2500); function get(){ $.ajax({ type: 'GET', url: 'chat.php', success: function(data){ $("#chatbox").html(data); var scroll = document.getElementById('chatbox'); scroll.scrollTop = scroll.scrollHeight; } }); } </script> <?php } ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> </script> </body> </html>
The chat.php
<!DOCTYPE HTML> <head> <title>Chat</title> <META HTTP-EQUIV="content-type" CONTENT= "text/html; charset=UTF-8"> </head> <?php define('DB_HOST', 'localhost'); define('DB_NAME', 'db_57218'); define('DB_USER','u57218'); define('DB_PASSWORD','27222528'); $con = mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME) or die("Failed to connect to MySQL: " . mysqli_error()); $query = "SELECT * FROM Messages"; if($result = mysqli_query ($con, $query)){ while ($row = mysqli_fetch_row($result)) {if($row['4']==0){ echo '('.$row['5'].') <b>'.$row['1'].'</b>: '.$row['2'].'<br>'; } else{echo 'Ο χρήστης <b>'.$row['1'].'</b> '.$row['2'].'<br>';} } mysqli_free_result($result); } mysqli_close($con); ?>
1 answers
solution1
0 ACCPTED 2017-01-19 14:22:39
You can store the last message id which you played sound for, and at every refresh action, you can check if the last message id is equals to id you stored before. If not, you play sound.
To be more clear:
$lastMessageId=5;
$lastMessageIdWePlayedSoundFor=4;
if($lastMessageId!=$lastMessageIdWePlayedSoundFor)
{
////play sound here
$lastMessageIdWePlayedSoundFor=$lastMessageId;
}
So whenever there is a new message we haven't played a sound for it's existance, we play sound. You can use this algorithm.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.