构建更有效的基于用户的javascript聊天

时间:2012-01-14 07:55:32

标签: php javascript jquery

我很快就要睡觉了,所以直到早上才开始,但我一直在努力寻找能解决我问题的javascript / jquery方法。我正在尝试制作一个聊天框功能,一旦帖子提交,它就会被回复,两端的用户都可以看到它。我知道我需要使用javascript和jquery。现在我正在使用效率很低的系统:

<script language='javascript' type='text/javascript'>
    setInterval( function() {
    $('#responsechat').load('echogetconversation.php?username=<?php echo   $username; ?>&otherchatuser=<?php echo $otherchatuser; ?>');
    }, 100);
    </script>

我使用它的唯一原因是因为这是我知道如何向两个用户投射新帖子的唯一方式。我想知道是否有人知道如何做到这一点。一旦帖子被提交,它就会变成一个div,两个用户都可以看到它,而不仅仅是提交它的用户,所以它就像是在某种程度上的Facebook聊天。我不知道任何可能的解决方案,并已做过研究,但我找不到任何可以开始工作的方法。任何帮助和/或对我接下来应该做什么的见解都将不胜感激。

2 个答案:

答案 0 :(得分:4)

你正在寻找的是ajax长拉,也称为Comet(这是一个愚蠢的双关语)。基本思路很简单 - 不是轮询服务器,而是发送ajax请求和服务器阻止,直到收到新消息。

此处的“阻止”仅表示它不发送响应。你得到了你的请求,然后首先提出一个线程(你会用PHP做什么?我只使用了node.js)并等待一些事情发生变化,然后再将响应发送回客户端。

客户端收到回复后,会立即发送另一个请求。

另外还有一个技巧:请求可能会超时。这意味着即使没有更新,服务器也应该在一定时间后发回响应。

如果您必须支持旧浏览器,这种方法很有用;如果你可以忽略它们并坚持使用它们,你可以使用“websockets”。

有些库可以帮助您使用websockets或者使用Comet。我认为最受欢迎的是socket.io

巧合的是,如果你不依赖于PHP,我真的建议使用不同的服务器。 node.js是一个很好的选择 - 它很适合这类问题,你可以用JavaScript编写服务器端代码,你已经知道了。甚至Facebook-- PHP的堡垒 - 使用不同的语言(Erlang)进行聊天后端。

所以,总结一下:使用socket.io。如果可以的话,尝试使用不同的后端,虽然PHP也可以。

答案 1 :(得分:1)

如果您不想使用其他语言,您只需通过AJAX进行操作即可。

只需设置一个间隔并更新PHP生成的div的html ..当你发送消息时,回复将是更新的div -html,这样你和用户都可以确保他们的消息成功发布..我有自己的聊天系统代码片段:看:

function updMsg() {

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
    var objDiv = document.getElementById('chatwid');
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("chatwid").innerHTML=xmlhttp.responseText;}
  }
xmlhttp.open("GET","Msg.php?pg=1",true);
xmlhttp.send();
}

function sendMsg()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
msg=document.getElementById('msgfrm').value;
sender='<?php echo $name;?>';
xmlhttp.open("GET","Msg.php?msg="+msg+"&sender="+sender+"<?php if(isset($_GET['a']) && $_GET['a'] = 1) { echo "&a=1"; } ?>" ,true);
xmlhttp.send();
document.getElementById('msgfrm').value="";
xmlhttp.onreadystatechange=function()
  {
    var objDiv = document.getElementById('chatwid');
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("chatwid").innerHTML=xmlhttp.responseText;}
  }
}
function interval() {
updMsg();
t=setTimeout(interval(),500);}
interval();

这段代码实际上只是PHP和Javascript。仅仅为了使用AJAX功能而包含整个jQuery库是不够的。正确?