Question

我想创建一个框来使用css显示来自事件源的数据。例如，

在这张图片中，我想创建一个从PHP脚本加载数据的框。新数据显示在顶部。我希望在顶部看到新数据。随着新数据的更新，旧数据会下降，您无法在4行后看到旧数据。我用css来实现它。我使用溢出来隐藏旧数据。相反，新数据位于底部。请帮我。谢谢。

我的代码位于下面

php脚本

<?php
        header('Content-Type: text/event-stream');
        header('Cache-Control: no-cache');
        $dbhost     = "localhost";
        $dbusername     = "root";
        $dbpassword     = "netwitness";
        $dbname     = "abdpractice";
        $con = mysqli_connect ($dbhost, $dbusername, $dbpassword) or die ('Error in connecting: ' . mysqli_error($con));

        //Select the particular database and link to the connection
        $db_selected = mysqli_select_db($con, $dbname ) or die('Select dbase error '. mysqli_error());
        //Make A SQL Query and link to the connection

        $result = mysqli_query($con,"SELECT * FROM `countryattack` ORDER BY RAND() LIMIT 1");

        while ($row = mysqli_fetch_assoc($result))
        {
            echo "data: [X] NEW ATTACK: FROM " . $row["countrysrc"]. " TO " . $row["countrydst"]. " \n\n";
        }
        mysqli_close($con);

?>

html代码

    <!DOCTYPE html>
<html>
<head>
<style>
div.hidden {
    background-color: #00FF00;
    width: 500px;
    height: 100px;
    overflow: hidden;
}
</style>
</head>
<body>

<h1>Getting server updates</h1>
<div class="hidden" id="result"></div>

<script>


if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("shownewattack.php");
    source.onmessage = function(event) {
        document.getElementById("result").innerHTML += event.data + "<br>";

    };
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}

</script>
</body>
</html>

我的输出是这样的

输出结果是它们在底部显示数据。这不是我想要的......关于如何做的任何想法..

我的问题是如何创建一个框来观察数据。随着脚本的更新，旧数据会下降。在第四行之后你看不到任何东西。新数据将出现在顶部。你能帮我么。谢谢..

Answer 1

$result = mysqli_query($con,"SELECT * FROM `countryattack` ORDER BY createdDate LIMIT 4");

    while ($row = mysqli_fetch_assoc($result))
    {
        echo "data: [X] NEW ATTACK: FROM " . $row["countrysrc"]. " TO " . $row["countrydst"]. "";
    }

echo "data: [X] NEW ATTACK: FROM " . $row["countrysrc"]. " TO " . $row["countrydst"]. "<br>";

那应该做你想要的。只需将行添加到表中，然后按行对数据进行排序，就可以将createdDate添加到数据库中。然后将记录限制为4.此外，如果您想要新行上的数据，您可以添加＆lt; br＆gt;到你的回声结束。祝你好运。

Answer 2

确保您使用DESC或ASC对查询进行排序，以使其相应地到达。这肯定能解决问题。

Answer 3

您可以使用Node.insertBefore()替换父元素.innerHTML的连接。

const result = document.getElementById("result");

source.onmessage = function(event) {
  const node = document.createTextNode(event.data + "\n");
  if (!result.firstChild) {
    result.appendChild(node);
  else {
    result.insertBefore(node, result.firstChild);    
  }
};

＆＃13;

<pre id="result"></pre>
<script>
  const result = document.getElementById("result");
  let n = 0;
  
  const interval = setInterval(() => {
    let node = document.createTextNode(++n + "\n");
    if (!result.firstChild) {
      result.appendChild(node);
    } else {          
      result.insertBefore(node, result.firstChild)
    }
  }, 500);
</script>

＆＃13;

创建一个框以使用css

3 个答案: