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

2019-01-28 18:52:57王冬梅


复制代码

子层代码
<!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>

最后为我们的e截个图:

更加灵活的运用,该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 已经关闭