Fatal编程技术网
  • php/
  • Php 创建一个基于AJAX的聊天系统。如何避免在提交内容上刷新页面并实时显示新消息

Php 创建一个基于AJAX的聊天系统。如何避免在提交内容上刷新页面并实时显示新消息

php

Php 创建一个基于AJAX的聊天系统。如何避免在提交内容上刷新页面并实时显示新消息,php,chat,refresh,Php,Chat,Refresh,我正在尝试在PhP上创建一个简单的聊天系统。 我的想法其实很简单，我有一个表单，可以用PHP向脚本发送文本，脚本将var保存在数据库中，然后其他用户刷新页面下载新消息并将其显示在聊天框中。 当我说刷新页面时，问题来了。 我只是认为，对于用户来说，每隔一秒或更短的时间刷新整个页面可能是个问题。感谢JavaScript函数。 最初的想法是使用setInterval（），但我认为这可能是个坏主意。 我不确定，但从chrome上看，当你刷新表单时，它会保存表单并自动填充，一旦你完成刷新，每个浏览器都会这

我正在尝试在PhP上创建一个简单的聊天系统。
我的想法其实很简单，我有一个表单，可以用PHP向脚本发送文本，脚本将var保存在数据库中，然后其他用户刷新页面下载新消息并将其显示在聊天框中。
当我说刷新页面时，问题来了。
我只是认为，对于用户来说，每隔一秒或更短的时间刷新整个页面可能是个问题。感谢JavaScript函数。
最初的想法是使用
setInterval（）
，但我认为这可能是个坏主意。
我不确定，但从chrome上看，当你刷新表单时，它会保存表单并自动填充，一旦你完成刷新，每个浏览器都会这样做吗？
对于连接速度非常慢的用户来说，刷新页面的JavaScript函数会有问题吗？

但最重要的是，要解决这个问题，实际上可以只刷新一个特定的PHP脚本，允许用户只刷新该脚本并下载新消息，而不需要每秒刷新整个页面 所有的帮助都将不胜感激

-注-

老实说，要我做那个聊天系统的家伙要求我不要使用JavaScript，所以理论上我甚至不允许使用
setInterval（）

使用名为load（）的jQuery函数。张贴一个基本的HTML标记你的聊天页面，我会编辑一个具体的答案

$("#messageboard").load("chat.php #messageboard > *");
将此代码放在提交聊天后的ajax请求中保存。将#MessageBoard更改为需要刷新的留言板div的ID。更改聊天显示页面的chat.php。为了节省加载时间，您可以将GET vars传递到聊天页面，防止页面被完全加载，并只返回消息

您还可以使用setTimeout功能，但这两个功能都需要在页面上运行，以便提交消息的用户立即看到刷新（无延迟）

在上面的例子中，1000以毫秒为单位，因此等于1秒

使用setTimeout的优点是，如果连接挂起一段时间，您将不会收到大量挂起的请求，因为只有在前一个请求完成后才会发送新的请求

我假设您正在使用ajax提交用户消息，这样页面就不会在用户每次发布内容时刷新。需要一个例子吗

<html>
<head>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<script>
    $('document').ready(function(){
        $('#submit').click(function(){
            var message = $('#message').val();
            $('#message').reset();
            $.post('chat.php',{message: message},function(response){
                $("#messageboard").load("chat.php #messageboard > *");
            });
        })
        $('#message').keypress(function(e){
            if(e.which == 13){//Enter key pressed
                var message = $('#message').val();
                $('#message').reset();
                $.post('chat.php',{message: message},function(response){
                    $("#messageboard").load("chat.php #messageboard > *");
                });
            }
        });

        function startTimer() {
          $("#messageboard").load("chat.php #messageboard > *", function(){
              //repeats itself after 1 seconds
              setTimeout(startTimer, 1000);
          });
        }

        startTimer();
    });
</script>
</head>
<body>
<div id="messageboard"></div>
<input type="text" placeholder="Message" id="message"><input value="submit" type="button" id="submit">
</body>
</html>


$（'document'）.ready（函数（）{
$（“#提交”）。单击（函数（）{
var message=$（'#message'）.val（）；
$（'#message'）.reset（）；
$.post（'chat.php'，{message:message}，函数（响应）{
$（“#留言板”）.load（“chat.php#留言板>*”；
});
})
$（“#消息”）。按键（功能（e）{
如果（e.which==13）{//按下回车键
var message=$（'#message'）.val（）；
$（'#message'）.reset（）；
$.post（'chat.php'，{message:message}，函数（响应）{
$（“#留言板”）.load（“chat.php#留言板>*”；
});
}
});
函数startTimer（）{
$（“#留言板”）.load（“chat.php#留言板>*”，函数（）{
//1秒后重复
setTimeout（startTimer，1000）；
});
}
startTimer（）；
});
上述操作将触发submit按钮上的POST，但如果用户点击enter，也会触发POST。脚本将自动刷新，但在提交新输入时也会刷新。这只是一个概念。确保创建服务器端处理程序以将消息保存到数据库。

如果只想使用服务器端的php，可以使用php缓存来避免刷新页面，并在服务器上的文件中处理消息。 例如，您可以在while循环中检查一些文件内容，然后显示并擦除它直到超时。提交表单可以使用php将数据写入文件。如果需要，您可以创建XML，但这里有一种原始方法： 在浏览器中显示/刷新数据的文件： testChat.php

<?php
$timeout=200;
set_time_limit($timeout+1);//Maximum execution time.
flushBrowser();//Print space chars to have cache flush on browsers.
$str='';
while ($timeout>0){
    //Flush data to display
    ob_flush();
    flush();
if ($str!=checkPostMsgQueued())
echo checkPostMsgQueued()."\n";
$str=checkPostMsgQueued();
    //wait...
    sleep(1);
    $timeout-=1;
}
ob_end_flush();


//Many browsers seems to receive some data before flushing.
function flushBrowser(){
if (ob_get_level() == 0) ob_start();
echo str_pad('',4096)."\n";   
}
function checkPostMsgQueued(){
        $filename="testChat.txt";
        if (file_exists($filename)){
            $stream=fopen($filename, 'r');
            $str=stream_get_line($stream,128);
            fclose($stream);
        }
        return $str;
}
顺便说一句，就像我说的，这样做可能有点苛刻。。。 我认为您别无选择，只能使用一些客户端语言在同一页面上显示和发布数据：） 祝你好运

编辑：

以下是解决方法：

制作另一个html文件，包含2个iFrame： testchatframes.html：

 <iframe src="testchat.php"></iframe> 
 <iframe src="testchatsubmit.php"></iframe>
我还修改了最初testChat.php代码的一些部分，使其能够在多个“客户机”上工作（我在localhost上尝试过），使用streams而不是粗暴地删除行。。。我不认为这是正确的方法（也许你应该注意“想让你这么做的人”），但这很有趣，很有效！它似乎并不那么贵……：）干杯

对于刷新部分，您可以使用
而不是setInterval（顺便说一下，setTimeout已经足够了，因为它将在每次页面刷新时发生1次）

对于表单重新填充，当您提交消息时，它将刷新页面并释放表单，这样就可以了。对于刚开始“阅读”的人来说，如果他开始键入内容并刷新页面，那么在刷新之后应该保持它，这样il看起来也可以吗？但是你可以添加
autocomplete=“off”
，以确保表单不会显示任何不需要的内容。

只是好奇：为什么你不应该使用Javascript？不确定为什么，通常在我的项目中，我同时使用Javascript和PhP，但那个家伙要求我不要使用Javascript，他确信这是无用的，他想通过禁用JavaScript在该页面中导航。。。最后，我不能使用它。如果你不能使用javascript，我建议使用像@knrf建议的iframe。然后你可以周期性地只刷新iframe（使用按钮或元标记）。谢谢，我会尽快尝试，我已经问过他了 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<form action="testChatSubmit.php" method="post">
    <input type="text" name="message" id="message">
    <input type="submit" name="submit">
</form>
</body>
</html>
<?php
if (isset($_POST['message'])){
$fp = fopen('testChat.txt', 'w');
fwrite($fp, $_POST['message']);
fclose($fp);
}
?>

 <iframe src="testchat.php"></iframe> 
 <iframe src="testchatsubmit.php"></iframe>