成都创新互联网站制作重庆分公司

HTML5通信API指的是哪些

本篇文章给大家分享的是有关HTML5通信API指的是哪些,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

成都创新互联2013年开创至今,是专业互联网技术服务公司,拥有项目做网站、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元黄岩做网站,已为上家服务,为黄岩各地企业和个人服务,联系电话:028-86922220

前言

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

跨文档消息传输功能,可以在不同网页文档,不同端口(跨域情况下)进行消息传递。

使用web sockets api 可以让客户端与服务器端通过socket端口传递数据,这样便可以使用数据推送技术。

跨文档消息传输

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

首先要想从其他窗口接受发过来的消息需要对其窗口对象进行监听:

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

使用windows对象的postMessage方法向其他窗口发生信息:

otherWindow.postMessage(message, targetOrigin)第一个参数为发送文本,也可以是js对象(json)第二个参数为接收消息对象窗口的URL,可以使用通配符

简单示例:

代码如下:


post信息



   
   
   


   
   
   
   


   


HTML5通信API指的是哪些

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

代码如下:


父层代码



   
   
   


   
   
   
   


   


代码如下:


子层代码



   
   
   


   


   

   
   

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数据便可将任何形式数据传往服务器:

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

以上就是HTML5通信API指的是哪些,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


分享名称:HTML5通信API指的是哪些
URL地址:http://cxhlcq.com/article/igiigg.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部