使用 websocket 实时发送视频播放进度

src/components/player/player.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="dplayer" ref="dplayer">
+  <div id="dplayer" ref="dplayer" style="width: 800px; height: 450px;">
     <v-dialog
       v-model="permissionDialog"
       max-width="290"
@@ -63,7 +63,7 @@
 
 <script>
 import { videoUrl, submitPlayRecord } from '@/api/media/video'
-// import SocketInstance from '@/utils/ws/socket-instance'
+import SocketInstance from '@/utils/ws/socket-instance'
 
 const hls = require('hls.js')
 const dashjs = require('dashjs')
@@ -119,7 +119,7 @@ export default {
     }
   },
   mounted() {
-    // SocketInstance.connect()
+    SocketInstance.connect()
     const videoId = this.videoProp.videoId
     if (this.getUrl) {
       this.getVideoUrl(videoId)
@@ -191,7 +191,7 @@ export default {
         })
     },
     initMp4Player(userId, videoId, coverUrl, urls) {
-      new DPlayer({
+      const player = new DPlayer({
         container: document.querySelector('#dplayer'),
         lang: 'zh-cn',
         logo: '/logo.png',
@@ -215,18 +215,9 @@ export default {
         }
       })
 
-      /* if (userId !== 0) {
-        console.log('初始化 playRecord')
-        this.playRecord = {
-          'userId': this.userPermission.userId,
-          'videoId': videoId,
-          'currentTime': 0.0
-        }
-      }
-
       // 跳转到指定秒
       // dp.seek(100)
-      player.on('play', function() {
+      /* player.on('play', function() {
         console.log('mp4Player 开始播放事件' + this.userPermission.userId)
         console.log(this.playRecord)
         if (this.playRecord == null) {
@@ -292,25 +283,11 @@ export default {
           }).catch(error => {
             console.error(error.message)
           })
-      })
+      })*/
 
-      var i = 0
       player.on('progress', function() {
-        console.log('i = ' + i)
-        if (i % 5 === 0) {
-          if (this.playRecord == null) {
-            return
-          }
-
-          this.playRecord.currentTime = player.video.currentTime
-          submitPlayRecord(this.playRecord)
-            .then(res => {
-            }).catch(error => {
-              console.error(error.message)
-            })
-        }
-        i++
-      })*/
+        SocketInstance.send({ userId: userId, videoId: videoId, currentTime: player.video.currentTime })
+      })
     },
     initFlvPlayer(videoId, coverUrl, videoUrl) {
       new DPlayer({

src/router/index.js

@@ -34,7 +34,7 @@ const routes = [
           {
             path: '/studio/upload',
             name: 'Upload',
-            component: () => import('@/views/studio/upload1.vue'),
+            component: () => import('@/views/studio/upload.vue'),
             meta: {
               title: '投稿',
               requireAuth: true

src/utils/ws/socket-instance.js

@@ -23,7 +23,7 @@ class SocketInstance {
         if (token === null || token === '') {
           return null
         } else {
-          return 'ws://push.reghao.cn/ws/push?token=' + token
+          return 'wss://push.reghao.cn/ws/push?token=' + token
         }
       },
       {