Vuejs组件停止打开http连接答案

【问题标题】：Vuejs Component stop open http connectionVuejs组件停止打开http连接
【发布时间】：2019-06-11 23:50:57
【问题描述】：

我有一个 vuejs 组件，它通过 http 流式传输 MP4 流，但是一旦组件被破坏，http 连接就会保持打开状态并继续下载内容，直到我刷新浏览器。

安装组件后，我将<video> 标记src 设置为等于MP4 url，这又会自动打开到MP4 的http 连接并开始下载和显示视频，这是预期和期望的。但是当组件在destroyed() 钩子中被销毁时，连接保持打开状态并继续下载视频。

我尝试使用XMLHttpRequest() 来创建连接，但这也不起作用。有没有办法在销毁 vue 组件时基本上终止 http 连接？

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?');
  }
}

【问题讨论】：

任何代码示例？
@AndrewShmig 已编辑

标签： javascript vuejs2 vue-component

【解决方案1】：

所以在我发现我的组件没有被破坏后，我实际上能够在beforeDestroy() 钩子中解决这个问题。它没有被销毁的原因是因为组件是在v-if 循环中动态创建的，而:key 绑定不是一个完全唯一的键，因此这会导致组件无法正确更新/销毁。一旦我更正了这个 :key 绑定，它就开始按预期工作。

【讨论】：

【解决方案2】：

将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;

【讨论】：

.srcObject 在 destroyed() 和 beforeDestroy() 挂钩中均为空。

【解决方案3】：

如果你查看documentation，你应该使用 beforeDestroy

在这个阶段，实例仍然可以正常工作

而不是销毁api：

Vue 实例已解除绑定

编辑：

似乎vue 在关闭video element 中的连接时遇到问题。但我认为问题可能出在video element self 上。我四处阅读，发现人们过去在正确卸载视频元素时遇到问题。

我已经创建了一个解决方法，似乎关闭了连接。 Codepen

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

【讨论】：

@JeremyWalters，不是 Vue 问题，而是浏览器问题。已搜索过类似问题的答案 - 唯一可行的解决方案是完全删除 HTML 元素，然后重新创建它。
@AndrewShmig 感谢您的确认。怀疑是这样的。你看过我的 Codepen，这似乎有效吗？欢迎您在答案中编辑您的发现。
@JeremyWalters，是的，我看过你的 codepen 并且有另一个问题：我们如何测量和检查浏览器是否仍在后台加载视频？您的解决方案似乎很好。
打开 devtools：禁用缓存。打开网络选项卡。选择Media 过滤器。当您播放视频时，您会看到它正在下载。当您按下停止按钮时，它将停止下载。在没有`this.$refs["mp4"].load();`的情况下正常销毁它，你仍然会下载它。