XMLHttpRequest PHPチャット

私は同じページに2つ以上の別々のチャット（異なるメッセージをデータベースに保存した状態）でメッセージを表示するシステムを作成しようとしています。チャットにはそれぞれ区別するためのidsがあり、使用中の各チャットを通過してappropriteメッセージを出力する機能を作成しましたが、1つのチャットしかメッセージを取得しません。コード： HTMLXMLHttpRequest PHPチャット

<div class="full_wrap"> 
    <div class="force-overflow"></div> 
    <div id="Sidenav" class="side"> 

     <h2>Chat Settings & Info</h2> 

     <a id="closebtn" href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 

     <div class="authr"> 

     <a> 
      <div class="authr_img"></div> 
     </a> 

     <form action="mypage.php" method="post"> 
      <div class="authr_name"> 
       <button value="<?php echo $chat_authr ?>" name="userlink" class="subm_as_text"><?php echo $chat_authr; ?></button> 
      </div> 
     </form> 
     </div> 

     <div class="chat_info"> 

     <div class="chat_descy"> 

      <h2>Chat Description</h2> 
      <div class="descc"> 
       <h3><?php echo $chat_description; ?></h3> 
      </div> 
     </div> 

     <div class="chat_fol"><h2>Chat users: <?php echo $num_users; ?></h2></div> 

     <div class="chat_back"> 
      <h2> Change Chat Wallpaper</h2> 

      <form method="post" action="picture.php" enctype="multipart/form-data"> 
       <input type="file" id="upload" class="custom-file-input" name="chat_wall"> 
       <input type="submit" class="chat_wall_subm" value="Change"/> 
      </form> 
     </div> 
     </div> 

     <form method="post" action="chat.php" > 
     <!--<input type="submit" class="chat_leave" name="" value="Leave Chat">--> 

     <button class="chat_leave" name="chat_leave" value="<?php echo $chat_index; ?>" >Leave Chat</button> 
     </form> 
    </div> 


    <div class="mnav"> 
     <span onclick="openNav()">&#9776;</span> 
     <i class="material-icons" id="chat_un_small" onclick="chat_un_small()">arrow_upward</i> 
     <h1><?php echo $chat_title ?></h1> 

    </div> 


    <!--one ting--> 
    <div class="conceal_wrapper"> 
     <div class="msgs" id="5e2dbe2be3b5927c588509edb1c46f7d"> 
     </div> 

     <form method="post" id="form_5e2dbe2be3b5927c588509edb1c46f7d" class="comform"> 
     <div class="wcom" > 
      <input maxlength="140" type = "text" id="5e2dbe2be3b5927c588509edb1c46f7d" class="comin" placeholder="My message..." name="sendmsg" autocapitalize="off" autocorrect="off"/> 
      <input class="hidden_index" type="text" value="5e2dbe2be3b5927c588509edb1c46f7d" name="chat_index"/> 
     </div> 
     </form> 
    </div> 

    <div class="chat_enlarge"> 
     <div class="chat_enlarge_full" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_full()"></div> 
     <div class="chat_enlarge_standard" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_standard()"></div> 
     <div class="chat_enlarge_small" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_small()"></div> 
    </div> 

</div> 



<div class="full_wrap"> 
    <div class="force-overflow"></div> 
    <div id="Sidenav" class="side"> 

     <h2>Chat Settings & Info</h2> 

     <a id="closebtn" href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 

     <div class="authr"> 

     <a> 
      <div class="authr_img"></div> 
     </a> 

     <form action="mypage.php" method="post"> 
      <div class="authr_name"> 
       <button value="<?php echo $chat_authr ?>" name="userlink" class="subm_as_text"><?php echo $chat_authr; ?></button> 
      </div> 
     </form> 

     </div> 


     <div class="chat_info"> 
     <div class="chat_descy"> 
      <h2>Chat Description</h2> 
      <div class="descc"> 
       <h3><?php echo $chat_description; ?></h3> 
      </div> 
     </div> 

     <div class="chat_fol"><h2>Chat users: <?php echo $num_users; ?></h2></div> 

     <div class="chat_back"> 
      <h2> Change Chat Wallpaper</h2> 

      <form method="post" action="picture.php" enctype="multipart/form-data"> 
       <input type="file" id="upload" class="custom-file-input" name="chat_wall"> 
       <input type="submit" class="chat_wall_subm" value="Change"/> 
      </form> 
     </div> 

     </div> 

     <form method="post" action="chat.php" > 
     <!--<input type="submit" class="chat_leave" name="" value="Leave Chat">--> 

     <button class="chat_leave" name="chat_leave" value="<?php echo $chat_index; ?>" >Leave Chat</button> 
     </form> 
    </div> 


    <div class="mnav"> 
     <span onclick="openNav()">&#9776;</span> 
     <i class="material-icons" id="chat_un_small" onclick="chat_un_small()">arrow_upward</i> 
     <h1><?php echo $chat_title ?></h1> 

    </div> 


    <!--one ting--> 
    <div class="conceal_wrapper"> 
     <div class="msgs" id="9503e253936e716f18d9c57b4f97d618"> 


     </div> 



     <form method="post" id="form_9503e253936e716f18d9c57b4f97d618" class="comform"> 
     <div class="wcom" > 
      <input maxlength="140" type = "text" id="9503e253936e716f18d9c57b4f97d618" class="comin" placeholder="My message..." name="sendmsg" autocapitalize="off" autocorrect="off"/> 
      <input class="hidden_index" type="text" value="9503e253936e716f18d9c57b4f97d618" name="chat_index"/> 
     </div> 
     </form> 
    </div> 

    <div class="chat_enlarge"> 
     <div class="chat_enlarge_full" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_full()"></div> 
     <div class="chat_enlarge_standard" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_standard()"></div> 
     <div class="chat_enlarge_small" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_small()"></div> 
    </div> 

</div>

のでfull_wrapクラスで区切られた2人のチャットがあります。 MSGのは、チャットのインデックスごとに異なるIDがデシベル

JavaScriptで各チャットのためのユニークな保存されている：

$(document).ready(function() { 
    chat_receivemsgs(); 
}); 


function chat_receivemsgs(){ 
    var cusid_ele = document.getElementsByClassName('msgs'); 
    if(cusid_ele.length == 0) { 
    console.log("hi"); 
    } else { 
    for (var i = 0; i < cusid_ele.length; ++i) { 
     var item = cusid_ele[i]; 
     var item_id = item.id; 
     console.log(cusid_ele.length); 

     for (var i = 0; i < cusid_ele.length; ++i) { 
     var item = cusid_ele[i]; 
     var item_id = item.id; 
     console.log(item_id); 

     var xmlhttp = new XMLHttpRequest(); 

     xmlhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
      console.log("yes"); 
      console.log(item_id); 
      // document.getElementById(item_id).innerHTML = this.responseText; 
      $("#"+item_id).html(this.responseText); 
      }else{ 
      console.log("no"); 
      console.log(item_id); 
      } 
     } 
     xmlhttp.open("GET","receivemsg.php?q="+item_id,true); 
     xmlhttp.send(); 
     } 
    } 
    } 
}

receivemsgs.phpだけで指定されたインデックスのインデックスを持つメッセージテーブル内のすべてのメッセージを選択し、 item_id。問題は、9503e253936e716f18d9c57b4f97d618 IDを持つチャットだけがメッセージを受信すると述べています。

リクエストが4回繰り返されると聞きましたが、私はこの分野の専門家ではありません。コンソールを使って、私は最初のチャットを無視し、9503e253936e716f18d9c57b4f97d618のメッセージのみを生成することを理解しました。

助けていただければ幸いです。また、同じページで複数のチャットを制御するより良い方法がある場合、私はどのように知ることが大好きです。ありがとうございます。

出典

2017-08-27 Kraze

問題はXMLHttpRequestをどのように使用しているかにあります。

function Obj() { 
 
} 
 

 
Obj.prototype = { 
 
\t callFunc: function() { 
 
\t \t setTimeout(this.func, 1000); 
 
\t } 
 
}; 
 

 

 
function test() { 
 
\t var ids = ['id1', 'id2']; 
 

 
\t for (var i = 0 ; i < 2 ; ++i) { 
 
\t \t var id = ids[i]; 
 
\t \t var obj = new Obj(); 
 

 
\t \t obj.func = function() { 
 
\t \t \t console.log(id); 
 
\t \t }; 
 

 
\t \t obj.callFunc(); 
 
\t } 
 
} 
 

 
test();

あなたが見ることができるように、コードが印刷さ "ID2" が2回コンソールへ：

はこのスニペットを参照してください。それはあなたの問題に似ています。何が起こる

はobj.funcで、（あなたのコードでは、それはxmlhttp.onreadystatechangeです）id変数（それぞれitem_id）外側の関数から来ている、ということです。 obj.funcが割り当てられたときのその値は「保存」されません。関数が最終的に実行されると、その変数の最後の既知の値が使用されます。だからここ

は何が起こるかです：i = 0

id = ids[0] = 'id1'

新しいOBJの

は（のはobj1それを呼びましょう）を作成し、呼ばれ
obj1.callFunc

obj

obj1.funcに割り当てられています、後で呼び出すobj1.funcをプログラムします id = ids[1] = 'id2'
新しいOBJの210
i = 1

obj2.func

obj1.func後に呼ばれるように、（のはそれobj2を呼びましょう）を作成し、呼ばれ
obj2.callFunc

obj

obj2.funcに割り当てられています呼び出されると、最後の値id、つまり "id2"を出力します。
obj2.funcはそれはその行動の周りのいくつかの方法があります

「ID2」である、それはidの最後の値を出力し、呼び出されます。 PHPの出力から何らかの形でitem_idを取得することができます。 item_idをxmlhttpのメンバーに設定し、それをあなたの関数で使用することができます（xmlhttp.item_id = item_id;、次に関数this.item_id内）。またはbindを使用することもできます。後者の溶液では、あなたのコードは次のようになります。

ところで

xmlhttp.onreadystatechange = function(this_item_id) { 
    if (this.readyState == 4 && this.status == 200) { 
    console.log("yes"); 
    console.log(this_item_id); 
    // document.getElementById(this_item_id).innerHTML = this.responseText; 
    $("#"+this_item_id).html(this.responseText); 
    }else{ 
    console.log("no"); 
    console.log(this_item_id); 
    } 
}.bind(xmlhttp, item_id); 

xmlhttp.open("GET","receivemsg.php?q="+item_id,true); 
xmlhttp.send();

、私は（あなたがネストされた2つのループを持っている）あなたはcusid_eleに二回反復している理由を理解していません。

出典

2017-08-27 14:47:43 Pikrass

OMGGGG IT WORKS。どうもありがとうございます。ええ、小さなタイプのループが1つしかないはずです。しかし、まだありがとう。 – Kraze

答えて

関連する問題