學(xué)習(xí)筆記-瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通訊
Redux vuex 這個(gè)是單頁面應(yīng)用里跨頁面狀態(tài)管理 多頁應(yīng)用 跨頁面數(shù)據(jù)傳遞
本題主要考察多頁應(yīng)用中各個(gè)頁簽之間數(shù)據(jù)交互的技術(shù)手段。
實(shí)現(xiàn)多頁通訊主要有利用
- 瀏覽器數(shù)據(jù)存儲(chǔ)方式：瀏覽器數(shù)據(jù)存儲(chǔ)的方式主要用本地存儲(chǔ)方式解決，即調(diào)用localStorage踪少、Cookie等本地存儲(chǔ)方式。
- 服務(wù)器方式：主要使用websocket技術(shù)使多頁簽都監(jiān)聽服務(wù)器推送事件來獲得其他頁簽發(fā)送的數(shù)據(jù)埃难。
瀏覽器存儲(chǔ)：
第一種：localStorage：
在一個(gè)標(biāo)簽頁里面使用localStorage.setItem(key,value)添加(修改、刪除)內(nèi)容;在另一個(gè)標(biāo)簽頁里面監(jiān)聽storage事件。即可得到localstorge存儲(chǔ)的值熊杨，實(shí)現(xiàn)不同標(biāo)簽頁之間的通信沐兵。
// 添加
localStorage.setItem(key,value)
// 刪除
localStorage.removeItem(key,value)
// 添加監(jiān)聽 storage 的變化
window.onload = function () {
window.addEventListener('storage', function (event) {
// event 事件對(duì)象包含 domain newValue oldValue key
console.log(event.key + '=' + event.newValue);
})
}
第二種：cookie+setInterval：
將要傳遞的信息存儲(chǔ)在cookie中别垮，每隔一定時(shí)間讀取cookie信息， 即可隨時(shí)獲取要傳遞的信息扎谎。
在A頁面將需要傳遞的消息存儲(chǔ)在cookie當(dāng)中
在B頁面設(shè)置setInterval,以一定的時(shí)間間隔去讀取cookie的值碳想。(不停地問cookie)
// 設(shè)置 cookie
document.cookie = "name=" + name;
// 獲取 cookie
function getCookie(key) {
const _string = '{"';
_string += document.cookie.replace(/;\s+/gim, '","').replace(/=/gim, '":"');
_string += '"}'[key];
return JSON.parse(_string);
}
監(jiān)聽服務(wù)器事件
第一種：websocket通訊
WebSocket 是全雙工（full-duplex）通信自然可以實(shí)現(xiàn)多個(gè)標(biāo)簽頁之間的通信（服務(wù)器可以主動(dòng)發(fā)數(shù)據(jù)給瀏覽器；瀏覽器也可以主動(dòng)發(fā)數(shù)據(jù)給服務(wù)器）毁靶。
WebSocket 是HTML 5新增的協(xié)議胧奔，它的目的是在瀏覽器和服務(wù)器之間建立一個(gè)不受限的雙向通信的通道，比如說预吆，服務(wù)器可以在任意時(shí)刻發(fā)送消息給瀏覽器龙填。
為什么傳統(tǒng)的HTTP協(xié)議不能做到WebSocket實(shí)現(xiàn)的功能?這是因?yàn)镠TTP協(xié)議是一一個(gè)請(qǐng)求-響應(yīng)協(xié)議，請(qǐng)求必須先由瀏覽器發(fā)給服務(wù)器啡浊，服務(wù)器才能響應(yīng)這個(gè)請(qǐng)求觅够，再把數(shù)據(jù)發(fā)送給瀏覽器。
也有人說巷嚣，HTTP協(xié)議其實(shí)也能實(shí)現(xiàn)啊喘先，比如用輪詢或者Comet。這個(gè)機(jī)制的缺點(diǎn)一是實(shí)時(shí)性不夠, 二是頻繁的請(qǐng)求會(huì)給服務(wù)器帶來極大的壓力廷粒。Comet本質(zhì)上也是輪詢窘拯，但是在沒有消息的情況下，服務(wù)器先拖一段時(shí)間坝茎， 等到有消息了再回復(fù)涤姊。這個(gè)機(jī)制暫時(shí)地解決了實(shí)時(shí)性問題，但是它帶來了新的問題：以多線程模式運(yùn)行的服務(wù)器會(huì)讓大部分線程大部分時(shí)間都處于掛起狀態(tài)嗤放，極大地浪費(fèi)服務(wù)器資源思喊。另外，一個(gè)HTTP連接在長時(shí)間沒有數(shù)據(jù)傳輸?shù)那闆r下次酌，鏈路上的任何一個(gè)網(wǎng)關(guān)都可能關(guān)閉這個(gè)連接,而網(wǎng)關(guān)是我們不可控的恨课，這就要求Comet連接必須定期發(fā)一些ping數(shù)據(jù)表示連接正常工作”舆乔。
WebSocket并不是全新的協(xié)議，而是利用了HTTP協(xié)議來建立連接剂公。
為什么WebSocket連接可以實(shí)現(xiàn)全雙工通信而HTTP連接不行呢?
實(shí)際上通訊協(xié)議是建立在TCP協(xié)議之上的, TCP協(xié)議本身就實(shí)現(xiàn)了全雙工通信希俩，但是HTTP協(xié)議的請(qǐng)求-應(yīng)答機(jī)制限制了全雙工通信。WebSocket連接建立以后纲辽，其實(shí)只是簡單規(guī)定了一下:接下來颜武，咱們通信就不使用HTTP協(xié)議了，直接互相發(fā)數(shù)據(jù)吧拖吼。安全的WebSocket連接機(jī)制和HTTPS類似鳞上。首先，瀏覽器用wss://xx創(chuàng)建WebSocket連接時(shí)绿贞， 會(huì)先通過HTTPS創(chuàng)建安全的連接因块，然后，該HTTPS連接升級(jí)為WebSocket連接籍铁，底層通信走的仍然是安全的SSL/TLS協(xié)議。
WebSocket連接必須由瀏覽器發(fā)起趾断，特點(diǎn):
(1)建立在 TCP 協(xié)議之上拒名，服務(wù)器端的實(shí)現(xiàn)比較容易。
(2)與 HTTP 協(xié)議有著良好的兼容性芋酌。默認(rèn)端口也是80和443增显，并且握手階段采用 HTTP 協(xié)議，因此握手時(shí)不容易屏蔽脐帝，能通過各種 HTTP 代理服務(wù)器同云。
(3)數(shù)據(jù)格式比較輕量,性能開銷小，通信高效堵腹。
(4)可以發(fā)送文本炸站，也可以發(fā)送二進(jìn)制數(shù)據(jù)。
(5)沒有同源限制疚顷，客戶端可以與任意服務(wù)器通信旱易。
(6)協(xié)議標(biāo)識(shí)符是ws (如果加密,則為wss)，服務(wù)器網(wǎng)址就是URL腿堤。
示例：瀏覽器端代碼
// Create WebSocket connection.
const socket = new Websocket("ws://localhost:8080");
// Connection opened
socket.addEventListener("open", function (event) {
socket.send("Hello Server!");
});
// Listen for messages
socket.addEventListener("message ", function (event) {
console.log("Message from server ", event.data);
});
第二種：html5瀏覽器的新特性SharedWorker大
普通的 webworker 直接使用 new Worker() 即可創(chuàng)建阀坏，這種 webworker 是當(dāng)前頁面專有的。然后還有種共享 worker(SharedWorker)笆檀，這種是可以多個(gè)標(biāo)簽頁忌堂、iframe共同使用的。SharedWorker 可以被多個(gè) window 共同使用酗洒，但必須保證這些標(biāo)簽頁都是同源的(相同的協(xié)議士修，主機(jī)和端口號(hào))
首先新建一個(gè)is文件worker.js, 具體代碼如下: .
// shareWorker 所要用到的js文件枷遂，不必打包到項(xiàng)目中，直接放到服務(wù)器即可
let data = " ";
let onconnect = function (event) {
let port = event.ports[0];
port.onmessage = function (e) {
if (e.data === "get") {
port.postMessage(data);
} else {
data = e.data;
}
};
};
示例代碼：
try {
var worker = new SharedWorker("worker.js");
var getBtn = document.getElementById("get");
var setBtn = document.getElementById("set");
var txt = document.getElementById("txt");
var log = document.getElementById("log");
worker.port.addEventListener("message", function (e) {
log.innerHTML = e.data;
console.log(" --- 獲取到數(shù)據(jù) e.data --- ", e.data);
});
worker.port.start();
setBtn.addEventListener(
"click",
function (e) {
worker.port.postMessage(txt.value);
},
false
);
getBtn.addEventListener(
"click",
function (e) {
worker.port.postMessage("get");
},
false
);
} catch (error) {
console.log(" --- error --- ", error);
}
