快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门新葡亰8455下载app:HTML5初探通信API实现跨域和数据推送



媒介

HTML5新增通信相关两个API,跨文档消息传输与WEB Sockets API,

跨文档消息传输功能,可以在不合网页文档,不合端口(跨域环境下)进行消息通报。

应用web sockets api 可以让客户端与办事器端经由过程socket端口通报数据,这样便可以应用数据推送技巧。

跨文档消息传输

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

首先要想从澳门新葡亰8455下载app其他窗口吸收发过来的消息必要对其窗口工具进行监听:

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

应用windows工具的postMessage措施向其他窗口发生信息:

otherWindow.postMessage(message, targetOrigin)

第一个参数为发送文本,也可所以js工具(json)

第二个参数为接管消息工具窗口的URL,可以应用通配符

简单示例:

post信息

>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>

在以上根基上我们做一点改动,我们在子页面给出高宽按钮,用于奉告父窗口怎么改变iframe高宽:

父层代码

>html xmlns=澳门新葡亰8455下载app"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>br />iframe src="02.htm" width="400" id="f">iframe>

div id="msg_box">div>

body>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.orig澳门新葡亰8455下载appin;

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>br />

body>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或澳门新葡亰8455下载app者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');

// 打开Socketsocket.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',澳门新葡亰8455下载appevent);

};

// 关闭Socket....//socket.close()

};

您可能还会对下面的文章感兴趣: