浏览: 26468 次
性别:
来自: 成都

最近访客更多访客>>

何仕健

dagf113225

liuzhongda123

Xiqincai

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (71)

社区版块

存档分类

【HTML5初探之通信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() 
};

结语

这章东西其实还是非常有用的，但真要问我有什么用，我还确实说不出来。。。。。。

分享到：

【前端框架之Bootstrap01】我们一起来看看 ... | 在Java中实现.net中DataTable功能以及操作 ...

2013-06-24 11:00
浏览 330
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦

导航

前言

跨文档消息传输

web sockets 通信

web sockets api

结语

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦

导航

前言

跨文档消息传输

web sockets 通信

web sockets api

结语

评论

发表评论

相关推荐

最近访客更多访客>>