html5中的SSE功能实例

最新推荐文章于 2024-08-08 09:00:00 发布

pl在之心

最新推荐文章于 2024-08-08 09:00:00 发布

阅读量971

点赞数

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

本文链接：https://blog.csdn.net/u010627840/article/details/42010483

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近，看到html5的一个服务器端推送的功能，代码很简单，就像亲自测试一个。

果然还是出现了问题，首先我是在360极速浏览器上测试的，http://www.w3cschool.cc/try/try.php?filename=tryhtml5_sse

上有一个可以在线测试的，可以用。

但是，当我在自己搭建的apache服务器上测试的时候，就无法实现推送功能，360极速浏览器直接显示不支持，于是，我

使用谷歌浏览器，发现没有显示不支持，但是也没有显示推送的消息。代码如下：

1.html

</pre><p><pre name="code" class="html"><!DOCTYPE html>
<html>
<body>
<h1>获取服务端更新数据</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>";
    };
  }
else
  {
  document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
  }
</script>
</body>
</html>

demo_sse.php

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>

在谷歌浏览器上无法显示推送消息，但是也没有显示不支持，于是，我

查看1.html代码，发现程序还是进入了if循环，而且执行的是上面的部分

于是，我在if的第一句加上一句打印信息：

</pre><pre name="code" class="html">

<!DOCTYPE html>
<html>
<body>
<h1>获取服务端更新数据</h1>
<div id="result"></div>


<script>
if(typeof(EventSource)!=="undefined")
  {
document.getElementById("result").innerHTML="支持";
  var source=new EventSource("demo_sse.php");
  source.onmessage=function(event)
    {
    document.getElementById("result").innerHTML+=event.data + "<br>";
    };
  }
else
  {
  document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
  }
</script>
</body>
</html>

发现可以打印“支持”，但是还是无法推送。

再次，在var source这一行下面加上一句

</pre><pre name="code" class="html" style="color: rgb(68, 68, 68);">

<!DOCTYPE html>
<html>
<body>
<h1>获取服务端更新数据</h1>
<div id="result"></div>


<script>
if(typeof(EventSource)!=="undefined")
  {
document.getElementById("result").innerHTML="支持";
  var source=new EventSource("demo_sse.php"); 
document.getElementById("result").innerHTML="支持";
source.onmessage=function(event)   
 {    
document.getElementById("result").innerHTML+=event.data + "<br>";    
};  }else  
{  document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";  }
</script>
</body>
</html>

发现，没有显示“支持2”,终于发现问题所在，检查之后，发现没有写错，猜测是路径问题。

修改路径还是不行。

突然，我想到是不是名字出问题了，于是修改.php的文件名，为demo.php.

运行后，成功。

虽然不清楚为什么无法使用下划线命名，但是还是能达到目的。希望后续读者能解答

一下。