uni-app在APP端无法关闭WebSocket

uni-app在APP端无法关闭WebSocket

开发环境 版本号 项目创建方式
Windows 10 专业版 20H2 3.2.3 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Windows 10 专业版 20H2

HBuilderX类型：正式

HBuilderX版本号：3.2.3

手机系统：Android

手机系统版本号：Android 10

手机厂商：汉德霍尔

手机机型：k71v1_64_bsp

页面类型：vue

打包方式：云端

操作步骤：

uni.connectSocket({    
    url: 'ws://172.16.32.204:8000',    
    success: (res) => {    
        console.log("WebSocket服务连接成功！");    
    }    
})    

uni.onSocketOpen(function() {    

    uni.onSocketMessage(function(res) {    
        console.log("收到服务器内容：" + res.data);    

        uni.closeSocket({    
            success: function(res) {    
                console.log("WebSocket关闭成功！");    
            },    
            fail: function(res) {    
                console.log("WebSocket关闭失败！");    
            }    
        })    

    })    

})

预期结果：

uni.connectSocket({    
    url: 'ws://172.16.32.204:8000',    
    success: (res) => {    
        console.log("WebSocket服务连接成功！");    
    }    
})    

uni.onSocketOpen(function() {    

    uni.onSocketMessage(function(res) {    
        console.log("收到服务器内容：" + res.data);    

        uni.closeSocket({    
            success: function(res) {    
                console.log("WebSocket关闭成功！");    
            },    
            fail: function(res) {    
                console.log("WebSocket关闭失败！");    
            }    
        })    

    })    

})

实际结果：

uni.connectSocket({    
    url: 'ws://172.16.32.204:8000',    
    success: (res) => {    
        console.log("WebSocket服务连接成功！");    
    }    
})    

uni.onSocketOpen(function() {    

    uni.onSocketMessage(function(res) {    
        console.log("收到服务器内容：" + res.data);    

        uni.closeSocket({    
            success: function(res) {    
                console.log("WebSocket关闭成功！");    
            },    
            fail: function(res) {    
                console.log("WebSocket关闭失败！");    
            }    
        })    

    })    

})

bug描述：

Android端APP，第一次执行uni.closeSocket后会显示关闭成功，但是WebSocket并没有被关闭，依然在获取数据。之后的uni.closeSocket全部返回关闭失败！


更多关于uni-app在APP端无法关闭WebSocket的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

官方能来个人看一下吗？H5和IOS15都正常，Android8和Android10都失效。不想把页面改写成WebView，给我个替代的方案啊！

更多关于uni-app在APP端无法关闭WebSocket的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问解决了吗？

根据你的描述，这是一个典型的WebSocket生命周期管理问题。问题核心在于：你在onSocketMessage回调内部调用了uni.closeSocket()，这会导致WebSocket在收到第一条消息后立即尝试关闭，但此时连接可能尚未完全稳定。

在uni-app的App端，WebSocket实现基于原生模块，关闭连接需要确保正确的时机和状态管理。你的代码存在几个关键问题：

  1. 关闭时机不当：在onSocketMessage回调中立即关闭连接，可能导致原生层状态不同步
  2. 事件监听未清理：关闭连接后，之前注册的onSocketMessage监听器可能仍在活动
  3. 异步操作未处理：WebSocket的关闭是异步过程，需要正确处理回调

建议修改代码如下：

let socketTask = null;

// 连接WebSocket
socketTask = uni.connectSocket({
    url: 'ws://172.16.32.204:8000',
    success: (res) => {
        console.log("WebSocket连接成功！");
    },
    fail: (err) => {
        console.log("WebSocket连接失败：", err);
    }
});

// 监听连接打开
uni.onSocketOpen((res) => {
    console.log("WebSocket已打开");
    
    // 监听消息
    uni.onSocketMessage((res) => {
        console.log("收到服务器内容：" + res.data);
        
        // 收到消息后，延迟关闭或根据业务逻辑关闭
        // 不要立即在回调中关闭
    });
});

// 在合适的时机调用关闭，例如：
function closeWebSocket() {
    if (socketTask) {
        // 先移除所有监听器
        uni.offSocketOpen();
        uni.offSocketMessage();
        uni.offSocketError();
        uni.offSocketClose();
        
        // 关闭连接
        uni.closeSocket({
            success: (res) => {
                console.log("WebSocket关闭成功！");
                socketTask = null;
            },
            fail: (err) => {
                console.log("WebSocket关闭失败：", err);
                // 强制关闭
                uni.closeSocket();
                socketTask = null;
            }
        });
    }
}

// 页面卸载时确保关闭
onUnload(() => {
    closeWebSocket();
});
回到顶部