Next.js集成Video SDK UI Toolkit后无法重复加入会话问题

核心问题分析 #

你的代码存在两个关键问题导致必须刷新才能重连：

1. 会话关闭时未彻底清理UI Toolkit的实例资源，旧会话的残留状态阻塞了新会话初始化
2. 组件容器未在会话结束后重置，导致新的joinSession调用无法绑定到干净的DOM环境

修复方案 #

1. 完善会话关闭的清理逻辑 #

在onSessionClosed回调中主动清理会话资源，同时确保组件卸载时的清理函数可靠执行：

export default function ZoomSession({ currentConfig }: { currentConfig: any }) {
    const sessionContainerRef = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        if (!sessionContainerRef.current || !currentConfig) return;

        // 绑定会话关闭回调
        const handleSessionClosed = () => {
            // 主动离开会话并清理资源
            uitoolkit.leaveSession?.();
            // 清空容器内容，确保DOM环境干净
            if (sessionContainerRef.current) {
                sessionContainerRef.current.innerHTML = '';
            }
        };
        uitoolkit.onSessionClosed(handleSessionClosed);

        // 加入会话
        uitoolkit.joinSession(sessionContainerRef.current, currentConfig);

        return () => {
            // 卸载时移除回调并清理会话
            uitoolkit.offSessionClosed(handleSessionClosed);
            uitoolkit.leaveSession?.();
            if (sessionContainerRef.current) {
                sessionContainerRef.current.innerHTML = '';
            }
        };
    }, [currentConfig]);

    return (
        <div
            key={`session-${currentConfig.sessionName}-${Date.now()}`}
            ref={sessionContainerRef}
            style={{ width: "100%", height: "100vh" }}
        />
    );
}

2. 优化页面层的会话触发逻辑 #

当用户结束会话后，需要重置config状态，确保下次加入时触发组件的重新渲染：

// 新增会话关闭后的重置函数
const handleSessionEnd = () => {
    setConfig(null);
    setOpenContainer(false);
};

// 修改ZoomSession组件的props定义
export default function ZoomSession({ currentConfig, onSessionEnd }: { currentConfig: any; onSessionEnd: () => void }) {
    // ... 保留原有逻辑
    const handleSessionClosed = () => {
        uitoolkit.leaveSession?.();
        if (sessionContainerRef.current) {
            sessionContainerRef.current.innerHTML = '';
        }
        onSessionEnd(); // 通知页面层重置状态
    };
    // ... 保留原有逻辑
}

// 页面中使用组件时传入重置函数
<ZoomSession currentConfig={config} onSessionEnd={handleSessionEnd} />

关键修改点说明 #

• 为容器div生成唯一key：每次加入会话时生成包含时间戳的key，强制React重新创建容器DOM，避免旧实例残留
• 移除会话关闭监听：使用offSessionClosed避免内存泄漏
• 主动清空容器内容：确保DOM环境无旧会话的残留元素
• 双向状态同步：会话结束后通知页面层重置配置，为下次加入准备干净的状态

内容的提问来源于stack exchange，提问作者b.g