HTML的通信功能

最新推荐文章于 2023-07-31 15:11:59 发布

团子Y

最新推荐文章于 2023-07-31 15:11:59 发布

阅读量671

点赞数

分类专栏： HTML 文章标签： websocket

本文链接：https://blog.csdn.net/qq_43778935/article/details/114330346

版权

本文深入探讨HTML的通信功能，包括跨文档消息传输、WebSocket API、Server-Sent Events API和Broadcast Channel API。WebSocket实现双向非HTTP通信，Server-Sent Events提供单向推送，Broadcast Channel则支持同源页面间的通信。各API的典型代码示例和应用场景进行了简要介绍。

摘要由CSDN通过智能技术生成

本文主要介绍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上，不再需要轮询客户端请求。
主要代码实现：