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 ...
随机推荐
- python中的import一个注意事项
import math def foo(): import math x = math.pi # 如果math在下面import会出错,因为import是个写的过程(添加到sys.modules中), ...
- js代理模式
代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对象.替身对象对请求做出一些处理之后,再把请求转交给本体对象. 代理模 ...
- 按键(ESC ,F1,F2等)——wpf的命令处理方法
WPF窗体的命令绑定 方法一:使用代码 <WpfUI:View.CommandBindings> <CommandBinding Command="Help" ...
- Gridview中Datakeys 通过主键取得各列的值。
首先在初始化Gridview时候定义主键的数组. GridViewTeacherStudent.DataKeyNames=new string[] {"courseId",&quo ...
- java基础篇 -- 导出excel表格数据
本篇文章基于java把数据库中的数据以Excel的方式导出,欢迎各位大神吐槽: 1.基于maven jar包引入如下: <dependency> <groupId>net.so ...
- 51nod 1428 贪心
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1428 1428 活动安排问题 基准时间限制:1 秒 空间限制:13107 ...
- 【VS2013生成DirectX Tutorials时遇到的错误】无法解析的外部符号 _D3D10CreateDeviceAndSwapChain@32
本文为大便一箩筐的原创内容,转载请注明出处,谢谢:http://www.cnblogs.com/dbylk/p/3696472.html 今天尝试编译DirectX10中的一个Turorials时, ...
- vue-cli项目中如何使用锚点
两种方式: 1.使用vue-router实现锚点功能(利用html5的history模式,vue-router的滚动行为) import Vue from 'vue' import VueRouter ...
- 【JAVA XXE攻击】微信支付官方回应XML外部实体注入漏洞
官方回应连接:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=23_5 其中明确指出了代码修改的地方. 然后看到此文档后,我就改公司项 ...
- BlockingQueue实现阻塞队列
import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue; public cl ...