首页 > 代码库 > HTML5BOM-服务器通信技术

HTML5BOM-服务器通信技术

一、服务器推送技术---server-send-Event

是服务器向浏览器客户端推送数据的过程,是单向的。

1、服务器要求

在php服务器中, 要求网页的mime类型为:text/event-stream。 eg:header("Content-Type: text/event-stream\n\n"),这是在php服务器中。

2.text/event-stream 有一定的格式,数据流由一个或多个注释行及字段行组成。注释行是由冒号开始的行,字段行由字段名和字段值组成的,多个事件之间用空行分隔。

eg: echo ‘:‘. $now. "\n"    //这个是注释行

eg: echo ‘data:‘ .$now ."\n" //这个是字段行

通信数据的编码是UTF-8

3. EventSource 对象

是浏览器用于实现Server-Sent-Event 的关键

方法: var  source=new EventSource(url)    其中  url 就是要推送数据的服务器技术的URL地址,(服务器端的)

当事件流被打开,浏览器发送HTTP请求, 服务器响应请求,

当创建EventSource对象之后 就可以定义事件监听函数的各种事件

open事件: 当连接打开时触发该事件

message事件: 当收到信息时触发该事件

close 事件: 当连接关闭时触发该事件

var  source=new EventSource(url);

source.onopen=function(){}

source.onmessage=function(){}

source.onerror=function(){}

 

EventSource 是一个不停间歇运行的程序,甚至导致浏览器奔溃,所以可以用worker对执行的部分起到优化作用。

二、web Socket 套接字连接

这个是web应用程序和服务器进程间的双向通信,而服务器推进技术只能实现服务器到浏览器客户端的单向传递。

方法: var  socke=new WebSocket(host)// host 是一个主机名  host="ws://localhost:12344/"

 

这个对象也有相应的三个方法: onopen  onmessage  onerror

websocket 和http 之间的区别在 传输数据时,http 每次传输的过程都要加上报头,而websocket是通信是只执行一次这个过程。所以再聊天程序中,websocket比http 方法更好。

 

HTML5BOM-服务器通信技术