HTML5 服务器发送事件(Server-Sent Events)介绍
w3cschool菜鸟教程
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
浏览器支持
所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知:
var source=new EventSource("demo_sse.php");
source.onmessage=function(event){document.getElementById("result").innerHTML+=event.data + "<br>";};
实例解析:
创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
每接收到一次更新,就会发生 onmessage 事件
当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
检测 Server-Sent 事件支持
以下实例,我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况:
if(typeof(EventSource)!=="undefined"){// Yes! Server-sent events support!// Some code.....}
else{// Sorry! No server-sent events support..}
为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>
ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
代码解释:
把报头 "Content-Type" 设置为 "text/event-stream"
规定不对页面进行缓存
输出发送日期(始终以 "data: " 开头)
向网页刷新输出数据
EventSource 对象
在上面的例子中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:
事件 描述
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当发生错误
转载请注明: http://www.w3cschool.cc/html/html5-serversentevents.html
HTML5 服务器发送事件(Server-Sent Events)介绍相关推荐
- 来自网页的消息服务器繁处理忙,EventSource 对象用于接收服务器发送事件通知,是网页自动获取来自服务器的更新...
//--------------------------------客户端代码----------------------------- if(typeof(EventSource) !== &quo ...
- HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送(C#示例)
传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...
- html怎么直接给服务器发消息,HTML5教程之服务器发送事件
HTML5 服务器发送事件(Server-Sent Events)允许网页获得来自服务器的更新. Sever-Sent事件 -单项消息传递 Sever-Sent事件指的是网页自动获取来自服务器的更新 ...
- HTML5支持服务器发送事件
来源 传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常 ...
- HTML 5 服务器发送事件
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. 浏览器支持 所有主流浏览器均支持服务器发送事件,除了 Internet Explorer. 服务器端代码 ...
- 085_html5服务器发送事件
1. html5服务器发送事件(server-sent event)允许网页获得来自服务器的更新. 2. Server-Sent事件 - 单向消息传递 2.1. Server-Sent事件指的是网页自 ...
- HTML5中的服务器发送事件Server-sent events
HTML5加了许多新功能,其中服务器发送事件Server-sent events是一个亮点,以下直接贴上代码示例 客户端a.html页面 <!DOCTYPE html> <html& ...
- 【HTML5】Server-Sent服务器发送事件
Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能 ...
- java sse spring_【SpringBoot WEB 系列】SSE 服务器发送事件详解
SSE 全称Server Sent Event,直译一下就是服务器发送事件,一般的项目开发中,用到的机会不多,可能很多小伙伴不太清楚这个东西,到底是干啥的,有啥用 本文主要知识点如下: SSE 扫盲, ...
最新文章
- 这里有三位程序员,你能找出来吗?| 每日趣闻
- SpringBoot+Vue实现指定账号审批单据时前端进行语音播报
- Ruby 学习笔记3
- 在Ubuntu下安装jdk解压出现问题:./jdk-6u30-linux-i586.bin: 113: ./install.sfx.3631: not found
- python3抓取b站弹幕_python3写爬取B站视频弹幕功能
- unrecognized selector sent to instance问题的解决
- word自带公式右侧编号
- android adbd分析,android6.0 adbd深入分析(三)adb root重启adbd流程
- 【二叉树迭代版前序遍历】LeetCode 144. Binary Tree Preorder Traversal
- 计算机窗口的PPT,PPT幻灯片基础入门01-认识窗口界面
- Science:大脑中睡眠的相互关联原因和结果
- UVA 1589 xiangqi
- kali安装wps办公软件
- Google Analytics
- 房屋建筑资质(三级建筑资质费用)
- 2012最新password总结,社工你懂得
- 数商云:把握数字化核心趋势,推动煤炭企业数字化转型布局
- 恒大法拉第汽车FF的Logo赏析
- 相对论通俗演义(1-10) 第九章
- 自制计算机之与门或门和非门
热门文章
- kubeasz_使用kubeasz安装K8S集群,不受国内网络环境影响
- 【node】express的www.js文件里面的process.env.PORT
- 【建站系列教程】5、谈一谈网站的静态化
- Python 报错解决:AttributeError: 'module' object has no attribute 'SSL_ST_INIT'
- java方法里执行两条sql_Java如何在数据库上执行多个SQL命令?
- php in_array 遍历,in_array大数组查询性能问题
- python自动整理文件夹_计算机文件和文件夹的Python自动管理,自动化,电脑,及
- 聊聊电商系统中常见的9大坑,库存超卖、重复下单、物流单ABA...
- java分布式锁终极解决方案之 redisson
- Spring Cloud Alibaba 之 服务治理:Nacos 如何实现微服务服务治理