HTML的通信功能

本文主要介绍HTML与通信相关的四个功能：

• 跨文档消息传输功能
• WebSocket API
• Server-Sent Events API
• Broadcast Channel API

1。跨文档消息传输
这种类型的通信比如：主页面与主页面中的iframe子页面之间的互相通信。
HTML 5 中提供了网页文档之间相互接受与发送信息的功能，只要获取到网页所在窗口对象的实例，不仅同源的web网页之间可以互相通信，甚至可以实现跨域通信。（源即域名+端口号）
关键实现代码：

// 对窗口对象的message事件进行监视，接受从其他窗口发来的消息
window.addEventListener("message", function () {}, false);
// 第一个参数为监听对象，第二个参数为监听对象变化后的处理函数

// 向其他窗口发送消息
otherWindow.postMessage(message, targetion, [transfer]);
// 第一个参数为发送的消息文本，第二个参数为目标url地址，第三个是可选参数，是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权

2。WebSocket API
主要特点：实现客户端与服务端的非HTTP双向通信。客户端通过套接字与服务器建立连接，服务器就可以把数据推送到这个socket上，不再需要轮询客户端请求。
主要代码实现：

// 调用websocket对象构造器建立与服务器之间的通信连接
var websocket = new WebSocket(url);
// url为参数，必须以ws或wss作为开头，如“ws://localhost:8080”

// 向服务器发送数据
websocket.send("data");

// 接收服务器传来的数据
websocket.onmessage = function (event) {
   var data = event.data;
   ……
}

// 监听socket的打开事件
websocket.onopen=function(event)
{
……
}

// 监听socket的关闭事件
websocket.onclose=function(event)
{
……
}

// 关闭socket，切断通信连接
websocket.close();

3。Server-Sent Events API
主要特征：从服务器端发送到客户端的单向通信机制。
主要代码实现：

// 创建EventSource对象
var source=new EventSource("data");
// data参数指定事件来源，为一个url地址。
// EventSource对象创建完成后，客户端立即对该url地址所发送的事件就行监听。

// 指定客户端接收到服务端发送过来的事件后进行的处理
source.onmessage=function(event)
{
……
}

注意：可以通过event.data获取服务端发来的数据，只是服务端只能发送字符串，所以想让服务端发送对象时要以JSON格式字符串发送，接收后再还原为JSON对象。

4。BroadcastChannel API
主要特点：用于再浏览器上下文通信的简单API，只允许同源通信。消息被派发送给一个指定通道，可以被派发到该通道的所有侦听器。
主要实现代码：

// 连接通道，构造BroadcastChannel对象
const channel=new BroadcastChannel('name');
// 参数为通道名

// 向通道发送消息
channel.postMessage('hello!')

// 侦听来自通道的消息
channel.onmessage = function(event)
{
……处理消息……
}
// event.data为消息内容

//关闭通道
channel.close();

注意：通道不会把消息广播给自己，所以如果在同一页面中书写了postMessage方法向某通道发送消息并监听通道的message事件，本页面中使用postMessage方法发送消息并不会引发message事件。

个人理解总结，不对的地方多谢指正。
后续更新各个示例。