HTML5 EventSource的用法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>获取服务端更新数据</h1>
<div id="result"></div>

<script type="text/javascript">
    if (typeof (EventSource) !== "undefined") {
        var source = new EventSource("data.aspx");
        source.onmessage = function (event) {

            document.getElementById("result").innerHTML += event.data + "<br>";
        };
        source.onerror = function (event) {
            console.log("error"+event);
        }
        source.onopen = function () {
            console.log(‘开始连接‘);
        }
    }
    else {
        document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 server-sent 事件...";
    }
</script>

</body>
</html>
时间: 2024-11-06 19:40:35

HTML5 EventSource的用法的相关文章

HTML5地理定位用法

HTML5 Geolocation(地理定位)用于定位用户的位置. 亲自试一试:在谷歌地图上显示您的位置 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9.Firefox.Chrome.Safari 以及 Opera 支持地理定位. 注释:对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确. HTML5 - 使用地理定位 请

避免HTML5六种错误用法

一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>--具体地说,就是直接用作替代品(用于样式).在XHTML或者HTML4中,我们常看到这样的代码:< !-- HTML 4-style code -->< div id="wrapper"> <div id="header"> <h1>My super dupe

html5 canvas基本用法

通过对canvas的初步了解,经过几天的总结,吧canvas的基本用法总结如下:方便以后查阅 <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas 使用实例</title> </head> <body style="padding:0; margin:0;" onLoad="draw()&

HTML5 accesskey的用法

<button onclick="start()" accesskey="s">开始</button> <button onclick="ok()" accesskey="o">停止</button> 在mac下按 control + alt + accesskey,自定义快捷激活,按下之后会直接触发click点击事件. 原文地址:https://www.cnblogs.com/

HTML5简单入门系列(五)

前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的做法是网页不断的询问(向服务器发送请求)是否有可用的更新.通过服务器反馈之后,获得更新. 轮训方案 我们使用上篇HTML5简单入门系列(四)web worker的技术简单实现一下该轮训方案,主动向服务器询问是否有更新. 由于web worker不能访问document等对象,是不能和jQuery连用

心情随记12.6

眼看马上就要做毕业设计了,可是头绪还是只有那么一点我也整天还是昏昏沉沉的,每次想学的时候总是会冒出一个很迷茫的想法.我不知道我该怎么看书,直接看后端书籍我也知道那会是我必须经过的一个路程.但是我更偏爱于前端.也总是了解道道很多人都走了Java后端?为什么也许对于学习的阶段的来讲的话后端看起来似乎很庞大,但是似乎又给人万变不离其宗的感受.只要把握大部分的思路和想法其实上手应该很容易.这是一直给我的一个想法.我不知道前端和后端的具体分水点在哪.具体的区别在哪,我甚至不知道今后到底是什么方向比较热门一

localStorage变更事件当前页响应新解

html5的localStorage相信大家都是很熟悉了,但是在chrome等支持该对象的浏览器中(ie10除外),如果你监听 storage变更事件你就会发现,当数据发生变化时本页是监听不到storage事件变更消息的.而同域的其他打开的页面反而监听到了该消息.悲剧不? 以上的机制应该是无可厚非的,但是对于单页app或者数据驱动的页面展现来说,这是一个让人抓狂的规事情.awen在开发中为了实现一个纯数据驱动的单页app机制.不得不面对这个问题,经过测试终于实现了本页面locaStorage变更

事情计划要做的事情

1.买曾国藩家书看完,地摊上买或者书店买或者网上买: 2.了凡四训看完.袁了凡细鉴 笔记 3.李小龙传记看完 笔记 4.金庸的小说 看完 5.梦的解析看完 6.搬进新家.牵上网线.住过去,不租房,可以骑电动车到经天路再坐车.电动车二手也行.7,8成新. 7.web前端的知识.学习node.js.angluar.js这些.包括看视频,或者网络课堂学习带领下入门. 8.带家人去外国旅游一次,泰国,韩国,或者其他国家,签证比较好办的就行. 9.全栈工程师,精通前台和后台.精通并发,多线程.熟悉设计模式

七个帮助你处理Web页面层布局的jQuery插件

1.UI.Layout  jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局.布局可以创建任何你想要的UI外观; 从简单的标题或侧边栏到具有工具栏,菜单,帮助面板,状态栏,子表单等的复杂应用程序.集成并增强其他UI小部件,如选项卡,手风琴和对话框,以创建丰富的界面. 2.jQUery Masonry 官方网站:https://masonry.desandro.com/?resour