HTML5通信
跨文档消息传输
HTML5中提供了在网页文档之间互相接收与发送信息的功能。使用这个功能只要获取到网页所在窗口对象的实例,无论是否同源都可以实现跨域通信。经常用于不同frame之间的通信。
- 当我们想要接受从其他的窗口发过来的消息,就必须对窗口对象的message事件进行监视,代码如下
window.addEventListener("message", function () { ... }, false);
- 使用window对象的postMessage方法向其他窗口发送消息,该方法定义如下:
otherWindow.postMessage(message, targetOrigin)
<!--
该方法使用两个参数:第一个参数为所发送的消息文本
,但是也可以是任何javascript对象(通过JSON转换为
文本对象);第二个参数为接受消息的对象窗口的URL地
址。可以在URL地址字符串中使用通配符“*”指定全部地
址,otherWindow为要发送窗口的对象引用,可以用
window.open返回该对象,或者通过对window.frames数
组指定序号(index)或名字的方式来返回单个frame所
属的窗口对象。
-->
- 通过访问message事件的origin属性可以获取消息的发送源,在使用中最好对发送源进行检测
- 通过访问message事件的data属性,可以获取消息内容(可以是任何javascript对象)
- 使用postMessage方法发送消息,通过访问message事件的source属性可以获取消息发送源的窗口对象。
window.addEventListener("message", function (e) {
if (e.origin != "http://XXX") {
return false;
}
alert(e.data);
e.source.postMessage("您好,我已经收到",e.origin)
})
通信通道
通道通信的基本概念
通信通道机制提供了一种在多个源之间通信的方法,这些源之间通过端口(port)进行通信,从一个端口中发出的数据将被另一个端口接收。消息通道提供了一个直接,双向浏览上下文之间的通信手段。跟跨文档通信一样,DOM不直接暴露。取而代之,管道每端为端口,数据从一个端口发送,另一个变成输入(反之亦然)。
MessageChannel对象与MessagePort对象
当需要在iframe元素中的子页面中实现通信机制时,我们要创建一个MessageChannel对象,我们实际上创造了两个相互关联的端口。一个端口保持开放,为发送端。另外一个被转发到其他浏览上下文(另一个iframe元素的子页面中)。每一个端口就是一个MessagePort对象,包含3个可用方法:
- postMessage:用于向通道发送信息
- start:用于激活端口,开始监听端口是否接收到消息
- close:用于关闭和停用
- 每个Message对象都具有一个onmessage事件,当端口收到消息时触发该事件。
WebSockets
webSockets 是HTML5提供的在web应用程序中客户端与服务器端之间进行非HTTP请求的通信机制。它实现了用HTTP不容易实现的服务端数据推送等智能通信技术。浏览器通过 JavaScript向服务器发出建立WebSocket连接的请求,建立一个非HTTP的双向链接,这个链接是实时的,也是永久的,除非被显示关闭,连接建立以后,客户端和服务器通过TCP连接直接交换数据。WebSocket连接本质上是一个TCP连接。另外,在WebSockets中同样可以使用跨域通信技术。在使用跨域技术的时候应该确保客户端与服务器是互相信任的。另外:WebSocket在数据传输的稳定性和数据传输量的大小方面,具有很大的性能优势。
webSockts API
- 建立通信链接
var webSockets = new WebSockets("ws://localhost:8005/socket");
<!--
url 字符串必须以"ws"或者"wss"(加密通信)文字作为开头。这个url呗设定好之后,在javascript中可以通过访问webSockets对象的url属性来获取
-->
- 发送数据
webSockets.send("data");
<!--
这个方法只能发送文本数据,但是我们可以将任何类型的数据转换为JSON对象再进行发送
-->
- 处理事件
// 通过获取onmessage事件句柄来接收服务器传过来的数据
webSocket.onmessage = function (e) {
var data = event.data;
}
// 通过onopen事件句柄监听socket打开事件
webSocket.onopen = function () {
// 开始通信时的处理
}
// 通过onclose事件句柄来监听socket的关闭事件
webSocket.onclose = function (event) {
// 通信结束时的处理
}
Server-Sent Events API
从字面意思来看,是只由服务器发送一些事件,由客户端接收。从“服务端主动发送”这一点上来看该API与WebSockets API有些相似之处,但是该API与WebSockets API不同的是,该API实现的是一种从服务器端发送到客户端的单项通信机制,而WebSockets API实现的是双向通信机制。在Sever-Sent Event API 中,服务端主动发送的事件有些类似于Javascript脚本代码中的事件,但是不同的是,在客户端不能控制服务端何时发送这些事件,以及服务端在这些事件中携带哪些数据。
HTML5通信的更多相关文章
- 读书笔记---HTML5实战 MARCO CASARIO(后六章)
画布叠加:用CSS的z-index和position; 第八章 HTML5通信API ①XMLHTTPREQUEST是JS中用于服务器交互的API; ②用HTML5的POSTMESSAGE API实现 ...
- 学习 HTML5-目录
1.学习 HTML5-页面结构 2.HTML5标记 3.HTML5机构化语义元素 4.HTML5表单 5.HTML5媒体元素:Audio和Video 6.HTML5绘图API 7.HTML5 Canv ...
- html5test
html5test Github https://github.com/NielsLeenheer/html5test 主程序是 scripts/7/engine.js 目前看到的分类大部分是基于判断 ...
- WebViewJavascriptBridge测试示例
android或ios:app与html5通信解决方案 下面只是前端示例代码,后端代码请参考: git https://github.com/marcuswestin/WebViewJavascrip ...
- 基于HTML5的Web跨设备超声波通信方案
前言:Chirp在iPhone上掀起了有声传输文件的序幕,我们再也不需要彩信.蓝牙配对.IM来传送数据.它通过“叽叽喳喳”的小鸟叫声来分享数据,简单有趣,而且可以快速的实现一对多的分享. 此外支付宝曾 ...
- HTML5 Socket通信
HTML5 Socket通信使用起来也是相当不从的,先将部分JS代码与大家分享: var socket; function connect() { var host = "ws://&quo ...
- Html5 跨域通信
H5 跨域通信: 在主页面中通过iframe嵌入外部页面,通过iframe的window对象postMessage方法向iframe页面传递消息. 1 <!DOCTYPE html> 2 ...
- HTML5之通信和多线程
HTML通信 跨文档消息传输 HTML5提供了在网页文档之间相互接收和发送信息的功能,使用这个功能,只要获取到网页所在窗口对象的实例,不仅同源(域+端口)的网页可以相互通信,甚至可以实现跨域通信.涉及 ...
- HTML5 WebSocket和后端C#通信
1.使用 HTML5 开发离线应用 http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/ 2.利用html 5 websocket ...
随机推荐
- android 修改源码framework后如何编译【转】
本文转载自:https://blog.csdn.net/fuchengbo000/article/details/43193801 1.如果在framework/base/core/res/res下添 ...
- [cqoi2012]交换棋子
2668: [cqoi2012]交换棋子 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 1334 Solved: 518[Submit][Stat ...
- 泛型学习第一天:List与IList的区别 (三)
已经有很多人讨论过IList和List的区别,恩,我也赞同其中的一些观点,其实他们二者也是有优有劣的,看你着重用在哪个方面,先贴一下我赞同的意见,基本上也都是网友们总结的. 首先IList 泛型接口是 ...
- https阿里云证书购买与apache环境配置
1.在阿里云云盾安全->CA证书购买 2.下载证书解压文件,一般有四个文件 3.在/etc/apache2 下创建一个文件夹cert 放入以上四个文件(路径可自己任意选择) 4.$sudo a ...
- 简学Python第五章__模块介绍,常用内置模块
Python第五章__模块介绍,常用内置模块 欢迎加入Linux_Python学习群 群号:478616847 目录: 模块与导入介绍 包的介绍 time &datetime模块 rando ...
- 在python3.x上安装suds 并访问webservice
suds...py3很乱.. 一开始直接使用命令行:pip install suds安装,结果报错ImportError: No module named client,然后就自然的pip insta ...
- Python中的exec、eval的区别
通过exec可以执行动态Python代码,类似Javascript的eval功能: 而Python中的eval函数可以计算Python表达式,并返回结果: (exec不返回结果,print(eval( ...
- pandas读取Excel
time31 = pd.read_excel('F:/save_file/3问出车表.xlsx', sheetname='Sheet1') # 读取‘3问出车表.xlsx’中的Sheet1表单, ti ...
- ActiveMQ 消息存储
本章重点 ActiveMQ 中,队列和主题里的消息是怎么存储的 ActiveMQ 提供的四种消息存储形式 ActiveMQ 是怎么为消费者缓存消息的 使用订阅恢复模式,怎么控制消息缓存 简介 JMS ...
- The tag handler class for "c:set"(org.apache.taglibs.standard.tag.rt.core.UrlTag)was not found on the Java Build Path
1.源码: <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> < ...