AJAX PHP MySQL 聊天

Posted

技术标签:

【中文标题】AJAX PHP MySQL 聊天【英文标题】:AJAX PHP MySQL Chat 【发布时间】:2011-07-12 09:18:17 【问题描述】:

我的聊天程序有一个罕见的问题,它往往会显示两次消息。该消息仅在数据库中显示一次,但就像我说的那样,它很少在客户端显示两次...

我使用 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);
  

【问题讨论】:

我们可能需要的不仅仅是查询来帮助您诊断问题。您能否提供有关 AJAX 调用和周围 PHP 脚本的更多信息? 另外,您可能不应该使用&amp;&amp;|| 来表示ANDOR -- || 在非 MySQL 的数据库中还有其他含义,您可能会发现最终你自己站在了错误的一边。 感谢查尔斯的提示,我是否使用 AND 和 OR 作为替代? 我注意到您的所有问题都是关于基础开发的。许多隐藏在繁琐代码中的问题可以通过像jquery这样的包装器来解决。 如果 php 代码不允许同一条消息被请求两次,那它怎么能像每几百条消息一样显示两次呢? 【参考方案1】:

发送一个 last_update_id(保存发送给客户端的最后一条消息 id)与您的查询(从 -1 开始)。并将其与响应一起发回

这将防止双打。

【讨论】:

谢谢。将其与时间系统一起使用将确保没有双打。 我也不认为SYSTEM_IM = SYSTEM_FULL.split("¥");, IM_INFO = SYSTEM_IM[IM_ROW].split("€"); 是个好主意,但我不确定你在做什么,所以只是盲目猜测

以上是关于AJAX PHP MySQL 聊天的主要内容,如果未能解决你的问题,请参考以下文章

对 php 聊天应用程序过多的 mysql (ajax) 请求有啥负面影响?

ajax-PHP-MySQL 是聊天室应用的好组合吗?

Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

仅使用 jQuery (Ajax) 和 PHP 从 MySQL 获取最新消息? (在线聊天APP)

ajax+jquery+php+mysql实现简单的网页聊天室(带表情)

用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面