AJAX PHP MySQL 聊天
我的聊天程序有一个罕见的问题,它往往会显示该消息两次。该消息仅在数据库中显示一次,但就像我说的那样,它很少在客户端显示两次...
我使用 AJAX/PHP/MySQL 来运行聊天...
SELECT *
FROM `ims`
WHERE `to` = '$ACCOUNT_ID'
&& `sent_time` >= '$IM_SYSTEM_CHECK'
&& `sent_time` < '$CURRENT_TIME'
|| `from` = '$ACCOUNT_ID'
&& `sent_time` >= '$IM_SYSTEM_CHECK'
&& `sent_time` < '$CURRENT_TIME'
ORDER BY `sent_time` ASC
它的工作原理是,它会加载任何消息大于或等于最后一次消息检查 ($IM_SYSTEM_CHECK),但它们必须小于当前时间,该时间在调用后成为 ($IM_SYSTEM_CHECK)。我不明白这个问题是怎么存在的。
是的,这里有更多代码......
function UPDATE_SYSTEM(){
UPDATE_SYSTEM_REQUEST = new XMLHttpRequest();
UPDATE_SYSTEM_REQUEST.onreadystatechange = function(){
if(UPDATE_SYSTEM_REQUEST.readyState == 4){
if(UPDATE_SYSTEM_REQUEST.responseText == "BAD_KEY"){
window.location = 'index.php';
}else{
SYSTEM_FULL = UPDATE_SYSTEM_REQUEST.responseText;
if(SYSTEM_FULL != ""){
SYSTEM_IM = SYSTEM_FULL.split("¥");
for(IM_ROW in SYSTEM_IM){
IM_INFO = SYSTEM_IM[IM_ROW].split("€");
REMOVE_COOKIE("CLOSED_LIST",IM_INFO[0]);
if(IM_INFO[0] != undefined){
if(IM_TABS[IM_INFO[0]] == undefined){
IM_TABS[IM_INFO[0]] = 0;
}
if(IM_TABS[IM_INFO[0]] == 0){
IM_TABS[IM_INFO[0]] = 1;
IM_BAR++;
if(document.getElementById("IM_BAR_BOX").style.display == "none"){
document.getElementById("IM_BAR_BOX").style.display = "block";
}
if(CURRENT_IM == 0 && IM_LOAD == 1){
im_display = "block";
CHANGE_CURRENT(IM_INFO[0]);
}else{
im_display = "none";
}
NIMD = document.createElement("div");
NIMD.id = "IM_"+IM_INFO[0];
NIMD.style.position = 'relative';
NIMD.style.cssFloat = 'left';
NIMD.style.margin = '3px 0px 0px 3px';
NIMD.style.width = '24px';
NIMD.style.height = '24px';
if(IM_INFO[1] == "graphics/mini_no_picture.png"){
IM_PICTURE = "graphics/im_bar_no_picture.png";
}else{
IM_PICTURE = IM_INFO[1];
}
NIMD.innerHTML = '<div id="IM_INNER_'+IM_INFO[0]+'" style="display: '+im_display+'; position: absolute; top: -360px; left: -11px; width: 230px; height: 353px; background-image: url(\'graphics/im_box.png\');"><img style="position: absolute; top: 4px; left: 4px;" src="'+IM_INFO[1]+'"><div style="position: absolute; top: 2px; left: 47px; font-size: 13px; font-weight: bold; color: #FFFFFF;">'+IM_INFO[2]+'</div><img style="position: absolute; top: 4px; left: 202px; cursor: pointer;" src="graphics/minimize.png" onClick="document.getElementById(\'IM_INNER_'+IM_INFO[0]+'\').style.display=\'none\'; CHANGE_CURRENT(0);"><img style="position: absolute; top: 4px; left: 217px; cursor: pointer;" src="graphics/close.png" onClick="CLEAR_IM('+IM_INFO[0]+'); document.getElementById(\'IM_BAR_BOX\').removeChild(document.getElementById(\'IM_'+IM_INFO[0]+'\')); IM_TABS['+IM_INFO[0]+'] = 0; CHANGE_CURRENT(0); IM_BAR--; if(IM_BAR == 0){ document.getElementById(\'IM_BAR_BOX\').style.display = \'none\'; }"><img style="position: absolute; top: 326px; left: 212px; cursor: pointer;" src="graphics/im_send.png" onClick="IM_SEND('+IM_INFO[0]+',document.getElementById(\'IM_MESSAGE_'+IM_INFO[0]+'\').value);"><div id="IM_CONTENT_'+IM_INFO[0]+'" style="position: absolute; top: 48px; left: 4px; overflow-x: hidden; overflow-y: scroll; width: 218px; height: 270px; padding-bottom: 1px; padding-left: 3px; padding-top: 1px; word-wrap: break-word;"></div><input id="IM_MESSAGE_'+IM_INFO[0]+'" type="text" onkeyup="if(event.keyCode == 13 || event.which == 13){ IM_SEND('+IM_INFO[0]+',document.getElementById(\'IM_MESSAGE_'+IM_INFO[0]+'\').value); }" style="position: absolute; top: 325px; left: 5px; border: none; width: 202px; height: 16px; font-weight: bold; background-color: transparent; font-family: Arial; font-size: 14px; color: #000000;"></div><img style="cursor: pointer; width: 24px; height: 24px;" src="'+IM_PICTURE+'" onClick="if(document.getElementById(\'IM_INNER_'+IM_INFO[0]+'\').style.display == \'block\'){ document.getElementById(\'IM_INNER_'+IM_INFO[0]+'\').style.display=\'none\'; CHANGE_CURRENT(0); }else{ document.getElementById(\'IM_INNER_'+IM_INFO[0]+'\').style.display=\'block\'; document.getElementById(\'IM_MESSAGE_'+IM_INFO[0]+'\').focus(); document.getElementById(\'IM_CONTENT_'+IM_INFO[0]+'\').scrollTop = document.getElementById(\'IM_CONTENT_'+IM_INFO[0]+'\').scrollHeight; if(CURRENT_IM != 0){ document.getElementById(\'IM_INNER_\'+CURRENT_IM).style.display=\'none\'; } CHANGE_CURRENT('+IM_INFO[0]+'); }" title="'+IM_INFO[2]+'"><img id="IM_NEW_'+IM_INFO[0]+'" onClick="if(CURRENT_IM != 0){ document.getElementById(\'IM_INNER_\'+CURRENT_IM).style.display=\'none\'; } document.getElementById(\'IM_INNER_'+IM_INFO[0]+'\').style.display=\'block\'; document.getElementById(\'IM_MESSAGE_'+IM_INFO[0]+'\').focus(); document.getElementById(\'IM_CONTENT_'+IM_INFO[0]+'\').scrollTop = document.getElementById(\'IM_CONTENT_'+IM_INFO[0]+'\').scrollHeight; this.style.display = \'none\'; CHANGE_CURRENT('+IM_INFO[0]+');" title="'+IM_INFO[2]+'" style="display: none; position: absolute; top: 0px; left: 0px; z-index: 2; cursor: pointer;" src="graphics/new_message.png">';
document.getElementById("IM_BAR_BOX").appendChild(NIMD);
IM_TABS[IM_INFO[0]] = 1;
if(im_display == "block"){
document.getElementById("IM_MESSAGE_"+IM_INFO[0]).focus();
}
}
if(document.getElementById("IM_CONTENT_"+IM_INFO[0]).innerHTML == ""){
NIMM = document.createElement("div");
NIMM.innerHTML = '<div style="font-size: 12px; color: #FC7012; float: left; width: 138px; margin-bottom: -2px;">'+IM_INFO[3]+'</div><div style="font-size: 12px; color: #FC7012; float: left; width: 60px; text-align: right; margin-bottom: -2px;">'+IM_INFO[4]+'</div><div style="clear: left; font-size: 12px; color: #000000;">'+IM_INFO[5]+'</div>';
document.getElementById("IM_CONTENT_"+IM_INFO[0]).appendChild(NIMM);
}else{
ims = new Image();
ims.src = 'graphics/im_split.png';
ims.style.display = 'block';
ims.style.margin = '1px 0px 1px -3px';
ims.style.position = 'relative';
document.getElementById("IM_CONTENT_"+IM_INFO[0]).appendChild(ims);
NIMM = document.createElement("div");
NIMM.innerHTML = '<div style="font-size: 12px; color: #FC7012; float: left; width: 138px; margin-bottom: -2px;">'+IM_INFO[3]+'</div><div style="font-size: 12px; color: #FC7012; float: left; width: 60px; text-align: right; margin-bottom: -2px;">'+IM_INFO[4]+'</div><div style="clear: left; font-size: 12px; color: #000000;">'+IM_INFO[5]+'</div>';
document.getElementById("IM_CONTENT_"+IM_INFO[0]).appendChild(NIMM);
}
document.getElementById("IM_CONTENT_"+IM_INFO[0]).scrollTop = document.getElementById("IM_CONTENT_"+IM_INFO[0]).scrollHeight;
if(document.getElementById("IM_INNER_"+IM_INFO[0]).style.display == 'none' && IM_LOAD == 1 && IM_INFO[3] != "You"){
document.getElementById("IM_NEW_"+IM_INFO[0]).style.display = 'block';
}
}
}
}
setTimeout("UPDATE_SYSTEM()",1000);
IM_LOAD = 1;
}
}
}
UPDATE_SYSTEM_REQUEST.open("GET","functions.php?CALL=UPDATE_SYSTEM&SECURITY="+SECURITY+"&LOAD="+IM_LOAD+"&PAGE_ID="+PAGE_ID,true);
UPDATE_SYSTEM_REQUEST.send(null);
}
My chat program has the problem of once in a RARE occurrence, it tends to display the message twice. The message only shows up once in the database, but like I said it RARELY shows up on the client side twice...
I use AJAX/PHP/MySQL to run the chat...
SELECT *
FROM `ims`
WHERE `to` = '$ACCOUNT_ID'
&& `sent_time` >= '$IM_SYSTEM_CHECK'
&& `sent_time` < '$CURRENT_TIME'
|| `from` = '$ACCOUNT_ID'
&& `sent_time` >= '$IM_SYSTEM_CHECK'
&& `sent_time` < '$CURRENT_TIME'
ORDER BY `sent_time` ASC
How it works is, it loads any messages that are greater than or equal to the last message check ($IM_SYSTEM_CHECK), but they have to be less than the current time, which becomes the ($IM_SYSTEM_CHECK) after the call. I don't see how this problem exist.
Yeah, here is more of the code...
function UPDATE_SYSTEM(){
UPDATE_SYSTEM_REQUEST = new XMLHttpRequest();
UPDATE_SYSTEM_REQUEST.onreadystatechange = function(){
if(UPDATE_SYSTEM_REQUEST.readyState == 4){
if(UPDATE_SYSTEM_REQUEST.responseText == "BAD_KEY"){
window.location = 'index.php';
}else{
SYSTEM_FULL = UPDATE_SYSTEM_REQUEST.responseText;
if(SYSTEM_FULL != ""){
SYSTEM_IM = SYSTEM_FULL.split("¥");
for(IM_ROW in SYSTEM_IM){
IM_INFO = SYSTEM_IM[IM_ROW].split("€");
REMOVE_COOKIE("CLOSED_LIST",IM_INFO[0]);
if(IM_INFO[0] != undefined){
if(IM_TABS[IM_INFO[0]] == undefined){
IM_TABS[IM_INFO[0]] = 0;
}
if(IM_TABS[IM_INFO[0]] == 0){
IM_TABS[IM_INFO[0]] = 1;
IM_BAR++;
if(document.getElementById("IM_BAR_BOX").style.display == "none"){
document.getElementById("IM_BAR_BOX").style.display = "block";
}
if(CURRENT_IM == 0 && IM_LOAD == 1){
im_display = "block";
CHANGE_CURRENT(IM_INFO[0]);
}else{
im_display = "none";
}
NIMD = document.createElement("div");
NIMD.id = "IM_"+IM_INFO[0];
NIMD.style.position = 'relative';
NIMD.style.cssFloat = 'left';
NIMD.style.margin = '3px 0px 0px 3px';
NIMD.style.width = '24px';
NIMD.style.height = '24px';
if(IM_INFO[1] == "graphics/mini_no_picture.png"){
IM_PICTURE = "graphics/im_bar_no_picture.png";
}else{
IM_PICTURE = IM_INFO[1];
}
NIMD.innerHTML = '<div id="IM_INNER_'+IM_INFO[0]+'" style="display: '+im_display+'; position: absolute; top: -360px; left: -11px; width: 230px; height: 353px; background-image: url(\'graphics/im_box.png\');"><img style="position: absolute; top: 4px; left: 4px;" src="'+IM_INFO[1]+'"><div style="position: absolute; top: 2px; left: 47px; font-size: 13px; font-weight: bold; color: #FFFFFF;">'+IM_INFO[2]+'</div><img style="position: absolute; top: 4px; left: 202px; cursor: pointer;" src="graphics/minimize.png" onClick="document.getElementById(\'IM_INNER_'+IM_INFO[0]+'\').style.display=\'none\'; CHANGE_CURRENT(0);"><img style="position: absolute; top: 4px; left: 217px; cursor: pointer;" src="graphics/close.png" onClick="CLEAR_IM('+IM_INFO[0]+'); document.getElementById(\'IM_BAR_BOX\').removeChild(document.getElementById(\'IM_'+IM_INFO[0]+'\')); IM_TABS['+IM_INFO[0]+'] = 0; CHANGE_CURRENT(0); IM_BAR--; if(IM_BAR == 0){ document.getElementById(\'IM_BAR_BOX\').style.display = \'none\'; }"><img style="position: absolute; top: 326px; left: 212px; cursor: pointer;" src="graphics/im_send.png" onClick="IM_SEND('+IM_INFO[0]+',document.getElementById(\'IM_MESSAGE_'+IM_INFO[0]+'\').value);"><div id="IM_CONTENT_'+IM_INFO[0]+'" style="position: absolute; top: 48px; left: 4px; overflow-x: hidden; overflow-y: scroll; width: 218px; height: 270px; padding-bottom: 1px; padding-left: 3px; padding-top: 1px; word-wrap: break-word;"></div><input id="IM_MESSAGE_'+IM_INFO[0]+'" type="text" onkeyup="if(event.keyCode == 13 || event.which == 13){ IM_SEND('+IM_INFO[0]+',document.getElementById(\'IM_MESSAGE_'+IM_INFO[0]+'\').value); }" style="position: absolute; top: 325px; left: 5px; border: none; width: 202px; height: 16px; font-weight: bold; background-color: transparent; font-family: Arial; font-size: 14px; color: #000000;"></div><img style="cursor: pointer; width: 24px; height: 24px;" src="'+IM_PICTURE+'" onClick="if(document.getElementById(\'IM_INNER_'+IM_INFO[0]+'\').style.display == \'block\'){ document.getElementById(\'IM_INNER_'+IM_INFO[0]+'\').style.display=\'none\'; CHANGE_CURRENT(0); }else{ document.getElementById(\'IM_INNER_'+IM_INFO[0]+'\').style.display=\'block\'; document.getElementById(\'IM_MESSAGE_'+IM_INFO[0]+'\').focus(); document.getElementById(\'IM_CONTENT_'+IM_INFO[0]+'\').scrollTop = document.getElementById(\'IM_CONTENT_'+IM_INFO[0]+'\').scrollHeight; if(CURRENT_IM != 0){ document.getElementById(\'IM_INNER_\'+CURRENT_IM).style.display=\'none\'; } CHANGE_CURRENT('+IM_INFO[0]+'); }" title="'+IM_INFO[2]+'"><img id="IM_NEW_'+IM_INFO[0]+'" onClick="if(CURRENT_IM != 0){ document.getElementById(\'IM_INNER_\'+CURRENT_IM).style.display=\'none\'; } document.getElementById(\'IM_INNER_'+IM_INFO[0]+'\').style.display=\'block\'; document.getElementById(\'IM_MESSAGE_'+IM_INFO[0]+'\').focus(); document.getElementById(\'IM_CONTENT_'+IM_INFO[0]+'\').scrollTop = document.getElementById(\'IM_CONTENT_'+IM_INFO[0]+'\').scrollHeight; this.style.display = \'none\'; CHANGE_CURRENT('+IM_INFO[0]+');" title="'+IM_INFO[2]+'" style="display: none; position: absolute; top: 0px; left: 0px; z-index: 2; cursor: pointer;" src="graphics/new_message.png">';
document.getElementById("IM_BAR_BOX").appendChild(NIMD);
IM_TABS[IM_INFO[0]] = 1;
if(im_display == "block"){
document.getElementById("IM_MESSAGE_"+IM_INFO[0]).focus();
}
}
if(document.getElementById("IM_CONTENT_"+IM_INFO[0]).innerHTML == ""){
NIMM = document.createElement("div");
NIMM.innerHTML = '<div style="font-size: 12px; color: #FC7012; float: left; width: 138px; margin-bottom: -2px;">'+IM_INFO[3]+'</div><div style="font-size: 12px; color: #FC7012; float: left; width: 60px; text-align: right; margin-bottom: -2px;">'+IM_INFO[4]+'</div><div style="clear: left; font-size: 12px; color: #000000;">'+IM_INFO[5]+'</div>';
document.getElementById("IM_CONTENT_"+IM_INFO[0]).appendChild(NIMM);
}else{
ims = new Image();
ims.src = 'graphics/im_split.png';
ims.style.display = 'block';
ims.style.margin = '1px 0px 1px -3px';
ims.style.position = 'relative';
document.getElementById("IM_CONTENT_"+IM_INFO[0]).appendChild(ims);
NIMM = document.createElement("div");
NIMM.innerHTML = '<div style="font-size: 12px; color: #FC7012; float: left; width: 138px; margin-bottom: -2px;">'+IM_INFO[3]+'</div><div style="font-size: 12px; color: #FC7012; float: left; width: 60px; text-align: right; margin-bottom: -2px;">'+IM_INFO[4]+'</div><div style="clear: left; font-size: 12px; color: #000000;">'+IM_INFO[5]+'</div>';
document.getElementById("IM_CONTENT_"+IM_INFO[0]).appendChild(NIMM);
}
document.getElementById("IM_CONTENT_"+IM_INFO[0]).scrollTop = document.getElementById("IM_CONTENT_"+IM_INFO[0]).scrollHeight;
if(document.getElementById("IM_INNER_"+IM_INFO[0]).style.display == 'none' && IM_LOAD == 1 && IM_INFO[3] != "You"){
document.getElementById("IM_NEW_"+IM_INFO[0]).style.display = 'block';
}
}
}
}
setTimeout("UPDATE_SYSTEM()",1000);
IM_LOAD = 1;
}
}
}
UPDATE_SYSTEM_REQUEST.open("GET","functions.php?CALL=UPDATE_SYSTEM&SECURITY="+SECURITY+"&LOAD="+IM_LOAD+"&PAGE_ID="+PAGE_ID,true);
UPDATE_SYSTEM_REQUEST.send(null);
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
发送带有查询的last_update_id(保存发送到客户端的最后一条消息ID)(以-1开头)。 响应一起发回。
并将其与可防止重复的
send a last_update_id (holding the last message id sent to the client) with your query (start with -1). and send it back with the response
that will prevent doubles.