谈谈HTML5中的服务器发送事件Server-Sent Events

HTML5加了许多新功能,其中服务器发送事件Server-Sent Events是一个亮点,以下直接贴上代码示例

index.html

【国内直连ChatGPT 29元起】
国内直连ChatGPT,Plus会员每月29元起,支持最新o1模型探索更多领域,无需注册OpenAI账号。

<!DOCTYPE html> 
<html> 
  <head>
    <meta charset="utf-8" />
    <title>服务器推送SSE</title>
    <script type="text/javascript"> 
      $(document).ready(function(){ 
        //检查浏览器支持情况
        if(typeof(EventSource)!=="undefined") { 
          //定义个对象,用于初始化事件源,这里用c.php这个页面实现 
          var eSource = new EventSource("c.php"); 
          //detect message receipt 
          eSource.onmessage = function(event) { 
            //将收到的数据展示到页面的ID=content元素中 
            document.getElementById("content").innerHTML += event.data+'<br />'; 
          }; 
        }else { 
          document.getElementById("content").innerHTML="没有收到服务端Server-Sent数据."; 
        }
      });
    </script>
  </head>
  <body> 
    <div id="content"></div>
  </body> 
</html>

server-sent.php

<?php
// 要声明头部
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
// 直接打印当前时间
echo "data: ".date('Y-m-d H:i:s').PHP_EOL; 
flush();
?>

运行效果截图

full

根据运行效果,发现是每三秒更新一次,赶紧用谷歌开发工具看了一下网络连接

结果发现每隔三秒有一个网络请求连接

full

服务器推送将会是下一代Web的利器,HTTP2将会考虑将服务器推送做为标准

分享

TITLE: 谈谈HTML5中的服务器发送事件Server-Sent Events

LINK: https://www.qttc.net/74-html5-server-sent-events.html

NOTE: 原创内容,转载请注明出自琼台博客