Flask-SocketIO私人通话应用：结束通话功能异常问题求助

问题1：发起方点击结束按钮后接收方通话窗口未隐藏 #

原代码仅隐藏了发起方本地窗口，且未向接收方发送明确的「终止通话」指令，导致接收方无响应。

解决方案：

• 点击关闭按钮时，向接收方发送类型明确的终止通话消息，而非DOM操作返回的对象；
• 接收方监听该消息类型，收到后执行隐藏窗口操作。

问题2：接收方关闭窗口显示[object Object] #

原代码中var message = $("#receivercallwindow").hide();错误地将jQuery的hide()返回值（DOM对象）作为消息发送，接收方解析时会显示对象字符串[object Object]。

解决方案：

• 发送结构化的指令消息，比如包含type字段标记消息类型，避免直接传递DOM对象。

问题3：Socket断开连接后未隐藏通话窗口 #

未监听Socket的断开事件，导致连接中断时窗口无法自动隐藏。

解决方案：

• 监听Socket的disconnect事件，触发时隐藏本地通话窗口。

修改后的前端代码示例 #

发起方关闭按钮事件处理

$(document).on('click','#closebutton',function(e){
    e.preventDefault(); 
    // 隐藏发起方本地窗口
    $("#sendercallwindow").hide();
    // 发送终止通话指令，而非DOM对象
    socket.emit('chat_private', {
        'username': $('#receiver').val(),
        'type': 'end_call', // 标记为终止通话消息
        'message': '通话已结束' // 可选：显示友好提示
    });
});

接收方监听消息并处理终止通话

socket.on('chat_private', function(data) {
    // 判断是否为终止通话指令
    if (data.type === 'end_call') {
        // 隐藏接收方通话窗口
        $("#receivercallwindow").hide();
        // 可选：显示结束提示
        // $('#chat-messages').append('<div>对方已结束通话</div>');
    } else {
        // 处理普通聊天消息
        $('#chat-messages').append('<div>' + data.message + '</div>');
    }
});

监听Socket断开事件隐藏窗口

socket.on('disconnect', function() {
    // 隐藏当前所有通话窗口
    $("#sendercallwindow").hide();
    $("#receivercallwindow").hide();
    // 可选：提示连接断开
    // $('#chat-messages').append('<div>连接已断开</div>');
});

内容的提问来源于stack exchange，提问作者Doc Saab