Блокировка интерфейса браузера при выполнения кода
Всем доброго дня, моя задача написать не большой проект для отправки видео файлов через websocket размером до 10 гб. Код серверной части написан и работает приемлемо но вот с клиентской частью есть проблема, при выполени функции shareFile интерфейс блокируется, и не возможно вывести statusBar. Вопрос такой как можно организовать выполнения данного процесса в фоном режиме. Клиентская часть пишется на Vue3
methods:{
shareFile(metadata, buffer, sock){
sock.send(JSON.stringify(metadata))
let state = true;
while (state) {
this.statusBar += 0.05;
let chunk = buffer.slice(0, metadata.buffer_size);
buffer = buffer.slice(metadata.buffer_size, buffer.length);
if (chunk.length > 0){
sock.send(chunk);
}
else
state = false;
}
},
videoUpload(){
let uploadeVidio = this.$refs.file.files[0];
let reader = new FileReader();
reader.onload = ()=>{
let buffer = new Uint8Array(reader.result);
this.shareFile({
filename: uploadeVidio.name,
total_buffer_size: buffer.length,
buffer_size: 123840 //81920
},
buffer, this.sock);
}
reader.readAsArrayBuffer(uploadeVidio)
},
}