欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 通讯API 跨域门槛将不再高、数据推送也不再是梦

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

媒介

HTML5新增通讯相干两个API,跨文档动静传输与WEB Sockets API,

跨文档动静传输成果,可以在差异网页文档,差异端口(跨域环境下)进动作静转达。

行使web sockets api 可以让客户端与处事器端通过socket端口转达数据,这样便可以行使数据推送技能。

跨文档动静传输

在之前我们若想跨域获守信息会花许多工夫,此刻只要获取网页地址窗口工具实例变可以实现相互通讯。

起主要想从其他窗口接管发过来的动静必要对其窗口工具举办监听:

window.addevntListener('message', function () {}, false)

行使windows工具的postMessage要领向其他窗口产生信息:

otherWindow.postMessage(message, targetOrigin)第一个参数为发送文本,也可所以js工具(json)第二个参数为吸取动静工具窗口的URL,可以行使通配符

简朴示例:


代码如下:
post信息
<!DOCTYPE Html>
<Html xmlns="http://www.w3.org/1999/xHtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
window.addEventListener('message', function (ev) {
//应该要搜查动静来历
$('#msg_box').Html(ev.origin + ' 发来动静:' + ev.data);
}, false);

$('#send').click(function () {
var frame = window.frames[0];
frame.postMessage($('#msg').val(), 'http://localhost:3317/Html5%E4%B8%8ECss3/06%E9%80%9A%E8%AE%AFapi/02.htm');
});
});

</script>
</head>
<body>
<input type="text" id="msg" />
<button id="send">
发送信息</button>
<iframe src="02.htm" width="400"></iframe>
<div id="msg_box">
</div>
</body>
</Html>

HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦

在以上基本上我们做一点修改,我们在子页面给出高宽按钮,用于汇报父窗口怎么改变iframe高宽:


代码如下:
父层代码
<!DOCTYPE Html>
<Html xmlns="http://www.w3.org/1999/xHtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
window.addEventListener('message', function (ev) {
//应该要搜查动静来历
$('#msg_box').Html(ev.origin + ' 发来动静:' + ev.data);

var w_h = ev.data;
//未做名目搜查
$('#f').Css('width', w_h.split(',')[0] + 'px');
$('#f').Css('height', w_h.split(',')[1] + 'px');

}, false);

function p() {
var frame = window.frames[0];
frame.postMessage($('#msg').val(), 'http://localhost:3317/Html5%E4%B8%8ECss3/06%E9%80%9A%E8%AE%AFapi/02.htm');
}
$('#send').click(function () {
p();
});
setTimeout(p, 200);

});

</script>
</head>
<body>
<input type="text" id="msg" />
<button id="send">
发送信息</button>
<iframe src="02.htm" width="400" id="f"></iframe>
<div id="msg_box">
</div>
</body>
</Html>



代码如下:
子层代码
<!DOCTYPE Html>
<Html xmlns="http://www.w3.org/1999/xHtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var url = '';
var source = '';
window.addEventListener('message', function (ev) {
//此处必要做来历验证
if (ev.origin) { }
$('#msg').Html(ev.origin + ' 发来动静:' + ev.data);
url = ev.origin;
source = ev.source;
//ev.source.postMessage('这里是:' + this.location, ev.origin);
});

$('#send').click(function () {
source.postMessage($('#w_h').val(), url);
});
});
</script>
</head>
<body>
<div id='msg'>
</div>
<input type="text" id="w_h" />
<button id="send">
改变外层高度</button>
</body>
</Html>

HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦

最后为我们的e截个图:

HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦

越发机动的运用,该api还可以更锋利的运用,我们可以转达函数名什么的,横竖可做许多工作了。

web sockets 通讯

web sockets 是HTML5提供的在web应用措施中客户端与处事器端之间举办非HTTP的通讯机制

他实现了http不轻易实现的处事器的数据推送等智能通讯技能,因此受到了很高的存眷。

行使web sockes api 可以在处事器端与客户端成立非HTTP的双向毗连,这个毗连是及时的也是永世的,除非显式封锁

这意味着当处事器想向客户端发送数据时,可以当即将数据推送到客户赏识器中,无需从头成立毗连。

只要客户端有一个被打开的socket而且与处事器成立了毗连,处事器就可以将数据推送到这个socket上,处事器不再必要轮询客户端哀求,化被动为主动。

web sockets api


代码如下:
var webSocket = new WebSocket('ws://localhost:8005/socket');
url必需行使ws可能wss(加密)作为头,这个url设定好后,在javascript剧本中可以通过会见websocket工具的url来从头获取
通讯成立毗连后,就可以双向通讯了,行使websocket工具的send要领加json数据便可将任何情势数据传往处事器:</p> <p>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毗连;</p> <p>通过readyState属性获取websocket工具状态:
CONNECTION 0 正在毗连
OPEN 1 已经毗连
CLOSING 2 正在封锁
CLOSE 2 已经封锁

PS:,由于我不会设置处事器块的socket相干,以是暂且不能举办测试,该题目留待二次进修时办理。

整个代码照旧很简朴的:


代码如下:
// 建设一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); </p> <p>// 打开Socket
socket.onopen = function(event) { </p> <p> // 发送一个初始化动静
socket.send('I am the client and I\'m listening!'); </p> <p> // 监听动静
socket.onmessage = function(event) {
console.log('Client received a message',event);
}; </p> <p> // 监听Socket的封锁
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
}; </p> <p> // 封锁Socket....
//socket.close()
};

本文地址:http://itbyc.com/web/html5/13635.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1