【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦
2013-06-24 11:00
519 查看
导航
【初探HTML5之使用新标签布局】用html5布局我的博客页!【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面
【HTML5初探之绘制图像(下)】看我canvas元素引领下一代web页面
【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道?
【HTML5初探之本地存储】如果没有数据库。。。
【HTML5初探之离线应用】如何打造零请求、无流量的网站?
【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦
【HTML5初探之Web Workers】网页也能多线程
【HTML5初探之Geolocation API】让我们来回去地理信息
前言
HTML5新增通信相关两个API,跨文档消息传输与WEB Sockets API,跨文档消息传输功能,可以在不同网页文档,不同端口(跨域情况下)进行消息传递。
使用web sockets api 可以让客户端与服务器端通过socket端口传递数据,这样便可以使用数据推送技术。
跨文档消息传输
在之前我们若想跨域获取信息会花很多功夫,现在只要获取网页所在窗口对象实例变可以实现互相通信。首先要想从其他窗口接受发过来的消息需要对其窗口对象进行监听:
window.addevntListener('message', function () {}, false)
使用windows对象的postMessage方法向其他窗口发生信息:
otherWindow.postMessage(message, targetOrigin) 第一个参数为发送文本,也可以是js对象(json) 第二个参数为接收消息对象窗口的URL,可以使用通配符
简单示例:
post信息
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 window.addEventListener('message', function (ev) { 9 //应该要检查消息来源 10 $('#msg_box').html(ev.origin + ' 发来消息:' + ev.data); 11 }, false); 12 13 $('#send').click(function () { 14 var frame = window.frames[0]; 15 frame.postMessage($('#msg').val(), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm'); 16 }); 17 }); 18 19 </script> 20 </head> 21 <body> 22 <input type="text" id="msg" /> 23 <button id="send"> 24 发送信息</button> 25 <iframe src="02.htm" width="400"></iframe> 26 <div id="msg_box"> 27 </div> 28 </body> 29 </html>
在以上基础上我们做一点修改,我们在子页面给出高宽按钮,用于告诉父窗口怎么改变iframe高宽:
父层代码
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 window.addEventListener('message', function (ev) { 9 //应该要检查消息来源 10 $('#msg_box').html(ev.origin + ' 发来消息:' + ev.data); 11 12 var w_h = ev.data; 13 //未做格式检查 14 $('#f').css('width', w_h.split(',')[0] + 'px'); 15 $('#f').css('height', w_h.split(',')[1] + 'px'); 16 17 }, false); 18 19 function p() { 20 var frame = window.frames[0]; 21 frame.postMessage($('#msg').val(), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm'); 22 } 23 $('#send').click(function () { 24 p(); 25 }); 26 setTimeout(p, 200); 27 28 }); 29 30 </script> 31 </head> 32 <body> 33 <input type="text" id="msg" /> 34 <button id="send"> 35 发送信息</button><br /> 36 <iframe src="02.htm" width="400" id="f"></iframe> 37 <div id="msg_box"> 38 </div> 39 </body> 40 </html>
子层代码
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 var url = ''; 9 var source = ''; 10 window.addEventListener('message', function (ev) { 11 //此处需要做来源验证 12 if (ev.origin) { } 13 $('#msg').html(ev.origin + ' 发来消息:' + ev.data); 14 url = ev.origin; 15 source = ev.source; 16 //ev.source.postMessage('这里是:' + this.location, ev.origin); 17 }); 18 19 $('#send').click(function () { 20 source.postMessage($('#w_h').val(), url); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <div id='msg'> 27 </div> 28 <input type="text" id="w_h" /> 29 <button id="send"> 30 改变外层高度</button><br /> 31 </body> 32 </html>
最后为我们的e截个图:
更加灵活的运用,该api还可以更厉害的运用,我们可以传递函数名什么的,反正可做很多事情了。
web sockets 通信
web sockets 是HTML5提供的在web应用程序中客户端与服务器端之间进行非HTTP的通信机制他实现了http不容易实现的服务器的数据推送等智能通信技术,因此受到了很高的关注。
使用web sockes api 可以在服务器端与客户端建立非HTTP的双向连接,这个连接是实时的也是永久的,除非显式关闭
这意味着当服务器想向客户端发送数据时,可以立即将数据推送到客户浏览器中,无需重新建立连接。
只要客户端有一个被打开的socket并且与服务器建立了连接,服务器就可以将数据推送到这个socket上,服务器不再需要轮询客户端请求,化被动为主动。
web sockets api
web sockets api 本身非常简单,将url作为参数,然后调用websocket对象的构造器来建立于服务器的通信:var webSocket = new WebSocket('ws://localhost:8005/socket'); url必须使用ws或者wss(加密)作为头,这个url设定好后,在javascript脚本中可以通过访问websocket对象的url来重新获取 通信建立连接后,就可以双向通信了,使用websocket对象的send方法加json数据便可将任何形式数据传往服务器: webSocket.send(msg); 通过onmessage事件来接收服务器传送过来数据: webSocket.onmessage = function (e) { var data = e.data; }; 通过onopern事件监听socket打开事件: webSocket.onopen = function (e) { }; 通过onclose监听socket关闭事件: webSocket.onclose = function (e) {}; 通过webSocket.close()方法关闭socket连接; 通过readyState属性获取websocket对象状态: CONNECTION 0 正在连接 OPEN 1 已经连接 CLOSING 2 正在关闭 CLOSE 2 已经关闭
PS:,因为我不会配置服务器块的socket相关,所以暂时不能进行测试,该问题留待二次学习时解决。
整个代码还是很简单的:
// 创建一个Socket实例 var socket = new WebSocket('ws://localhost:8080'); // 打开Socket socket.onopen = function(event) { // 发送一个初始化消息 socket.send('I am the client and I\'m listening!'); // 监听消息 socket.onmessage = function(event) { console.log('Client received a message',event); }; // 监听Socket的关闭 socket.onclose = function(event) { console.log('Client notified socket has closed',event); }; // 关闭Socket.... //socket.close() };
结语
这章东西其实还是非常有用的,但真要问我有什么用,我还确实说不出来。。。。。。相关文章推荐
- 【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦
- [HTML5_Web Workers+Sockets]HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
- HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
- HTML5 通信API 跨域WEB Sockets
- javascript跨域通信(二):window.name实现的跨域数据传输
- JavaScript使用HTML5的window.postMessage实现跨域通信例子
- HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送(C#示例)
- Android开发--与后台通信(一)--API数据获取
- HTML5 postMessage 消息传输与 POST 跨域通信
- 解决前端Html5和Egret跨域请求Http数据的例子
- [转]html5: postMessage解决跨域和跨页面通信的问题
- HTML5 postMessage 消息传输与 POST 跨域通信
- IT界 PHP实现 HTML5数据推送SSE原理
- 26 API-网络编程(网络概述,Socket通信机制,UDP协议发送和接收数据,TCP协议发送和接收数据)
- NoSQL初探之人人都爱Redis:(2)Redis API与常用数据类型简介
- apiCloud中api.ajax方法跨域传参获取数据
- 初探基于CDMA网络的移动数据通信系统
- HTML5的history API,保存ajax数据
- Html5 跨域通信
- 【HTML5初探之Geolocation API】让我们获取女神的地址