浏览器刷新的时候,正在进行中的事件结束掉,在刷新浏览器的时候做一些操作。
如果是调接口,就不能使用axios封装的接口,需要使用原生的fetch。
找到公共的文件App.vue
使用window.addEventListener(‘beforeunload’, function (e) {})进行浏览器关闭操作的监听。
具体代码:
window.addEventListener('beforeunload', function (e) {
if (isEdit()) {
e.preventDefault();
e.returnValue = '您有未保存的数据,请稍后关闭';
addCanvasArrData()
};
const studentsStore = useStudentsStore()
const { getLiveId, getIsLiveStutus } = storeToRefs(studentsStore);
// 是否直播状态
let isLiveStutus = computed(() => {
return getIsLiveStutus.value;
})
// 如果在直播状态,刷新浏览器,关闭直播
if(isLiveStutus.value){
fetch(`/request/live/log/${getLiveId.value}`,{
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'token': localStorage.getItem('token') ? localStorage.getItem('token') : ''
},
body: JSON.stringify({
id: getLiveId.value,
liveEndTime: new Date()
})
});
var data = {
incident: "END_LIVE_BROADCAST",
identityNo: teacherStore.identityNo, // 学校班级唯一标识号
liveBroadcastNo: getLiveId.value // 纸笔直播id
}
ws.send(JSON.stringify(data));
fetch(`/request/live/log/${getLiveId.value}`,{
method: 'GET',
headers: {
'Content-Type': 'application/json',
'token': localStorage.getItem('token') ? localStorage.getItem('token') : ''
},
});
}
});