发送新消息时更新页面

时间:2018-08-29 00:14:21

标签: php

这与松弛类似。如果用户正在输入,我需要页面动态更新。

我有index.phpmessages.htmlnewmessage.php

聊天页面(index.php)如下:

<h1>Chat</h1>
<?php
echo file_get_contents("./messages.html") ;
?>
<br>
<form action="newmessage.php" method="post">
<input type="text" placeholder= "Compose a new message..." name="message" required>
<input type="submit"><br>

newmessage.php中的php如下所示:

<?php
$message = $_POST["message"];
$timestamp =date('l jS \of F Y h:i:s A');
$text = "<hr>{$message} <br> from: {$_SERVER['PHP_AUTH_USER']} at: {$timestamp} <br><br> \n";
$file = fopen("./messages.html","a+ \n");
 fwrite($file, $text);
 fclose($file);
?>
<meta http-equiv="refresh" content="0.5;URL='/chat/index.php'"/>
<p>Sending Message...</p>

因此消息显示给发送消息的用户,而不显示给聊天中的其他人。万一其他用户正在键入内容,并且我尝试仅进行<?php echo file_get_contents("./messages.html") ; ?>刷新或使用AJAX或事件侦听器,则不能使用元刷新。一旦有新消息发布到messages.html,我就需要动态更新这些内容。

任何指针将不胜感激。预先感谢。

update because answer edit was rejected

function reloadData()
{
   var now = new Date();
   url = 'liveData?' + now.getTime();

   try {
      req = new XMLHttpRequest();
   } catch (e) {
      try {
         req = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (oc) {
            alert("No AJAX Support");
            return;
         }
      }
   }

   req.onreadystatechange = processReqChange;
   req.open("GET", url, true);
   req.send(null);
}

function processReqChange()
{
   // If req shows "complete"
   if (req.readyState == 4)
   {
      dataDiv = document.getElementById('currentData');

      // If "OK"
      if (req.status == 200)
      {
         // Set current data text
         dataDiv.innerHTML = req.responseText;

         // Start new timer (1 min)
         timeoutID = setTimeout('reloadData()', 60000);
      }
      else
      {
         // Flag error
         dataDiv.innerHTML = '<p>There was a problem retrieving data: ' + req.statusText + '</p>';
      }
   }
}

1 个答案:

答案 0 :(得分:1)

获得动态更新的最佳方法是AJAX,因为您并不是一直都希望真正刷新。您说过,您尝试过AJAX吗?这种方法看起来如何?

我的提示是对Web体系结构有一个基本的了解。尝试了解找到的JS代码以及AJAX的工作方式。您以前使用过JS吗?如果没有,请学习基础知识。

将url变量更改为您在服务器上用于返回数据的url。是的,您将需要它。比看看回调函数(processReqChange())。

我不仅会给您提示,但在您的早期阶段,最好是由经验丰富的开发人员独自做一些提示。