html5服务器事件

服务器端

  header头

  要想服务器端推送:在服务器端的报头要定义:
  header(‘Content-Type:text/event-stream‘),服务器发送的响应内容
应该使用这种`text/event-stream`的MIME;这样客户端才能理解你这是发送
的不是普通的数据,   eventsource对象才能识别

  事件流

服务器端发送事件流(内容);
每执行一次php文件就产生一个事件流;
事件流是由多个消息组成;
消息是一个后面都有一个空行作为分隔符
一个消息就是一个事件
一个消息可以由一个或者多个字段组成
字段是由字段名,冒号,字段值(数据),`字段名:值`;
产生一个空行(即两个换行符)代表一个事件(消息)的结束
在一个文件中定义多个未命名事件,后面的会覆盖前面的,
消息中的多个字段用一个`\n`(换行符)分隔
一个消息的结束用`\n\n`(产生一个空行);
一个字段的开始必须是以`data:`开头,例如`data:hello world!\n`
,客户端会接受到`hello world!`,
编码形式只能是使用utf-8,不能自己指定
说的也是云里雾里,其实你只要知道我要用这种特定的格式来发送数
据就行,直接下面的代码解释

服务器代码
下面三个消息,解释完了也就明白了,
1. 开始:报头,这个是必须的,就是要告诉客户端,你要把我的数据
放在eventSource对象中;
2. 第一个消息:第一个字段是打印一个时间,第二个字段打印一个‘nihao’
,第三个字段打印‘hehe’,第四个字段打印‘nihaoo’,第五个字段打印‘
bbbb’;最后两个\n\n代表消息的结束
注意:每个字段后面是有一个\n,来告诉浏览器我这是一个字段,而两个\n\n
,是告诉浏览器我这个消息结束了。每个字段的开头必须是:data:,这个一个
没有事件名的消息
3. 第二个事件是有事件名,有名字的事件是使用event:开头,值是事件名,
这第二个消息就是定义了一个名字为hello的事件。
4. 第三个消息:差别就是这次发送的是一个json

服务器代码
客户端
EventSource
这个API,要使用它,必须先实例化,并且必须给他传递一个参数,这个参
数就是请求服务器的地址
`var ES = new EventSource(‘服务器地址‘)`;
监听
EventSource对象属性和方法
属性
error
message
open
readyState
url

方法
close()

- 当连接发生错误的时候触发error事件
- 当成功连接时触发open事件
- 当接收到没有命名的事件时触发message事件
- readyState返回当前状态
- 0 =>正在建立连接
- 1 =>连接处于打开状态,正在调度事件
- 2 =>没有建立连接
- url返回页面地址
- close(),关闭连接
当成功连接后它会一直处于监听状态,监听服务器发送来的信息,如果断开
了连接,客户端会自动重新进行连接,除非你用close关闭。

命名事件
命名事件的接收要用addEventListener来监听,用法就像我下面代码写的
未命名事件
用DOM0级的方法或者是DOM2级的方法都行
`ES.onmessage = function(e){}`
`ES.addEventListener(‘message‘,function(e){});`
解析
JSON
如果接收的是json,则要先解析`JSON.parse(e.data)`;
多字段
对于多个字段的,如果向要解析出来每个字段来,就要使用正则表达式,
由于浏览器会把整个消息变成一个字符串,并在每个字段后面添加一个换行符,
而String类型有一个split方法,只需要用换行符作分隔,所以只需要`e.data
.split(/\s/)`,这就返回一个数组,数组的每一项就是一个字读的值

时间: 2024-10-05 07:22:19

html5服务器事件的相关文章

HTML5服务器发送事件(Server-Send Events)

HTML5服务器发送事件是允许获得来自服务器的更新. server-sent事件-单向传递消息,表示网页自动获取来自服务器的更新. 其中有一个重要的对象,eventsource对象是用来接收服务器发送事件的通知. 实例: <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &l

SSE技术详解:一种全新的HTML5服务器推送事件技术

前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events).关于这4种技术方式的优缺点,请参考<Web端即时通讯技术盘点:短轮询.Comet.Websocket.SSE>.本文将专门讲解SSE技术. 服务器推送事件(Server-sent Events),简称SSE,是 HTML 5 规范中的一个组成部分,可以用来从服务端

HTML5: HTML5 服务器发送事件(Server-Sent Events)

ylbtech-HTML5: HTML5 服务器发送事件(Server-Sent Events) 1.返回顶部 1. HTML5 服务器发送事件(Server-Sent Events) HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能够自动到达. 例子

HTML5 服务器发送事件(Server-Sent Events)

沈阳SEO:HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能够自动到达. 例子:Facebook/Twitter 更新.股价更新.新的博文.赛事结果等. 浏览器支持 所有主流浏览器均支持服务器发送事件,除了 Internet Explorer. 接收

(一)html5 touch事件实现页面上下滑动

最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo. 下午好生研究了下终于搞出了个比较全面的上下滑动的小demo,代码比较简单. 下面是完整代码,我把几个重要的地方做了红色标记 <!doctype html> <html lang="en"> <head> <

关于windows phone 8.1系统手机对html5触摸事件的支持情况

近日购入一部微软Lumia 640手机,目的主要就是为了测试年中开发完成的响应式移动web项目,同时也为了将来升级win10 mobile系统.由于我们的项目目前只考虑支持IOS与Android系统,所以只支持了html5触摸事件(如touchstart). 印象中WP系统应该只支持MS开头(如MSPointerDown)的指针事件,但测试结果很出人意料:项目在WP8.1的Lumia 640手机上竟完全可以正常运行,并支持了所有的触摸事件... 对于这个问题我挺不解的,于是就查阅了下msdn文档

asp.net给asp:button同时添加服务器事件和JS事件

1 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" OnClientClick="Fun()" Text="Button" /> 其中Onclick监听的是服务器事件,OnClientClick监听的是Script事件.

ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞

在网站项目开发时,为了减少用户的错误性的操作,很多时候我们都需要做一些必要的JS验证来提醒用户,比如:"输入的值不符合规则,请重新输入"."提交后无法修改,您确定要继续吗?"友好性的提示. 这时候我们想到了Button有一个客户端的点击事件(OnClientClick),大家知道,ASP.NET 页面ASPX页面被创建的时候会生成 一段代码 <input type="hidden" name="__EVENTTARGET"

html5触摸事件tap演化

触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件.所以触摸事件反应更快,体验更好. 触摸事件的类型: 为了区别触摸相关的状态改变,存在多种类型的触摸事件.可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型.注意: 在很多情况下,触摸事件和鼠标事件会同时被触发(目的是让没有