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 ...
随机推荐
- 使用shell统计字符串出现的次数,并从大到小进行排序显示
- 关于 Java正则表达式中的Possessive数量修饰词的理解
关于 Java正则表达式中的Possessive数量修饰词的理解 正则表达式对于数量限定符如 ?, + , *, {n, m} 的匹配默认是贪婪模式,比如: a.*b 匹配 acbab 的结果是 ...
- python 之CORS,VUE+rest_framework示例
一.跨域 浏览器的同源策略 ----对ajax请求进行阻拦 ----对href属性读不阻拦 xhr=new XML ...
- tp5 数据库Db增删改操作
添加数据insert $data = [ 'name_cn' => '张三', 'name_en' => 'jack', ]; $res = Db::name('style')->i ...
- Angular中文api
Angular中文api:http://docs.ngnice.com/api
- PHP 图片操作(按照指定尺寸压缩,按照比例裁剪)
提供二个常用的图片处理方法: 1.按照指定的尺寸压缩图片 /** * 按照指定的尺寸压缩图片 * @param $source_path 原图路径 * @param $target_path 保存路径 ...
- 计时器(C#)
很多项目要用到计时器,我就自己包装了一个,倒计时还没加,有时间再加上吧.持续更新 using UnityEngine; using UnityEngine.UI; /// <summary> ...
- Java 框架
Netty: Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 也就是说,Netty ...
- 将【恢复和重新安装Windows】的介质指定到硬盘
步骤: 1. 双击Win8.1/Win10安装镜像,将它载入到虚拟光驱(例子被载入到i:盘) 2. 将Win8.1/Win10安装镜像中sources\install.wim文件复制到一个非系统盘里. ...
- mybatis报Error updating database. Cause: java.lang.IllegalArgumentException: invalid comparison: java.util.Date and java.lang.String
mybatis 3.3.0中对于时间参数进行比较时的一个bug. 如果拿传入的时间类型参数与空字符串''进行对比判断则会引发异常. 所以在上面的代码中去该该判断, 只保留非空判断就正常了 <if ...