HTML5服务器端事件-显示

HTML5 Server Side Events - display

本文关键字:显示 事件 服务器端 HTML5      更新时间:2023-09-26

我正在看这个http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse教程,并有一个关于数据显示的问题。现在,新数据总是在下一行显示,我想知道如何在第一行显示新数据,在下一行显示以前的数据(反转)。请让我知道,如果任何代码样本,将是伟大的

不像那样在结果div内容中添加新数据…

document.getElementById("result").innerHTML += event.data + "<br>";

…我们用新数据和旧数据替换结果div内容。

document.getElementById("result").innerHTML = event.data + "<br>" + document.getElementById("result").innerHTML;

你可以把它粘贴到他们的试用窗口,看看它是否有效。

<!DOCTYPE html>
<html>
    <body>
        <h1>Getting server updates</h1>
        <div id="result"></div>
        <script>
            if(typeof(EventSource) !== "undefined") {
                var source = new EventSource("demo_sse.php");
                source.onmessage = function(event) {
                    document.getElementById("result").innerHTML = event.data + "<br>" + document.getElementById("result").innerHTML;
                };
            } else {
                document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
            }
        </script>
    </body>
</html>