html5中的SSE功能实例

来源：互联网发布：java软件工程师教程编辑：程序博客网时间：2024/05/16 00:36

最近，看到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

<?phpheader('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.

运行后，成功。

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

一下。

0 0