より効率的なjavascriptユーザーベースのチャットの作成

Question

私はすぐに寝るつもりですので、午前中はいないでしょうが、私の問題を解決する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のチャットのようなものです。私は可能な解決策について全く考えておらず、研究を行っていますが、私は仕事に就くことができるものは見つけられませんでした。私が次に何をすべきかについての助けや洞察は高く評価されます。

Answer 1

あなたが探しているのは、彗星とも呼ばれるajax long pullingです（これは馬鹿なことです）。基本的な考え方は簡単です。サーバーをポーリングする代わりに、新しいメッセージを取得するまで、ブロックブロックを送信します。

ここで「ブロックする」とは単に応答を送信しないことを意味します。 PHPで何をするのですか？私はこれまでにnode.jsを使用したことがあります）、クライアントに応答を返す前に何か変わるまで待ってください。

クライアントに応答があると、すぐに別の要求が送信されます。

もう1つのトリックがあります。リクエストがタイムアウトする可能性があります。つまり、何も更新されていなくても、一定時間後に応答を返す必要があります。

この方法は、古いブラウザをサポートする必要がある場合に適しています。それらを無視して新しいものに固執することができれば、 "ウェブソケット"を使うことができます。

Webソケットを使用したり、Cometでフォールバックするためのライブラリがあります。私は最も普及しているのはsocket.ioだと思います。

偶然、PHPに縛られていない場合は、別のサーバーを使用することをお勧めします。 node.jsはすばらしいオプションです。この種の問題には当然適しており、既に知っているJavaScriptでサーバー側コードを記述することができます。 PHPの要塞であるFacebookでさえ、チャットバックエンドに異なる言語（Erlang）を使用していました。

要約すると、socket.ioを使用します。可能であれば、別のバックエンドを使用してみてください。ただし、PHPも問題ありません。

Answer 2

あなたは単に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ライブラリ全体を含めるだけでは不十分です。右？