HTML5 服务器推送事件（Server-sent Events）简单实例

最新推荐文章于 2025-06-27 15:01:38 发布

geekzsp

最新推荐文章于 2025-06-27 15:01:38 发布

阅读量865

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html5 服务器推送

本文链接：https://blog.youkuaiyun.com/mixi9760/article/details/52175095

前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用 Server-Sent Events (SSE) 技术实现实时数据推送的简单示例。通过客户端 HTML 页面展示从服务器接收到的数据，并实时更新显示结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="result"></div>
</body>
</html>
<script>
    var source=new EventSource("demo_sse.php");
    source.onmessage=function(event)
    {
        document.getElementById("result").innerHTML+=event.data + "<br />";
    };
</script>

服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="result"></div>
</body>
</html>
<script>
    var source=new EventSource("demo_sse.php");
    source.onmessage=function(event)
    {
        document.getElementById("result").innerHTML+=event.data + "<br />";
    };
</script>