Php 聊天应用程序与用户键入部分工作
这段代码非常适合聊天。我添加了用于实时通知的ajaxcall.php。问题是,;当其他用户正在键入时,它将显示我自己,而不是显示键入通知。请如何使其显示其他用户正在键入Php 聊天应用程序与用户键入部分工作,php,mysql,ajax,Php,Mysql,Ajax,这段代码非常适合聊天。我添加了用于实时通知的ajaxcall.php。问题是,;当其他用户正在键入时,它将显示我自己,而不是显示键入通知。请如何使其显示其他用户正在键入 index.php <?php ob_start(); ?> <?php session_start(); ?> <!doctype> <html> <head> <title&
index.php
<?php
ob_start();
?>
<?php
session_start();
?>
<!doctype>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="jscolor.js"></script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('#messages').hide();
$('#messages').show();
$("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
},
complete: function() {
$('#messages').hide();
$('#messages').show();
$("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
},
success: function() {
$('#messages').hide();
$('#messages').show();
$("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
}
});
var $container = $("#messages");
$container.load('ajaxload.php?id=<?php echo htmlentities( $_GET['id'], ENT_QUOTES, "UTF-8"); ?>');
var refreshId = setInterval(function()
{
$container.load('ajaxload.php?id=<?php echo htmlentities( $_GET['id'], ENT_QUOTES, "UTF-8"); ?>');
}, 3000);
$("#userArea").submit(function() {
$.post('ajaxPost.php', $('#userArea').serialize(), function(data) {
$("#messages").append(data);
$("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
document.getElementById("output").value = "";
});
return false;
});
});
</script>
<!--Ajax Server Call-->
<script>
function getAjaxFromServer(str){
if (str.length==0){
document.getElementById("ajaxResponse").innerHTML="";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("ajaxResponse").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",'ajaxcall.php?id=<?php echo htmlentities( $_GET['id'], ENT_QUOTES, "UTF-8"); ?>',true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="chatwrapper">
<!--display-->
<!--http://www.youtube.com/watch?v=FyXeOX-uYMc-->
<div id="messages"></div>
<!--post-->
<form id="userArea">
<div id="usercolor">
<input name="reciever" type="hidden" value="<?php echo htmlentities($_GET['id'], ENT_QUOTES, "UTF-8");?>"><br>
<input name="text" class="color" id="text" maxlength="6" value="000000" />
</div>
<div id="messagesntry">
<textarea id="output" name="messages" placeholder="Message" onkeyup="getAjaxFromServer(this.value)"/></textarea>
</div>
<div id="messagesubmit">
<input type="submit" value="Post message" id="submitmessage" />
</div>
</form>
</div>
</body>
</html>
ajaxload.php
<?php
ob_start();
?>
<?php
session_start();
?>
<?php
include('connect.php');
$id=$_GET['id'];
$result = $db->prepare("SELECT * FROM messages ORDER BY id ASC");
$result->execute();
for($i=0; $row = $result->fetch(); $i++){
echo '<div style="color:'.$row['textcolor'].'">' .$row['user'] . ' : '. $row['message'] .'</div>';
}
?>
ajaxcall.php
<?php
ob_start();
?>
<?php
session_start();
?>
<?php
$txt=strip_tags($_GET['id']);
$txt1=strip_tags($_SESSION['SESS_MEMBER_ID']);
echo $txt;
echo " is typing ";
?>
index.php
聊天
$(文档).ready(函数(){
$.ajaxSetup(
{
cache:false,
beforeSend:function(){
$(“#消息”).hide();
$(“#消息”).show();
$(“#消息”).animate({“scrollTop”:$(“#消息”)[0].scrollHeight},“slow”);
},
完成:函数(){
$(“#消息”).hide();
$(“#消息”).show();
$(“#消息”).animate({“scrollTop”:$(“#消息”)[0].scrollHeight},“slow”);
},
成功:函数(){
$(“#消息”).hide();
$(“#消息”).show();
$(“#消息”).animate({“scrollTop”:$(“#消息”)[0].scrollHeight},“slow”);
}
});
var$container=$(“#消息”);
$container.load('ajaxload.php?id=');
var refreshId=setInterval(函数()
{
$container.load('ajaxload.php?id=');
}, 3000);
$(“#用户区域”).submit(函数(){
$.post('ajaxPost.php',$('#userArea').serialize(),函数(数据){
$(“#消息”)。追加(数据);
$(“#消息”).animate({“scrollTop”:$(“#消息”)[0].scrollHeight},“slow”);
document.getElementById(“输出”).value=“”;
});
返回false;
});
});
函数getAjaxFromServer(str){
如果(str.length==0){
document.getElementById(“ajaxResponse”).innerHTML=“”;
返回;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=函数(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById(“ajaxResponse”).innerHTML=xmlhttp.responseText;
}
}
open(“GET”,'ajaxcall.php?id=',true);
xmlhttp.send();
}
其思想是在数据库中存储一个标志,并在脚本上设置一个a.setTimeOut
,每当字段标志从0变为1时,都将在该脚本上运行
下面是要尝试的代码片段
$('#txt_message').keyup(function(){
// Start a flag loop with an id of 'loop' and a counter.
var i = 1;
var dataString = 'flag='+ i ;
$.ajax({
type: "POST",
url: "notif.php",
data: dataString,
cache: false,
success: function(url){
}
});
每当您键入文本字段时,此代码段将更新您的数据库
var timer;
function AjaxRetrieve()
{
$.get("type_on.php?flag=0",function(data)
{
window.clearTimeout(timer);
$("#typing_on").html(data);
timer=window.setTimeout(function(){AjaxRetrieve()},3100);
});
}
timer=window.setTimeout(function(){AjaxRetrieve()},1300);
这段代码将在几秒钟后更新您的标志不要在您的工作中实现这一点,只需先尝试一下即可获得想法=)