XMLHttpRequest PHP Chats

Question

>我正在尝试创建一个系统，以在同一页面上显示 2 个或多个单独聊天(数据库中存储不同的消息(上的消息。每个聊天都有 ID 来区分它们，我创建了一个函数来浏览每个正在使用的聊天并为它们打印适当的消息，但只有 1 个聊天获取消息。 守则： 该目录

<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类隔开。消息对于数据库中每个聊天存储唯一的聊天索引具有不同的 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();
}
}
}
}

接收MSGS.php 只选择消息表中的所有消息，其中包含 item_id 给出的索引索引。问题如前所述，只有具有 9503e253936e716f18d9c57b4f97d618 id 的聊天才会收到消息。

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

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

Answer 1

问题在于你如何使用XMLHttpRequest。

请参阅此代码片段：

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上迭代两次(你有两个嵌套循环(。