HTML5通信

[cqupt-yifanwu]

跨文档消息传输

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脚本代码中的事件，但是不同的是，在客户端不能控制服务端何时发送这些事件，以及服务端在这些事件中携带哪些数据。

[cqupt-yifanwu]

sse 不支持跨域