使用 css 创建一个框以显示来自事件源的数据

Question

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

在这张图片中，我想创建一个框来从 php 脚本加载数据。新数据出现在顶部。我想在 top.As 处看到新数据新数据正在更新，旧数据下降，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>

我的输出是这样的

输出是他们在底部显示数据。这不是我想要的..关于如何做到这一点的任何想法..

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

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

这应该符合您的要求。当行添加到 table 时，只需将 createdDate 添加到数据库中，然后按此对数据进行排序。然后将记录限制为 4。此外，如果您想要新行中的数据，您可以在 echo 的末尾添加
。祝你好运。

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);    
  }
};

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

使用 css 创建一个框以显示来自事件源的数据

Create a box to to display the data from the event source using css

html

javascript

css

server-sent-events