sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增socket重连逻辑

master
于肖磊 2025-12-10 10:01:58 +08:00
parent 3ffd423c5e
commit 8a98cb3cf5
5 changed files with 75 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pages/plugins/live/pull/components/h5-hls-video/h5-hls-video.vue
View File

@ -383,16 +383,14 @@
}
})
this.hlsPlayer.on(hlsjs.Events.ERROR, (event, data) => {
console.error('HLS Error:', data, event, '444')
// hls 视频加载错误
this.$ownerInstance.callMethod('eventEmit', {
event: 'hlsError',
data
})
// 如果HLS播放失败，尝试直接播放源地址作为降级方案
if (this.videoEl && data.fatal) {
this.videoEl.src = src
} else {
// hls 视频加载错误
this.$ownerInstance.callMethod('eventEmit', {
event: 'hlsError',
data
})
}
})
} else {

183
pages/plugins/live/pull/components/live-content/live-content.vue
View File

@ -340,6 +340,8 @@
// 清理socket连接
this.clear_interval_task();
this.unbind_keyboard_listener();
// 关闭socket连接
this.socket_close();
// 如果定时器存在，清除它
if (this.countdownTimer) {
clearInterval(this.countdownTimer);
@ -506,7 +508,6 @@
this.socket_message_back_handle(res);
});
this.task.onClose((res) => {
this.task = null;
this.is_socket_error = true;
// 尝试重连，最多30次
if ((this.reconnect_count + 1) < 30) {
@ -526,7 +527,7 @@
}
});
this.task.onError((res) => {
this.task = null;
this.socket_close();
this.is_socket_error = false;
this.reconnect_count = 0;
this.socket_error_content = `连接失败点击重试`;
@ -539,6 +540,12 @@
}
});
},
socket_close() {
if (this.task != null) {
this.task.close();
this.task = null;
}
},
/**
* WebSocket消息回调处理
@ -605,6 +612,9 @@
// 添加内容之后，需要滚动到最后
this.scroll_to_lower();
break;
case 'live-status':
this.$emit('liveStatus', data.content);
break;
}
},
@ -1017,172 +1027,3 @@
}
/* #endif */
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>
</script>
</style>
</template>

26
pages/plugins/live/pull/mixins/mixins.js
View File

@ -24,7 +24,9 @@ export default {
],
lastTapTime: 0, // 用于检测双击
lastTapPosition: { x: 0, y: 0 }, // 记录上次点击位置
lastLikeTime: 0 // 记录上次点赞时间，用于防抖
lastLikeTime: 0, // 记录上次点赞时间，用于防抖
live_status: 'start',
live_end_msg: '主播暂时离开，请稍等...',
}
},
@ -124,6 +126,16 @@ export default {
// 如果已经暂停了就不需要处理了
if (!this.is_live_ended) {
this.is_live_ended = true;
if (this.live_status == 'stop') {
this.live_end_msg = '直播已结束';
} else if (['pause', 'resume'].includes(this.live_status)) {
this.live_end_msg = '主播暂时离开，请稍等...';
// 直播状态为resume时，如果结束了，就需要重新请求直播间状态
console.log(this.live_status);
if (this.live_status == 'resume') {
this.socket_live_status('resume');
}
}
}
},
@ -206,6 +218,18 @@ export default {
}
this.lastTapTime = currentTime;
this.lastTapPosition = { x, y };
},
socket_live_status(status) {
console.log(status);
this.live_status = status;
// 如果是开始直播了或者继续直播了，则取消直播结束标记
console.log(this.is_live_ended);
if (['start', 'resume'].includes(status) && this.is_live_ended) {
setTimeout(() => {
console.log('继续直播标记');
this.is_live_ended = false;
}, 5000);
}
}
}
}

28
pages/plugins/live/pull/pull.nvue
View File

@ -1,23 +1,21 @@
<template>
<view :class="theme_view + ' flex-row pr'" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<view class="flex-1 pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
<view v-if="!is_live_ended" class="flex-1 pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
<live-video ref="live-video" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended"></live-video>
<!-- 简化版点赞效果组件 -->
<full-screen-like-effect ref="fullScreenLikeEffect" :propCustomImages="like_show_imgs" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></full-screen-like-effect>
</view>
<view v-if="!is_loading" class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<template v-if="!is_live_ended">
<live-content ref="liveContent" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @live-back="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end"></live-content>
</template>
<template v-else>
<view class="live-ended flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
<view class="flex-col align-c">
<text style="color:#fff;font-size:16px;">直播已结束</text>
<button plain size="mini" class="mt-10 live-ended-button" @click="back"><text class="cr-f pa-5" @tap="live_back">退出直播间</text></button>
</view>
</view>
</template>
<live-content ref="liveContent" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @live-back="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end" @liveStatus="socket_live_status"></live-content>
</view>
<view v-if="is_live_ended" class="live-ended flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<view class="flex-col align-c">
<text class="live-ended-text">{{live_end_msg}}</text>
<button plain size="mini" class="mt-10 live-ended-button" @tap="live_back">
<text class="cr-f pa-5">退出直播间</text>
</button>
</view>
</view>
</view>
</template>
@ -56,6 +54,12 @@
.live-ended {
// 添加渐变背景色
background-image: linear-gradient(to bottom,#AD18F9,#05DFC7);
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.live-ended-button {
border-radius: 6px;

32
pages/plugins/live/pull/pull.vue
View File

@ -1,24 +1,20 @@
<template>
<view :class="theme_view + ' live-bg'">
<view class="w h pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
<view v-if="!is_live_ended" class="w h pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
<live-video ref="liveVideo" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended" @mutedAutoPlaySuccess="muted_auto_play_success"></live-video>
<!-- 简化版点赞效果组件 -->
<full-screen-like-effect ref="fullScreenLikeEffect" :propCustomImages="like_show_imgs"></full-screen-like-effect>
</view>
<view v-if="!is_loading" :class="'live-content ' + (!is_live_ended ? 'pointer-events-none' : '')">
<template v-if="!is_live_ended">
<live-content ref="liveContent" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @live-back="live_back"></live-content>
</template>
<template v-else>
<view class="live-ended flex-row align-c jc-c">
<view class="flex-col align-c">
<text class="live-ended-text">直播已结束</text>
<button plain size="mini" class="mt-10 live-ended-button" @tap="live_back">
<text class="cr-f pa-5">退出直播间</text>
</button>
</view>
</view>
</template>
<live-content ref="liveContent" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @live-back="live_back" @liveStatus="socket_live_status"></live-content>
</view>
<view v-if="is_live_ended" class="live-ended flex-row align-c jc-c">
<view class="flex-col align-c">
<text class="live-ended-text">{{live_end_msg}}</text>
<button plain size="mini" class="mt-10 live-ended-button" @tap="live_back">
<text class="cr-f pa-5">退出直播间</text>
</button>
</view>
</view>
<!-- 静音提示 -->
<view v-if="!is_loading && !is_live_ended && is_muted_auto_play_success" class="live-muted flex-row align-c jc-c">
@ -79,7 +75,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
z-index: 11;
width: 100%;
height: 100%;
.live-muted-tips {
@ -103,6 +99,12 @@
width: 100vw;
height: 100vh;
background-image: linear-gradient(to bottom,#AD18F9,#05DFC7);
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
.live-ended-text {
color:#fff;
font-size:16px;