• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
用户5592359840 显示全部楼层 发表于 2021-10-25 19:45:06 |阅读模式 打印 上一主题 下一主题
媒介HTML5新增通讯相关两个API,跨文档消息传输与WEB Sockets API,
跨文档消息传输功能,可以在不同网页文档,不同端口(跨域情况下)举行消息传递。
使用web sockets api 可以让客户端与服务器端通过socket端口传递数据,如许便可以使用数据推送技能。
跨文档消息传输在之前我们若想跨域获取信息会花许多功夫,如今只要获取网页所在窗口对象实例变可以实现互相通讯。
起首要想从其他窗口担当发过来的消息需要对其窗口对象举行监听:
  1. window.addevntListener(<span style="COLOR: #800000">'</span><span style="COLOR: #800000">message</span><span style="COLOR: #800000">'</span>, function () {}, <span style="COLOR: #0000ff">false</span>)
复制代码
使用windows对象的postMessage方法向其他窗口发生信息:
  1. <span style="COLOR: #000000">otherWindow.postMessage(message, targetOrigin)第一个参数为发送文本,也可以是js对象(json)第二个参数为接收消息对象窗口的URL,可以使用通配符</span>
复制代码
简朴示例:

复制代码代码如下:
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>



在以上基础上我们做一点修改,我们在子页面给出高宽按钮,用于告诉父窗口怎么改变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>



最后为我们的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 已经关闭

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()
};

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作