HTML5通信API

跨文档消息传输的基本知识

  HTML5提供了在网页文档之间互相接受与发送信息的功能，只要获取到网页所在窗口对象的实例，不仅同源（域+端口号）的Web网页之间可以互相通信，甚至可以实现跨域通信。
首先，要想接受从其他窗口那里发过来的消息，就必须对窗口对象的message事件进行监视，代码如下所示：

window.addEventListener("message",function(){...},false);

使用window对象的postMessage方法向其他窗口发送消息，该方法的定义如下所示 ：

otherWindow.postMessage(message,targetOrign);

该方法使用两个参数，第一个参数为所发送的消息文本，但也可以是任何JavaScript对象（通过JSON转换对象为文本）;第二个参数为接收消息的对象窗口的URL地址。

Web Sockets通信的基本知识

WebSocket API是HTML5提供的在Web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。它实现了用HTTP不容易实现的服务器端的数据推送等智能通信技术。

使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接可以是实时的，也是永久的，除非被显示关闭。这意味着当服务器想向客户端发送数据时，可以立即将数据推送到客户端的浏览器中，无需重新建立连接。只要客户端有一个被打开的socket(套接字)并且与服务器建立了连接，服务器就可以把数据推送到这个socket上，服务器不再需要轮询客户端的请求，从被动变成了主动。

Web Sockets的API本身非常简单。将URL字符串作为参数，然后调用WebSockets对象的构造器来建立与服务器之间的通信连接，如下所示：

var webSocket=new WebSocket("ws://localhost:8080/socket");

URL字符串必须以”ws”或”wss”（加密通信时）文字作为开头。这个URL字符串被设定好之后，在JavaScript脚本中可以通过访问WebSocket对象的url属性来重新获取。
通信连接建立好之后，就可以进行客户端与服务器端的双向通信了。使用WebSocket对象的send方法对服务器发送数据，只能发送文本数据，但是可以使用JSON对象把任何JavaScript对象转换成文本数据后进行发送。使用send方法的代码如下所示。

webSocket.send("data");

通过获取onmessage事件句柄来接收服务器传过来的数据，如下所示。

webSocket.onmessage=function(event){    var data=event.data;    ...}

通过获取onopen事件句柄来监听socket的打开事件，如下所示，

webSocket.onopen=function(){    //开始通信时的处理}

通过获取onclose事件句柄来监听socket的关闭事件，如下所示

webSocket.onclose=function(event){//通信结束时的处理

};

通过close方法来关闭socket，切断通信连接，如下所示。

webSocket.close();

另外，可以通过读取readyState的属性值来获取WebSocket对象的状态，readyState属性存在以下几种属性值：
CONNECTING(数字值为0），表示正在连接。
OPEN(数字值1），表示已建立连接。
CLOSING(数字值为2），表示正在关闭连接。
CLOSED(数字值为3）表示已关闭连接。