Компонент Vuejs остановить открытое соединение HTTP

Question

У меня есть компонент vuejs , который передает поток MP4 через http, но после разрушения компонента соединение http остается открытым и продолжает загружать контент, пока я не обновлю браузер.

Когда компонент монтируется, я устанавливаю теги <video> src равными URL-адресу MP4, который, в свою очередь, автоматически открывает http-соединение с MP4 и начинает загрузку и отображение видео, что является ожидаемым и желаемым. НО, когда компонент уничтожен в хуке destroyed(), соединение остается открытым и продолжает загружать видео.

Я пытался использовать XMLHttpRequest() для создания соединения, но это тоже не работает. Есть ли способ уничтожить соединение http после уничтожения компонента vue?

компонент Vue :

<template>
    <video muted :src="mp4Src"></video>
</template>

export default {
  data() {
    return {
        mp4Src: null
    }
  },
  mounted() {
      this.mp4Src = 'http://my-stream.com/123.mp4';
  },
  destroyed() {
    // Setting this to this.mp4Src = ''; doesnt work
    console.log('How to destroying stream?');
  }
}

Answer 1

Если вы посмотрите документацию , вам следует использовать beforeDestroy

На этом этапе экземпляр все еще полностью функционален

Вместо уничтоженного api :

Экземпляр Vue не привязан

Edit:

Похоже, vue имеет проблемы с закрытием этого соединения в video element. Но я думаю, что проблема может быть с самим собой video element. Прочитав, я обнаружил, что в прошлом у людей были проблемы с правильной выгрузкой элемента видео.

Я создал обходной путь, похоже, закрывает связи. Codepen

beforeDestroy() {
   this.$refs["mp4"].load();
 }

Answer 2

Так что в моем случае я действительно смог решить эту проблему в хуке beforeDestroy(), обнаружив, что мой компонент не был уничтожен. Причина, по которой он не был уничтожен, заключалась в том, что компоненты были динамически созданы в цикле v-if, а привязка :key не была полностью уникальным ключом, поэтому компоненты не обновлялись / не корректно корректировались. Как только я исправил эту :key привязку, она начала работать как положено.

Answer 3

Добавление свойства ref к элементу video:

<video ref="video" muted :src="mp4Src"></video>

Затем на destroyed крюке возьмите MediaStream и остановите его:

this
  .$refs
  .video
  .srcObject
  .getTracks()
  .forEach(track => track.stop());
this.$refs.video.srcObject = null;