javascript - 无法为聊天网站上的每条新消息添加声音提醒

标签 javascript php html mysql ajax

我正在建立一个聊天网站,我想在发送新消息时添加声音警报,这样我就可以提醒其他用户有新的未读消息(我使用 MySQL 来存储消息等)。我使用 ajax 从数据库获取消息并将它们放在我的聊天框中。我尝试了各种方法,但似乎并没有对每条新消息都单独起作用。请帮忙!

这是我的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>

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);
?>

最佳答案

您可以存储您播放声音的最后一条消息ID,并且在每次刷新操作时,您可以检查最后一条消息ID是否等于您之前存储的ID。如果没有,您将播放声音。

更清楚地说:

$lastMessageId=5;
$lastMessageIdWePlayedSoundFor=4;

if($lastMessageId!=$lastMessageIdWePlayedSoundFor)
{
   ////play sound here 
   $lastMessageIdWePlayedSoundFor=$lastMessageId;
}

因此,每当有新消息时,我们还没有播放声音,因为它的存在,我们就会播放声音。您可以使用此算法。

关于javascript - 无法为聊天网站上的每条新消息添加声音提醒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41742906/

相关文章:

javascript - 如何在弹出窗口中打开新标签页?

Php复制公共(public)属性

javascript - 如何更改表单中附加选择元素的值

javascript - 如何自定义date-fns的formatRelative?

javascript - addEventListener 加载在 Firefox 上触发两次

php - Laravel从数据库返回的日期时间与同一数据库中的记录不同

html - Android html5游戏webview慢

javascript - 自动生成html用于上传图片

html - 将 Bootstrap 导航栏内的图像垂直对齐到基线

javascript - 如何使用fancybox dialog插件直接显示一个div