HTML5 – Web 消息传送

随着互联网和移动设备的普及，Web 应用程序越来越流行。作为 Web 应用程序的核心技术之一，HTML5 为我们提供了许多新的特性和强大的 API，其中包括 Web 消息传送 API。

Web 消息传送 API 可以实现多个页面或应用程序之间的通信。这种通信是基于浏览器主机和端口之间的通信，而不是基于服务器和客户端之间的通信。这种通信模式称为“发布/订阅模式”，也就是说，应用程序可以在不直接相互通信的情况下，通过发布和订阅消息来相互通信。

使用 Web 消息传送 API

使用 Web 消息传送 API，首先需要创建一个叫做消息通道（MessageChannel）的对象。该对象包含两个 MessagePort 对象，分别用于发送和接收消息。这两个对象可以通过调用消息通道对象的 port1 和 port2 属性来获得。

// 创建消息通道对象
var channel = new MessageChannel();

// 获取消息发送端口对象
var port1 = channel.port1;

// 获取消息接收端口对象
var port2 = channel.port2;

然后，我们可以在其中一个页面或应用程序中发布一条消息，让其他页面或应用程序订阅该消息。

// 发布消息
port1.postMessage('Hello, world!');

需要注意的是，发布的消息可以是任意 JavaScript 对象，而不仅仅是字符串类型。

我们可以在其他页面或应用程序中监听（或订阅）该消息，并在收到消息时做出相应的响应。

// 监听消息
port2.onmessage = function(event) {
  console.log(event.data); // 'Hello, world!'
};

跨源消息传送

Web 消息传送 API 还支持跨源消息传送，这使得我们可以在不同的域名或协议下的页面之间进行通信。

为了支持跨源消息传送，我们必须使用 postMessage() 方法来发送消息，并将接收窗口的 origin 当做参数传递。接收窗口在收到消息时，可以通过 event 对象的 origin 属性来验证消息来源是否符合自身的要求。

// 向不同的域名或协议页面发送消息
port1.postMessage('Hello, world!', 'https://example.com');

// 接收消息，并验证消息来源
window.onmessage = function(event) {
  if (event.origin === 'https://example.com') {
    console.log(event.data); // 'Hello, world!'
  }
};

需要注意的是，跨源通信是一种潜在的安全漏洞。在使用 Web 消息传送 API 进行跨源通信时，应该非常小心，并严格验证消息来源。

结论

Web 消息传送 API 提供了一种简单而强大的方式，使得 Web 应用程序可以相互通信。使用 Web 消息传送 API，我们可以在不同的页面或应用程序之间发布和订阅消息，实现了双向通信的目的。此外，Web 消息传送 API 还支持跨源通信，使得我们可以在不同的域名或协议下实现跨页面通信。但是，在使用 Web 消息传送 API 进行跨源通信时，需要非常小心，并严格验证消息来源。