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

日期：2021-02-23 类型：科技新闻 

关键词：微信小程序商城，免费微信小程序，小程序设计软件，小程序生成平台，可查询的小程序

序言

我前面文章内容讲过数据信息大屏,里边的数据信息时刻升级。也有时刻升级的个股数据信息，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

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

上一篇：跨域改动iframe网页页面內容详解 返回下一篇：没有了