H5的之sse办事器发送事件EventSource详解--百分百源码网

H5的之sse办事器发送事件EventSource详解-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来H5的之sse办事器发送事件EventSource详解，sse办事器发送事件EventSource的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来H5的之sse办事器发送事件EventSource详解，sse办事器发送事件EventSource的注意事项是什么，下面就是实战案例，一起来看一下。

前言

我前面文章讲过数据大屏,里面的数据不时更新。还有不时更新的股票数据，Facebook/Twitter 更新、估价更新、新的博文、赛事效果等等，都需要数据不时更新。以前我们个别都是要求办事器，看看有没有可以更新的数据。html5供给了Server-Sent Events办法，通过办事器发送事件，更新能够主动抵达。

Server-Sent Events运用

Server-Sent Events运用很简略，通过EventSource 对象来承受办事器端新闻。有如下事件：

onopen 当通往办事器的连贯被打开
onmessage 当接收到新闻
onerror 当产生差错

检测 Server-Sent 事件支撑

if(typeof(EventSource)!=="undefined")
{
  // 阅读器支撑 Server-Sent
  // 一些代码.....
}
else
{
// 阅读器不支撑 Server-Sent..
}

接收 Server-Sent 事件通知

var source=new EventSource("haorooms_sse.php");
source.onmessage=function(event)
{
    document.getElementById("result").innerHTML+=event.data + "
";
};

办事器端代码实例

链接事件和报错事件都加上

if(typeof(EventSource)!=="undefined")
{
    var source=new EventSource("server.php");
    source.onopen=function()
    {
         console.log("Connection to server opened.");
    };
    source.onmessage=function(event)
    {
        document.getElementById("result").innerHTML+=event.data + "
";
    };
    source.onerror=function()
    {
        console.log("EventSource failed.");
    };
}
else
{
    document.getElementById("result").innerHTML="抱愧，你的阅读器不支撑 server-sent 事件...";
}

我们会发明，控制台打印如下：

不绝的进入链接、和差错，详情请点击

那是由于php代码只是简略的echo，并没有陆续输出，我们把上面php代码做如下改善

就不会涌现不绝差错了！

IE阅读器兼容解决方案

我们晓得，IE阅读器并不支撑EventSource，有如下解决方案：

引入