浅谈html5之sse服务器发送事件EventSource介绍


Posted in HTML / CSS onAugust 28, 2017

前言

我前面文章讲过数据大屏,里面的数据时时更新。还有时时更新的股票数据,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 + "<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 事件...";
}

我们会发现,控制台打印如下:

浅谈html5之sse服务器发送事件EventSource介绍

不停的进入链接、和错误,详情请点击

那是因为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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 border-radius属性详解
Jul 05 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 #HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 #HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 #HTML / CSS
HTML5中的拖放实现详解
Aug 23 #HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 #HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 #HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 #HTML / CSS
You might like
剖析 PHP 中的输出缓冲
2006/12/21 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue的mixins属性详解
2018/03/14 Javascript
js动态引入的四种方法
2018/05/05 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python字符串处理实现单词反转
2017/06/14 Python
Python实现批量压缩图片
2018/01/25 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python实现滑雪者小游戏
2020/02/22 Python
Python创建临时文件和文件夹
2020/08/05 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
html5弹跳球示例代码
2013/07/23 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
岗位聘任书范文
2014/03/29 职场文书
期末学生评语大全
2014/04/24 职场文书
小学作文之描写天气
2019/08/15 职场文书
Go 内联优化让程序员爱不释手
2022/06/21 Golang