本文主要介绍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事件。
个人理解总结,不对的地方多谢指正。
后续更新各个示例。