XMLHttpRequest PHP 聊天答案

【问题标题】：XMLHttpRequest PHP ChatsXMLHttpRequest PHP 聊天
【发布时间】：2017-08-27 14:00:39
【问题描述】：

我正在尝试创建一个系统来在同一页面上显示 2 个或多个单独的聊天（不同的消息存储在数据库中）上的消息。每个聊天都有 id 来区分它们，我创建了一个函数来检查每个正在使用的聊天并为它们打印适当的消息，但只有 1 个聊天得到消息。编码： HTML

<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>

所以有 2 个由 full_wrap 类分隔的聊天。 msgs 有不同的 id 用于在 db 中为每个聊天存储唯一的聊天索引

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 只选择messages 表中的所有消息，索引由item_id 给出。问题如前所述，只有 9503e253936e716f18d9c57b4f97d618 id 的聊天才能收到消息。

我听说请求重复了 4 次，但我不是该领域的专家。通过使用控制台，我了解到它会忽略第一次聊天，只生成 9503e253936e716f18d9c57b4f97d618 的消息。

任何帮助将不胜感激。此外，如果有更好的方法来控制同一页面上的多个聊天，我很想知道如何。感谢您的宝贵时间。

【问题讨论】：

标签： javascript php jquery json ajax

【解决方案1】：

问题在于您如何使用 XMLHttpRequest。

看到这个sn-p：

function Obj() {
}

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


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

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

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

		obj.callFunc();
	}
}

test();

如您所见，代码向控制台打印了两次“id2”。这和你的问题很相似。

发生的情况是，在obj.func（在您的代码中，即xmlhttp.onreadystatechange）中，id 变量（分别为item_id）来自外部函数。分配obj.func 时的值未“保存”。当函数最终被执行时，它将使用该变量的最后一个已知值。

这就是发生的事情：

i = 0
id = ids[0] = 'id1'
创建了一个新的 Obj（我们称之为obj1）并分配给obj
obj1.func 已创建
obj1.callFunc 被调用，它对 obj1.func 进行编程以便稍后调用
i = 1
id = ids[1] = 'id2'
创建了一个新的 Obj（我们称之为obj2）并分配给obj
obj2.func 已创建
obj2.callFunc 被调用，它对 obj2.func 进行编程以便稍后调用
obj1.func 被调用，它打印id 的最后一个值，即“id2”
obj2.func 被调用，它打印id 的最后一个值，即“id2”

有几种方法可以解决这种行为。您可以以某种方式从 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();

顺便说一句，我不明白你为什么要在 cusid_ele 上迭代两次（你有两个嵌套循环）。

【讨论】：

OMGGGG 它工作正常。太感谢了。是的，应该只有一个循环是一种小类型。不过还是谢谢你。