Open cqupt-yifanwu opened 7 years ago
HTML5中提供了在网页文档之间互相接收与发送信息的功能。使用这个功能只要获取到网页所在窗口对象的实例,无论是否同源都可以实现跨域通信。经常用于不同frame之间的通信。
window.addEventListener("message", function () { ... }, false);
otherWindow.postMessage(message, targetOrigin) <!-- 该方法使用两个参数:第一个参数为所发送的消息文本 ,但是也可以是任何javascript对象(通过JSON转换为 文本对象);第二个参数为接受消息的对象窗口的URL地 址。可以在URL地址字符串中使用通配符“*”指定全部地 址,otherWindow为要发送窗口的对象引用,可以用 window.open返回该对象,或者通过对window.frames数 组指定序号(index)或名字的方式来返回单个frame所 属的窗口对象。 -->
window.addEventListener("message", function (e) { if (e.origin != "http://XXX") { return false; } alert(e.data); e.source.postMessage("您好,我已经收到",e.origin) })
通信通道机制提供了一种在多个源之间通信的方法,这些源之间通过端口(port)进行通信,从一个端口中发出的数据将被另一个端口接收。消息通道提供了一个直接,双向浏览上下文之间的通信手段。跟跨文档通信一样,DOM不直接暴露。取而代之,管道每端为端口,数据从一个端口发送,另一个变成输入(反之亦然)。
当需要在iframe元素中的子页面中实现通信机制时,我们要创建一个MessageChannel对象,我们实际上创造了两个相互关联的端口。一个端口保持开放,为发送端。另外一个被转发到其他浏览上下文(另一个iframe元素的子页面中)。每一个端口就是一个MessagePort对象,包含3个可用方法:
webSockets 是HTML5提供的在web应用程序中客户端与服务器端之间进行非HTTP请求的通信机制。它实现了用HTTP不容易实现的服务端数据推送等智能通信技术。浏览器通过 JavaScript向服务器发出建立WebSocket连接的请求,建立一个非HTTP的双向链接,这个链接是实时的,也是永久的,除非被显示关闭,连接建立以后,客户端和服务器通过TCP连接直接交换数据。WebSocket连接本质上是一个TCP连接。另外,在WebSockets中同样可以使用跨域通信技术。在使用跨域技术的时候应该确保客户端与服务器是互相信任的。另外:WebSocket在数据传输的稳定性和数据传输量的大小方面,具有很大的性能优势。
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) { // 通信结束时的处理 }
从字面意思来看,是只由服务器发送一些事件,由客户端接收。从“服务端主动发送”这一点上来看该API与WebSockets API有些相似之处,但是该API与WebSockets API不同的是,该API实现的是一种从服务器端发送到客户端的单项通信机制,而WebSockets API实现的是双向通信机制。在Sever-Sent Event API 中,服务端主动发送的事件有些类似于Javascript脚本代码中的事件,但是不同的是,在客户端不能控制服务端何时发送这些事件,以及服务端在这些事件中携带哪些数据。
sse 不支持跨域
跨文档消息传输
HTML5中提供了在网页文档之间互相接收与发送信息的功能。使用这个功能只要获取到网页所在窗口对象的实例,无论是否同源都可以实现跨域通信。经常用于不同frame之间的通信。
通信通道
通道通信的基本概念
通信通道机制提供了一种在多个源之间通信的方法,这些源之间通过端口(port)进行通信,从一个端口中发出的数据将被另一个端口接收。消息通道提供了一个直接,双向浏览上下文之间的通信手段。跟跨文档通信一样,DOM不直接暴露。取而代之,管道每端为端口,数据从一个端口发送,另一个变成输入(反之亦然)。
MessageChannel对象与MessagePort对象
当需要在iframe元素中的子页面中实现通信机制时,我们要创建一个MessageChannel对象,我们实际上创造了两个相互关联的端口。一个端口保持开放,为发送端。另外一个被转发到其他浏览上下文(另一个iframe元素的子页面中)。每一个端口就是一个MessagePort对象,包含3个可用方法:
WebSockets
webSockets 是HTML5提供的在web应用程序中客户端与服务器端之间进行非HTTP请求的通信机制。它实现了用HTTP不容易实现的服务端数据推送等智能通信技术。浏览器通过 JavaScript向服务器发出建立WebSocket连接的请求,建立一个非HTTP的双向链接,这个链接是实时的,也是永久的,除非被显示关闭,连接建立以后,客户端和服务器通过TCP连接直接交换数据。WebSocket连接本质上是一个TCP连接。另外,在WebSockets中同样可以使用跨域通信技术。在使用跨域技术的时候应该确保客户端与服务器是互相信任的。另外:WebSocket在数据传输的稳定性和数据传输量的大小方面,具有很大的性能优势。
webSockts API
处理事件
Server-Sent Events API
从字面意思来看,是只由服务器发送一些事件,由客户端接收。从“服务端主动发送”这一点上来看该API与WebSockets API有些相似之处,但是该API与WebSockets API不同的是,该API实现的是一种从服务器端发送到客户端的单项通信机制,而WebSockets API实现的是双向通信机制。在Sever-Sent Event API 中,服务端主动发送的事件有些类似于Javascript脚本代码中的事件,但是不同的是,在客户端不能控制服务端何时发送这些事件,以及服务端在这些事件中携带哪些数据。