有時候我們需要在用戶離開頁面的時候,做一些上報來記錄用戶行爲。又或者是發送服務器ajax請求,通知服務器用戶已經離開,比如直播間內的退房操作。
本文主要分兩部分來講解怎麼完成退出行爲的上報。
1.事件監聽
瀏覽器有兩個事件可以用來監聽頁面關閉,beforeunload
和unload
。 beforeunload
是在文檔和資源將要關閉的時候調用的, 這時候文檔還是可見的,並且在這個關閉的事件還是可以取消的。比如下面這種寫法就會讓用戶導致在刷新或者關閉頁面時候,有個彈窗提醒用戶是否關閉。
window.addEventListener("beforeunload", function (event) {
// Cancel the event as stated by the standard.
event.preventDefault();
// Chrome requires returnValue to be set.
event.returnValue = '';
});
複製代碼
unload
則是在頁面已經正在被卸載時發生,此時文檔所處的狀態是:1.所有資源仍存在(圖片,iframe等);2.對於用戶所有資源不可見;3.界面交互無效(window.open
, alert
, confirm
等);4.錯誤不會停止卸載文檔的過程。
基於以上兩個方法就可以實現對頁面關閉的事件監聽了,爲了穩妥,可以兩個事件都監聽。然後對監聽函數做處理,讓關閉事件只調用一次。
2.請求發送
有了上面的監聽,事情只完成了一半,如果我們在監聽中直接發送ajax請求,就會發現請求被瀏覽器abort了,無法發送出去。在頁面卸載的時候,瀏覽器並不能保證異步的請求能夠成功發出去。
我們有幾種方式可以解決這個問題:
方案1: 發送同步的ajax請求
var oAjax = new XMLHttpRequest();
oAjax.open('POST', url + '/user/register', false);//false表示同步請求
oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
oAjax.onreadystatechange = function() {
if (oAjax.readyState == 4 && oAjax.status == 200) {
var data = JSON.parse(oAjax.responseText);
} else {
console.log(oAjax);
}
};
oAjax.send('a=1&b=2');
複製代碼
這種方式雖然有效,但是用戶需要等待請求結束纔可以關閉頁面。對用戶的體驗不好。
方案2:發送異步請求,並且在服務端忽略ajax的abort
雖然異步請求會被瀏覽器abort,但是如果服務端可以忽略abort,仍然正常執行,也是可以的。比如PHP有ignore_user_abort函數可以忽略abort。這樣需要改造後臺,一般不太可行..
方案3:使用navigator.sendBeacon
發送異步請求
根據MDN的介紹:
這個方法主要用於滿足 統計和診斷代碼 的需要,這些代碼通常嘗試在卸載(unload)文檔之前向web服務器發送數據。過早的發送數據可能導致錯過收集數據的機會。然而, 對於開發者來說保證在文檔卸載期間發送數據一直是一個困難。因爲用戶代理通常會忽略在卸載事件處理器中產生的異步 XMLHttpRequest 。
從介紹上可以看出,這個方法就是用來在用戶離開時發請求的。非常適合這種場景。 使用方式是這樣的:
navigator.sendBeacon(url [, data]);
複製代碼
sendBeacon支持發送的data可以是ArrayBufferView
, Blob
, DOMString
, 或者 FormData
類型的數據。
下面是幾種使用sendBeacon發送請求的方式,可以修改header和內容的格式,因爲一般和服務器的通信方式都是固定的,如果修改了header或者內容,服務器就無法正常識別出來了。
(1)使用Blob來發送 使用blob發送的好處是可以自己定義內容的格式和header。比如下面這種設置方式,就是可以設置content-type爲application/x-www-form-urlencoded。
blob = new Blob([`room_id=123`], {type : 'application/x-www-form-urlencoded'});
navigator.sendBeacon("/cgi-bin/leave_room", blob);
複製代碼
(2)使用FormData對象,但是這時content-type會被設置成"multipart/form-data"。
var fd = new FormData();
fd.append('room_id', 123);
navigator.sendBeacon("/cgi-bin/leave_room", fd);
複製代碼
(3)數據也可以使用URLSearchParams 對象,content-type會被設置成"text/plain;charset=UTF-8" 。
var params = new URLSearchParams({ room_id: 123 })
navigator.sendBeacon("/cgi-bin/leave_room", params);
複製代碼
通過嘗試,可以發現使用blob發送比較方便,內容的設置也比較靈活,如果發送的消息抓包後發現後臺沒有識別出來,可以嘗試修改內容的string或者header,來找到合適的方式發送請求。
參考鏈接:
實踐:
/**
* api
* @param {Object} data 參數
* @param {Boolean} async 是否異步
*/
let postApi = (data, async) => {
if ('sendBeacon' in navigator && !async) {
let str = ''
Object.keys(data.params).forEach((key) => {
str += (key + '=' + data.params[key] + '&')
})
str = str.slice(0, -1)
let blob = new Blob([str], { type: 'application/x-www-form-urlencoded' })
navigator.sendBeacon(data.api, blob)
} else if (window.XMLHttpRequest) {
let xmlhttp = new XMLHttpRequest()
xmlhttp.open('POST', data.api, async) // 同步請求在chrome某些版本上已被禁止
xmlhttp.setRequestHeader('Content-Type', 'application/json')
xmlhttp.send(JSON.stringify(data.params))
}
}