1. WebSocket

GitHub - socketio/socket.io: Realtime application framework (Node.JS server)

GitHub - websockets/ws: Simple to use, blazing fast and thoroughly tested WebSocket client and server for Node.js

var ws = new WebSocket("ws://localhost:3000/")
ws.onopen = function (event) {
  // 或者把此方法注册到其他事件中，即可与其他服务器通信
  ws.send({now : Date.now()}); // 通过服务器中转消息
};
ws.onmessage = function (event) {
  // 消费消息
  console.log(event.data);
}

2. 本地存储

// 本窗口的设值代码
localStorage.setItem('aaa', (Math.random()*10).toString())

// 其他窗口监听storage事件
window.addEventListener("storage", function (e) {
  console.log(e)
  console.log(e.newValue)
})

3. postMessage

otherWindow.postMessage(message, targetOrigin, [transfer]);

● otherWindow: 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames

● message: 将要发送到其他 window 的数据

● targetOrigin: 通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI

● transfer: 是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。【在下面的MessageChannel例子中有用到】

// 发送消息
var popup = window.open(...popup details...);
// 假设当前页面没有改变 location，这条语句会成功添加 message 到发送队列中去（targetOrigin 设置对了）
popup.postMessage("hello there!", "http://example.com");



// 接收消息
function receiveMessage(event)
{
  // 我们能相信信息的发送者吗？(也许这个发送者和我们最初打开的不是同一个页面).
  if (event.origin !== "http://example.com")
    return;

  // event.source 是我们通过 window.open 打开的弹出页面 popup
  // event.data 是 popup 发送给当前页面的消息 "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);

4. cookie + setInterval 【差】

在页面A设置一个使用 setInterval 定时器不断刷新，检查 Cookies 的值是否发生变化，如果变化就进行刷新的操作。

5. SharedWorker

HTML5 中的 Web Worker 的一种：

● Dedicated Worker直接使用new Worker()即可创建，这种webworker是当前页面专有的

● SharedWorker可以被多个window、标签页、iframe共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)

● Service Worker 基本上是作为代理服务器，位于 web 应用程序、浏览器和网络（如果可用）之间。它们的目的是（除开其他方面）创建有效的离线体验、拦截网络请求，以及根据网络是否可用采取合适的行动并更新驻留在服务器上的资源。它们还将允许访问推送通知和后台同步 API

GitHub - mdn/simple-shared-worker: A simple demo to show shared worker basics.

6. MessageChannel

var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}

github.com/mdn/dom-exa…

Channel messaging demo

7. Broadcast Channel

// 发送消息
const bc = new BroadcastChannel("channel-BroadcastChannel");
bc.postMessage('Hello, BroadcastChannel!');

// 接收消息
const bc = new BroadcastChannel("channel-BroadcastChannel");
bc.addEventListener("message", function(ev) {
    console.log(ev.data);
});

跨浏览器窗口通信