ブラウザの複数のタブページ間の通信

一、WebSocket

WebSocketは、ブラウザとサーバの間で制限されない双方向通信のチャネルを確立するHTML 5の新しいプロトコルです.例えば、サーバはいつでもブラウザにメッセージを送信することができます.

WebSocketはTCPプロトコル上に確立されている.TCPプロトコル自体はフルデュプレクス通信を実現しているが,HTTPプロトコルの要求−応答機構はフルデュプレクス通信を制限している.WebSocket接続が確立されると、次の通信はHTTPプロトコルを使用せず、直接データを送信します.

安全なWebSocket接続メカニズムはHTTPSと似ています.まず、ブラウザ用wss://xxxWebSocket接続を作成すると、まずHTTPSで安全な接続が作成され、その後、このHTTPS接続はWebSocket接続にアップグレードされ、下位通信は依然として安全なSSL/TLSプロトコルを実行します.

WebSocket接続はブラウザによって開始されなければならない.特徴:(1)TCPプロトコルに基づいて構築され、サーバ側の実現が容易である.(2)HTTPプロトコルとの互換性が良好である.デフォルトポートも80と443であり、握手段階ではHTTPプロトコルを採用しているため、握手時にマスクしにくく、各種HTTPプロキシサーバを通過することができる.(3)データフォーマットが比較的軽量で、性能コストが小さく、通信が効率的である.(4)テキストを送信してもよいし,バイナリデータを送信してもよい.(5)同源制限がなく,クライアントは任意のサーバと通信できる.(6)プロトコル識別子はws(暗号化されている場合はwss)であり,サーバURLはURLである.
二、SharedWorker
SharedWorkerはHTML 5に新しく導入された、共有可能なWeb Workerです.メッセージング:通常のWeb Workerはonmessageを介してイベントとpostMessageをリスニングしてデータを転送します.

//         worker        
let worker = new Worker('workers.js');
...
button.addEventListener('click', function () {
    //  worker    
    worker.postMessage('start');
});
worker.onmessage = function (messageEvent) {
    alert('    ，   ' + messageEvent.data + '，  ' + (new Date() - time) + 'ms'); 
}
...
//  
worker.terminate();

shareWorkerでは、共有スレッドを作成できます.つまり、異なるページで同じShareWorkderを使用し、すべてのページが閉じられるとスレッドが終了します.メッセージング:shareWorker.port転送、使用方法は普通のworkerと似ています

let worker = new SharedWorker('sharedworkers.js');
//   strat  
worker.port.postMessage('start');
//         
worker.port.onmessage = function (val) {
    timeDom.innerHTML = val.data
}

メッセージイベントをaddEventListenerでバインドする場合(.onmessageではなく)手動でportを呼び出す必要がある.start()メソッド.

worker.port.start();
worker.port.addEventListener('message', function(e) {
    // ... 
});

新しいshareWorkerへの接続はonconnectイベントで取得でき、connectのパラメータのportsフィールドでMessageEventを取得できます.マンモスとpostMessageは私たちのデータを処理し、伝達しました.

// sharedworkers.js
onconnect = function (e) {
    //    e.ports    port
    var port = e.ports[0];

    // port.onmessage         
    port.onmessage = function () {
        // port.postMessage         
        port.postMessage(a++)
    }
}

注意:SharedWorkerは複数のwindowで共通に使用できますが、これらのラベルページが同じソースであることを保証する必要があります.
三、localstorage
localstorageはブラウザの複数のラベルが共通する記憶領域であるため、マルチラベル間の通信を実現するために使用することができる(ps:sessionはセッションレベルの記憶領域であり、各ラベルページは個別である).

//  A    
function sendMsg(text) {
    window.localStorage.setItem('msg',text);
}

//  B    
window.addEventListener('storage', function (evt) {
    if(evt.key==='msg')
       console.log(evt.newValue);
});

onstorageおよびstorageイベントは、いずれも現在のページではないlocalStorageを変更した場合にトリガーされ、現在のページ変更localStorageではリスニング関数はトリガーされません.次に、元のデータの値を変更するとトリガーされます.例えば、keyがa値bのlocalStorageを持っていた場合、localStorageを実行します.setItem('a','b')コードは、同様にリスニング関数をトリガーしません.