如何仅显示 4 行并继续更新答案

【问题标题】：how to show only 4 rows and continue updating如何仅显示 4 行并继续更新
【发布时间】：2018-03-15 08:54:07
【问题描述】：

我创建了一个表名，数据库中的攻击由 4 列组成 id,countrysrc,countrydst 和 time 比如说， 1 新加坡马来西亚 1200pm 2 印度尼西亚印度 1234 pm

我现在创建了 php 脚本来获取 countrysrc 和 countrydst。我使用事件源从 php 脚本流式传输数据。时间是1200pm，会出现新加坡数据，如果是1234，就会出现印度尼西亚。我的网站每次都会继续显示数据。我可以在元素选项卡中看到一长串数据。但是，我只想查看持续更新的 4 行数据，就像 fireeye 网站一样。https://www.fireeye.com/cyber-map/threat-map.html。在顶部中心，您可以看到第一次出现 1 行数据，直到出现 4 行。当有 4 行数据时，它们将被更改为新数据。但是我的与那个网站不同。数据不断更新，就变成了这个样子。

对比火眼网站是这样的

我想实现fireeye网站。之所以要实现这个，是因为在项目中使用我的会影响性能。

我的代码在下面找到..

html代码

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("background.jpg");
}
pre {
    background-color:rgba(0,0,0,0.2);
    width: 500px;
    height: 62px;
    overflow: hidden;
    color: #95B9C7;
    border-style: solid;
    border-top-color: #87CEFA;
}
</style>
</head>
<body>

<h1>Getting server updates</h1>
<pre id="result"></pre>

<script>
const result = document.getElementById("result");
if (typeof(EventSource) !== "undefined") {
    var source = new EventSource("shownewattacksqli1.php");
    source.onmessage = function(event) {
        //Redefine node at each message event
        const node = document.createTextNode(event.data + "\n");
        result.insertBefore(node, result.firstChild);    
    };
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}


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

php代码

<?php
        header('Content-Type: text/event-stream');
        header('Cache-Control: no-cache');
        $dbhost     = "xxx";
        $dbusername     = "xx";
        $dbpassword     = "xx";
        $dbname     = "xx";
        $nowtime = time();
        $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 `countrysrc`,`countrydst` FROM `countryattack` WHERE `time` =".$nowtime. " LIMIT 1");

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

?>

我的问题是如何只显示 4 行动态更新的数据。我不想修改 sql 查询以限制 4 行。那不是我想要的。我想要完全像火眼网络威胁地图。可能吗？？？如果可以的话，请帮忙谢谢..

如果你想试试，先创建一个数据库，然后将数据输入到表中。我有脚本让你输入数据到表中，你可以使用php.exe运行php脚本，请稍后使用你可以看到当时的数据

<?php
$servername = "localhost";
$username = "root";
$password = "netwitness";
$dbname = "abdpractice";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

for ($i=0;$i  <=3600;$i++) {

    $countryarr = array("UNITED STATES", "INDIA", "SINGAPORE","MALAYSIA","COLOMBIA","THAILAND","ALGERIA","ENGLAND","CANADA","CHINA", "SAUDI ARABIA");
    $length = sizeof($countryarr)-1;
    $random = rand(0,$length);
    $random1 = rand(0,$length);

    $random_srccountry = $countryarr[$random];
    $random_dstcountry = $countryarr[$random1];
    $time = 1507088401 + $i;

    $sql = "INSERT INTO countryattack (id,countrysrc, countrydst, time)
    VALUES ('$i','$random_srccountry','$random_dstcountry','$time')";

    if ($conn->query($sql) === TRUE) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}


$conn->close();
?>

【问题讨论】：

标签： php html mysqli nodes server-sent-events

【解决方案1】：

if (count($("#result p)) >= 4) {
  $("#result p:last").remove();
  // append new row here
}

您需要检查行是否已经有 4 个。如果有更多或有 4 个，请删除最新的并再次追加。

在插入到 UI 之前，您需要将 elementTag 添加到每个新创建的数据中，方法是更改下面的 jQuery

result.insertBefore(node, result.firstChild);

到

result.insertBefore("<p>"+node"</p>", result.firstChild);

总结

if (count($("#result p)) >= 4) {
  $("#result p:last").remove();
  // append new row here
}
 result.insertBefore("<p>"+node"</p>", result.firstChild);

以上代码使用 jQuery - 尚未测试。但是，大概就是这样

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        background-image: url("background.jpg");
    }
    pre {
        background-color:rgba(0,0,0,0.2);
        width: 500px;
        height: 62px;
        overflow: hidden;
        color: #95B9C7;
        border-style: solid;
        border-top-color: #87CEFA;
    }
    </style>
    </head>
    <body>

    <h1>Getting server updates</h1>
    <pre id="result"></pre>

    <script>
    const result = document.getElementById("result");
    if (typeof(EventSource) !== "undefined") {
        var source = new EventSource("shownewattacksqli1.php");
        source.onmessage = function(event) {
            //Redefine node at each message event
            const node = document.createTextNode(event.data + "\n");
            if (count($("#result p)) >= 4) {
                $("#result p:last").remove();
            }
            result.insertBefore("<p>"+node"</p>", result.firstChild);    
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
    }

【讨论】：

我理解你的说法，但是，你从哪里得到日志 div 和计数
你能不能提供一个更好的答案
参考我更新的答案。您需要在创建时添加
或

以附加到代码中。一旦您拥有
或

。您只需将“ div:last ”更改为“yourelement:last”@Azhar
@Azhar 参考上面