浅谈html5之sse服务器推送恶性事件EventSource详细介

日期:2020-09-16 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

序言

我前面文章内容讲过数据信息大屏,里边的数据信息时刻升级。也有时刻升级的个股数据信息,Facebook/Twitter 升级、定价升级、新的博文、比赛結果这些,都必须数据信息时刻升级。以前大家1般全是恳求服务器,看看有木有能够升级的数据信息。html5出示了Server-Sent Events方式,根据服务器推送恶性事件,升级可以全自动抵达。

Server-Sent Events应用

Server-Sent Events应用很简易,根据EventSource 目标来接纳服务器端信息。有以下恶性事件:

  • onopen 当通往服务器的联接挨打开
  • onmessage 当接受到信息
  • onerror 当产生不正确

检验 Server-Sent 恶性事件适用

if(typeof(EventSource)!=="undefined")
{
  // 访问器适用 Server-Sent
  // 1些编码.....
}
else
{
// 访问器不适用 Server-Sent..
}

接受 Server-Sent 恶性事件通告

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

服务器端编码案例

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

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

连接恶性事件和出错恶性事件都再加

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 + "<br>";
    };
    source.onerror=function()
    {
        console.log("EventSource failed.");
    };
}
else
{
    document.getElementById("result").innerHTML="很抱歉,你的访问器不适用 server-sent 恶性事件...";
}

大家会发现,操纵台复印以下:

不断的进到连接、和不正确,详细信息请点一下

那是由于php编码只是简易的echo,并沒有持续輸出,大家把上面php编码做以下改善

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

$time = date('r'); 

  $i = 0;
  $c = $i + 100;
  while (++$i < $c) {
    echo "id: " . $i . "\n";
    echo "data: " . $time. ";\n\n";
    ob_flush();
    flush();
    sleep(1);
  }
?>

就不容易出現不断不正确了!

IE访问器适配处理计划方案

大家了解,IE访问器其实不适用EventSource,有以下处理计划方案:

引进

eventsource.min.js

便可以完善处理。能够查询其github详细地址:https://github.com/Yaffle/EventSource 融合nodejs应用也很便捷,立即

npm install event-source-polyfill

便可以了。

github详细地址:https://github.com/confidence68/demoOfSocket/tree/master/serversent

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。