HTML5通信API
2016-03-07 14:48
615 查看
跨文档消息传输的基本知识
HTML5提供了在网页文档之间互相接受与发送信息的功能,只要获取到网页所在窗口对象的实例,不仅同源(域+端口号)的Web网页之间可以互相通信,甚至可以实现跨域通信。首先,要想接受从其他窗口那里发过来的消息,就必须对窗口对象的message事件进行监视,代码如下所示:
window.addEventListener("message",function(){...},false);
使用window对象的postMessage方法向其他窗口发送消息,该方法的定义如下所示 :
otherWindow.postMessage(message,targetOrign);
该方法使用两个参数,第一个参数为所发送的消息文本,但也可以是任何JavaScript对象(通过JSON转换对象为文本);第二个参数为接收消息的对象窗口的URL地址。
Web Sockets通信的基本知识
WebSocket API是HTML5提供的在Web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。它实现了用HTTP不容易实现的服务器端的数据推送等智能通信技术。使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接可以是实时的,也是永久的,除非被显示关闭。这意味着当服务器想向客户端发送数据时,可以立即将数据推送到客户端的浏览器中,无需重新建立连接。只要客户端有一个被打开的socket(套接字)并且与服务器建立了连接,服务器就可以把数据推送到这个socket上,服务器不再需要轮询客户端的请求,从被动变成了主动。
Web Sockets的API本身非常简单。将URL字符串作为参数,然后调用WebSockets对象的构造器来建立与服务器之间的通信连接,如下所示:
var webSocket=new WebSocket("ws://localhost:8080/socket");
URL字符串必须以”ws”或”wss”(加密通信时)文字作为开头。这个URL字符串被设定好之后,在JavaScript脚本中可以通过访问WebSocket对象的url属性来重新获取。
通信连接建立好之后,就可以进行客户端与服务器端的双向通信了。使用WebSocket对象的send方法对服务器发送数据,只能发送文本数据,但是可以使用JSON对象把任何JavaScript对象转换成文本数据后进行发送。使用send方法的代码如下所示。
webSocket.send("data");
通过获取onmessage事件句柄来接收服务器传过来的数据,如下所示。
webSocket.onmessage=function(event){ var data=event.data; ... }
通过获取onopen事件句柄来监听socket的打开事件,如下所示,
webSocket.onopen=function(){ //开始通信时的处理 }
通过获取onclose事件句柄来监听socket的关闭事件,如下所示
webSocket.onclose=function(event){ //通信结束时的处理
};
通过close方法来关闭socket,切断通信连接,如下所示。
webSocket.close();
另外,可以通过读取readyState的属性值来获取WebSocket对象的状态,readyState属性存在以下几种属性值:
CONNECTING(数字值为0),表示正在连接。
OPEN(数字值1),表示已建立连接。
CLOSING(数字值为2),表示正在关闭连接。
CLOSED(数字值为3)表示已关闭连接。
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- Canvas 在高清屏下绘制图片变模糊的解决方法
- C#实现子窗体与父窗体通信方法实例总结
- 原生js结合html5制作小飞龙的简易跳球
- java和c#使用hessian通信的方法
- win32下进程间通信(共享内存)实例分析
- WinForm实现跨进程通信的方法
- C#中使用UDP通信实例
- ASP.NET UserControl 通信的具体实现
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能
- JavaScript+html5 canvas制作的百花齐放效果完整实例