feat: playroom sync finished
This commit is contained in:
@@ -11,6 +11,8 @@ const videoRef = ref(null);
|
||||
const player = ref(null);
|
||||
const hlsInstance = ref(null);
|
||||
|
||||
const emit = defineEmits(['canplay', 'play', 'pause', 'remote-play-failed']);
|
||||
|
||||
const props = defineProps({
|
||||
autoplay: { type: Boolean, default: false },
|
||||
videoUrl: { type: String, required: true },
|
||||
@@ -121,10 +123,12 @@ onMounted(() => {
|
||||
|
||||
player.value.on('play', () => {
|
||||
console.log('播放:', props.videoUrl);
|
||||
emit('play', { time: getCurrentTime() });
|
||||
});
|
||||
|
||||
player.value.on('pause', () => {
|
||||
console.log('暂停');
|
||||
emit('pause', { time: getCurrentTime() });
|
||||
});
|
||||
|
||||
player.value.on('ended', () => {
|
||||
@@ -140,13 +144,82 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
player.value.on('canplay', () => {
|
||||
console.log('视频可以播放');
|
||||
// 缓冲、seek 后常会多次触发；不在此刷屏打印，由父组件用 pending* 决定是否执行同步
|
||||
emit('canplay');
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('初始化播放器失败:', error);
|
||||
}
|
||||
});
|
||||
|
||||
const getCurrentTime = () => {
|
||||
const video = player.value?.video;
|
||||
if (!video || typeof video.currentTime !== 'number' || Number.isNaN(video.currentTime)) {
|
||||
return 0;
|
||||
}
|
||||
return video.currentTime;
|
||||
};
|
||||
|
||||
const seekTo = (timeSec) => {
|
||||
const t = Number(timeSec);
|
||||
if (!Number.isFinite(t) || t < 0) return;
|
||||
if (player.value?.seek) {
|
||||
try {
|
||||
player.value.seek(t);
|
||||
return;
|
||||
} catch (e) {}
|
||||
}
|
||||
const video = player.value?.video;
|
||||
if (video && typeof video.currentTime === 'number') {
|
||||
try {
|
||||
video.currentTime = t;
|
||||
} catch (e) {}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {{ remote?: boolean }} options
|
||||
* remote=true：来自 WebSocket 同步，无用户手势；需静音才能通过多数浏览器的自动播放策略
|
||||
*/
|
||||
const play = async (options = {}) => {
|
||||
const remote = options?.remote === true;
|
||||
const video = player.value?.video;
|
||||
if (!video?.play) return false;
|
||||
if (remote) {
|
||||
try {
|
||||
video.muted = true;
|
||||
video.setAttribute?.('playsinline', 'true');
|
||||
} catch (e) {}
|
||||
}
|
||||
try {
|
||||
await video.play();
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.warn('[videoPlayer] play() 被拒绝（多为自动播放策略）:', e?.name, e?.message);
|
||||
if (remote) {
|
||||
emit('remote-play-failed', { error: e });
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const pause = () => {
|
||||
if (player.value?.pause) {
|
||||
try {
|
||||
player.value.pause();
|
||||
return;
|
||||
} catch (e) {}
|
||||
}
|
||||
const video = player.value?.video;
|
||||
if (video?.pause) {
|
||||
try {
|
||||
video.pause();
|
||||
} catch (e) {}
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ getCurrentTime, seekTo, play, pause });
|
||||
|
||||
watch(() => props.videoUrl, (newUrl) => {
|
||||
if (player.value && newUrl) {
|
||||
console.log('切换视频到:', newUrl);
|
||||
|
||||
@@ -59,6 +59,7 @@ export const PlayroomStore = defineStore("PlayroomStore",
|
||||
return {
|
||||
currentPlayroom,
|
||||
currentUrl,
|
||||
getCurrentId,
|
||||
setCurrentPlayroom,
|
||||
clearPlayroom,
|
||||
addmember,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,162 +1,191 @@
|
||||
import { ref } from "vue";
|
||||
import { userInfoStore } from "@/store/user";
|
||||
|
||||
|
||||
// userinfo 实例
|
||||
const userinfo = userInfoStore();
|
||||
|
||||
const roomid = ref<number>(0);
|
||||
|
||||
|
||||
// WebSocket 实例
|
||||
const socket = ref<WebSocket | null>(null);
|
||||
|
||||
const isManualClose = ref<boolean>(false);
|
||||
|
||||
const reconnectScheduled = ref<boolean>(false);
|
||||
|
||||
const retryCount = ref<number>(0);
|
||||
|
||||
const getRetryCount = () => {
|
||||
return retryCount.value;
|
||||
};
|
||||
|
||||
const addRetryCount = () => {
|
||||
retryCount.value = retryCount.value + 1;
|
||||
};
|
||||
|
||||
const resetRetryCount = () => {
|
||||
retryCount.value = 0;
|
||||
};
|
||||
const setReconnectScheduled = (value: boolean) => {
|
||||
reconnectScheduled.value = value;
|
||||
};
|
||||
|
||||
const getReconnectScheduled = () => {
|
||||
return reconnectScheduled.value;
|
||||
};
|
||||
|
||||
export const setIsManualClose = (value: boolean) => {
|
||||
isManualClose.value = value;
|
||||
};
|
||||
|
||||
const getIsManualClose = () => {
|
||||
return isManualClose.value;
|
||||
};
|
||||
|
||||
// 连接WebSocket
|
||||
export const connectWebSocket = (r_id: number) => {
|
||||
roomid.value = r_id;
|
||||
const protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
|
||||
const host = window.location.host;
|
||||
const socketUrl = `${protocol}${host}/ws/playroom?r_id=${r_id}`;
|
||||
|
||||
// const socketUrl = `ws://localhost:8080/online?u_id=${userinfo.user.u_id}&u_name=${userinfo.user.u_name}`;
|
||||
if (socket.value && socket.value.readyState !== WebSocket.CLOSED) {
|
||||
console.log("还在重连中...");
|
||||
return;
|
||||
}
|
||||
const retrytime = getRetryCount();
|
||||
if (retrytime >= 10) {
|
||||
console.log("重连失败，请稍后再试");
|
||||
return;
|
||||
}
|
||||
console.log(retrytime);
|
||||
socket.value = new WebSocket(socketUrl, "token-"+ userinfo.token);
|
||||
|
||||
socket.value.onopen = (event: any) => {
|
||||
console.log("WebSocket for video 连接已建立", event);
|
||||
setReconnectScheduled(false);
|
||||
setIsManualClose(false);
|
||||
resetRetryCount();
|
||||
};
|
||||
|
||||
//处理消息逻辑
|
||||
socket.value.onmessage = (event) => {
|
||||
console.log("从服务器收到消息：", event.data);
|
||||
try{
|
||||
const MessageData = JSON.parse(event.data);
|
||||
const cmd = MessageData.cmd;
|
||||
switch(cmd){
|
||||
case "PING":
|
||||
console.log("收到PING消息");
|
||||
const msg = {
|
||||
cmd: "PONG",
|
||||
from: MessageData.to,
|
||||
// 可扩展字段
|
||||
time: new Date().toLocaleString()
|
||||
}
|
||||
sendMessage(msg);
|
||||
break;
|
||||
case "VIDEO_SYNC":
|
||||
// console.log("视频同步消息", MessageData);
|
||||
break;
|
||||
}
|
||||
}catch(error){
|
||||
console.error("解析 JSON 失败：", error);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
socket.value.onerror = (error) => {
|
||||
console.error("WebSocket for video 发生错误：", error);
|
||||
// console.log(error);
|
||||
setReconnectScheduled(true);
|
||||
socket.value.close();
|
||||
};
|
||||
|
||||
socket.value.onclose = (event) => {
|
||||
if (!getIsManualClose()) {
|
||||
if (getReconnectScheduled()) {
|
||||
socket.value = null;
|
||||
addRetryCount();
|
||||
setTimeout(reConnectWebSocket, 5000);
|
||||
setReconnectScheduled(false);
|
||||
} else {
|
||||
// console.log("websocket因为浏览器省电设置断开");
|
||||
console.log("WebSocket for video 连接已关闭", event);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 断开WebSocket连接
|
||||
export const disconnectWebSocket = () => {
|
||||
if (socket.value && socket.value.readyState === WebSocket.OPEN) {
|
||||
roomid.value = 0;
|
||||
socket.value.close();
|
||||
}
|
||||
};
|
||||
|
||||
// 重连机制
|
||||
export const reConnectWebSocket = () => {
|
||||
connectWebSocket(roomid.value);
|
||||
};
|
||||
|
||||
// 发送消息
|
||||
export const sendMessage = (message: any) => {
|
||||
try{
|
||||
const jsonmessage = JSON.stringify(message);
|
||||
if (socket.value && socket.value.readyState === WebSocket.OPEN) {
|
||||
socket.value.send(jsonmessage);
|
||||
} else {
|
||||
console.warn("WebSocket for video 未连接，无法发送消息");
|
||||
}
|
||||
}
|
||||
catch(error){
|
||||
console.error("Failed to stringify message:", error);
|
||||
}
|
||||
};
|
||||
|
||||
//没有错误的重连，只是浏览器在后台断开了连接
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (document.hidden) {
|
||||
} else {
|
||||
if (!getIsManualClose() && socket.value.readyState === WebSocket.CLOSED) {
|
||||
if (getReconnectScheduled()) {
|
||||
return;
|
||||
}
|
||||
reConnectWebSocket();
|
||||
}
|
||||
}
|
||||
});
|
||||
import { ref } from "vue";
|
||||
import { userInfoStore } from "@/store/user";
|
||||
|
||||
export const ROOM_SOCKET_VIDEO_SYNC_EVENT = "room:video_sync";
|
||||
export const ROOM_SOCKET_VIDEO_PLAY_EVENT = "room:video_play";
|
||||
export const ROOM_SOCKET_VIDEO_PAUSE_EVENT = "room:video_pause";
|
||||
|
||||
// userinfo 实例
|
||||
const userinfo = userInfoStore();
|
||||
|
||||
const roomid = ref<number>(0);
|
||||
|
||||
|
||||
// WebSocket 实例
|
||||
const socket = ref<WebSocket | null>(null);
|
||||
|
||||
const isManualClose = ref<boolean>(false);
|
||||
|
||||
const reconnectScheduled = ref<boolean>(false);
|
||||
|
||||
const retryCount = ref<number>(0);
|
||||
|
||||
const getRetryCount = () => {
|
||||
return retryCount.value;
|
||||
};
|
||||
|
||||
const addRetryCount = () => {
|
||||
retryCount.value = retryCount.value + 1;
|
||||
};
|
||||
|
||||
const resetRetryCount = () => {
|
||||
retryCount.value = 0;
|
||||
};
|
||||
const setReconnectScheduled = (value: boolean) => {
|
||||
reconnectScheduled.value = value;
|
||||
};
|
||||
|
||||
const getReconnectScheduled = () => {
|
||||
return reconnectScheduled.value;
|
||||
};
|
||||
|
||||
export const setIsManualClose = (value: boolean) => {
|
||||
isManualClose.value = value;
|
||||
};
|
||||
|
||||
const getIsManualClose = () => {
|
||||
return isManualClose.value;
|
||||
};
|
||||
|
||||
// 连接WebSocket
|
||||
export const connectWebSocket = (r_id: number) => {
|
||||
roomid.value = r_id;
|
||||
const protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
|
||||
const host = window.location.host;
|
||||
const socketUrl = `${protocol}${host}/ws/playroom?r_id=${r_id}`;
|
||||
|
||||
// const socketUrl = `ws://localhost:8080/online?u_id=${userinfo.user.u_id}&u_name=${userinfo.user.u_name}`;
|
||||
if (socket.value && socket.value.readyState !== WebSocket.CLOSED) {
|
||||
console.log("还在重连中...");
|
||||
return;
|
||||
}
|
||||
const retrytime = getRetryCount();
|
||||
if (retrytime >= 10) {
|
||||
console.log("重连失败，请稍后再试");
|
||||
return;
|
||||
}
|
||||
console.log(retrytime);
|
||||
// 调试：房间 WS 不依赖 user.id（URL 只有 r_id，鉴权在子协议 token）；id 只影响你主动发的消息里的 from
|
||||
console.log("[playroom-debug][connectWebSocket]", {
|
||||
r_id,
|
||||
"user.id": userinfo.user?.id,
|
||||
"user.id > 0": typeof userinfo.user?.id === "number" && userinfo.user.id > 0,
|
||||
"user.u_id": userinfo.user?.u_id,
|
||||
hasToken: Boolean(userinfo.token),
|
||||
socketUrl,
|
||||
});
|
||||
socket.value = new WebSocket(socketUrl, "token-"+ userinfo.token);
|
||||
|
||||
socket.value.onopen = (event: any) => {
|
||||
console.log("[playroom-debug][ws open] 连接已建立，此时 user.id =", userinfo.user?.id, "u_id =", userinfo.user?.u_id);
|
||||
console.log("WebSocket for video 连接已建立", event);
|
||||
setReconnectScheduled(false);
|
||||
setIsManualClose(false);
|
||||
resetRetryCount();
|
||||
};
|
||||
|
||||
//处理消息逻辑
|
||||
socket.value.onmessage = (event) => {
|
||||
console.log("从服务器收到消息：", event.data);
|
||||
try{
|
||||
const MessageData = JSON.parse(event.data);
|
||||
const cmd = MessageData.cmd;
|
||||
switch(cmd){
|
||||
case "PING":
|
||||
console.log("收到PING消息");
|
||||
const msg = {
|
||||
cmd: "PONG",
|
||||
from: MessageData.to,
|
||||
// 可扩展字段
|
||||
time: new Date().toLocaleString()
|
||||
}
|
||||
sendMessage(msg);
|
||||
break;
|
||||
case "VIDEO_SYNC":
|
||||
console.log("视频同步消息", MessageData);
|
||||
// 通过事件分发给页面（避免 websocket 层直接依赖具体视图）
|
||||
window.dispatchEvent(
|
||||
new CustomEvent(ROOM_SOCKET_VIDEO_SYNC_EVENT, { detail: MessageData })
|
||||
);
|
||||
break;
|
||||
case "VIDEO_PLAY":
|
||||
console.log("视频播放");
|
||||
window.dispatchEvent(
|
||||
new CustomEvent(ROOM_SOCKET_VIDEO_PLAY_EVENT, { detail: MessageData })
|
||||
);
|
||||
break;
|
||||
case "VIDEO_PAUSE":
|
||||
console.log("视频暂停");
|
||||
window.dispatchEvent(
|
||||
new CustomEvent(ROOM_SOCKET_VIDEO_PAUSE_EVENT, { detail: MessageData })
|
||||
);
|
||||
break;
|
||||
}
|
||||
}catch(error){
|
||||
console.error("解析 JSON 失败：", error);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
socket.value.onerror = (error) => {
|
||||
console.error("WebSocket for video 发生错误：", error);
|
||||
// console.log(error);
|
||||
setReconnectScheduled(true);
|
||||
socket.value.close();
|
||||
};
|
||||
|
||||
socket.value.onclose = (event) => {
|
||||
if (!getIsManualClose()) {
|
||||
if (getReconnectScheduled()) {
|
||||
socket.value = null;
|
||||
addRetryCount();
|
||||
setTimeout(reConnectWebSocket, 5000);
|
||||
setReconnectScheduled(false);
|
||||
} else {
|
||||
// console.log("websocket因为浏览器省电设置断开");
|
||||
console.log("WebSocket for video 连接已关闭", event);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 断开WebSocket连接
|
||||
export const disconnectWebSocket = () => {
|
||||
if (socket.value && socket.value.readyState === WebSocket.OPEN) {
|
||||
roomid.value = 0;
|
||||
socket.value.close();
|
||||
}
|
||||
};
|
||||
|
||||
// 重连机制
|
||||
export const reConnectWebSocket = () => {
|
||||
connectWebSocket(roomid.value);
|
||||
};
|
||||
|
||||
// 发送消息
|
||||
export const sendMessage = (message: any) => {
|
||||
try{
|
||||
const jsonmessage = JSON.stringify(message);
|
||||
if (socket.value && socket.value.readyState === WebSocket.OPEN) {
|
||||
socket.value.send(jsonmessage);
|
||||
} else {
|
||||
console.warn("WebSocket for video 未连接，无法发送消息");
|
||||
}
|
||||
}
|
||||
catch(error){
|
||||
console.error("Failed to stringify message:", error);
|
||||
}
|
||||
};
|
||||
|
||||
//没有错误的重连，只是浏览器在后台断开了连接
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (document.hidden) {
|
||||
} else {
|
||||
if (!getIsManualClose() && socket.value.readyState === WebSocket.CLOSED) {
|
||||
if (getReconnectScheduled()) {
|
||||
return;
|
||||
}
|
||||
reConnectWebSocket();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user