uni-app 【报Bug】使用uni.redirectTo切换页面，再切换回来，uni.onSocketOpen在真机不执行

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app 【报Bug】使用uni.redirectTo切换页面，再切换回来，uni.onSocketOpen在真机不执行

示例代码：

this.socket = uni.connectSocket({  
    url: 'ws://xxx' + uid,  
    success: (data) => {  
        console.log('连接成功111111')                             
    },  
    fail: (err) => {  
        console.log('连接失败11111')  
    }  
});  

uni.onSocketOpen(() => {  
    console.log('打开成功')  
});  
uni.onSocketError((err)=>{                        
    console.log(err)  
})        
uni.onSocketClose(()=>{  
    console.log('关闭')  
})

操作步骤：

this.socket = uni.connectSocket({  
    url: 'ws://xxx' + uid,  
    success: (data) => {  
        console.log('连接成功111111')                             
    },  
    fail: (err) => {  
        console.log('连接失败11111')  
    }  
});  

uni.onSocketOpen(() => {  
    console.log('打开成功')  
});  
uni.onSocketError((err)=>{                        
    console.log(err)  
})        
uni.onSocketClose(()=>{  
    console.log('关闭')  
})

预期结果：

切换页面回来后可以正常执行 uni.onSocketOpen

实际结果：

切换页面回来后可以不执行 uni.onSocketOpen

bug描述：

使用uni.redirectTo切换页面，再切换回来，uni.connectSocket成功 uni.onSocketOpen在真机不执行 第一次打开页面可以执行


| 信息类型         | 内容                           |
|------------------|-------------------------------|
| 产品分类         | uniapp/App                    |
| PC开发环境操作系统 | Windows                       |
| PC开发环境操作系统版本号 | window11                      |
| HBuilderX类型     | 正式                          |
| HBuilderX版本号   | 4.36                          |
| 手机系统         | Android                       |
| 手机系统版本号    | Android 14                    |
| 手机厂商         | 小米                          |
| 手机机型         | 所有                          |
| 页面类型         | vue                           |
| vue版本          | vue2                          |
| 打包方式         | 云端                          |
| 项目创建方式      | HBuilderX                     |

Harmonyos Next教程
2 回复

完整代码贴一下，最好提供完整的复现工程。你的创建链接是什么生命周期发的？


在处理uni-app中遇到的uni.redirectTo切换页面后返回导致uni.onSocketOpen不执行的问题时，首先需要确认几个关键点：

  1. Socket连接的生命周期：WebSocket连接在页面跳转时可能会被关闭，这取决于浏览器或应用框架的行为。当页面重新加载或被切换回来时，原有的WebSocket连接可能已失效，需要重新建立连接。

  2. 事件监听器的注册时机：确保uni.onSocketOpen事件监听器在页面生命周期中的正确位置注册。如果注册时机不当（比如在页面跳转后才注册），可能会导致错过连接打开的事件。

  3. 页面缓存与生命周期：在uni-app中，页面跳转后可能会因为页面缓存机制导致页面的onLoad、onShow等生命周期方法不被重复调用。这可能会影响事件监听器的注册。

下面是一个示例代码，展示了如何在uni-app中管理WebSocket连接，确保在页面切换回来时能够重新建立连接：

// pages/index/index.vue
<template>
  <view>
    <button @click="navigateToOtherPage">Go to Other Page</button>
    <text>{{ socketStatus }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      socketStatus: 'Disconnected',
      socketOpen: false,
      socketMsgQueue: []
    };
  },
  onLoad() {
    this.initSocket();
  },
  methods: {
    navigateToOtherPage() {
      uni.redirectTo({
        url: '/pages/other/other'
      });
    },
    initSocket() {
      if (this.socketOpen) return; // 防止重复初始化
      
      uni.connectSocket({
        url: 'wss://your-websocket-url.com',
        success: () => {
          console.log('Socket connected');
        }
      });

      uni.onSocketOpen(res => {
        this.socketStatus = 'Connected';
        this.socketOpen = true;
        // 处理之前缓存的消息
        this.socketMsgQueue.forEach(msg => this.sendMessage(msg));
        this.socketMsgQueue = [];
      });

      uni.onSocketMessage(res => {
        console.log('Received:', res.data);
      });

      uni.onSocketClose(res => {
        this.socketStatus = 'Disconnected';
        this.socketOpen = false;
      });

      uni.onSocketError(err => {
        console.error('Socket error:', err);
      });
    },
    sendMessage(msg) {
      if (!this.socketOpen) {
        this.socketMsgQueue.push(msg); // 缓存消息
      } else {
        uni.sendSocketMessage({
          data: msg
        });
      }
    }
  }
};
</script>

在这个示例中，我们管理了一个WebSocket连接，并在页面加载时初始化它。如果连接未打开，发送的消息会被缓存，直到连接重新建立后再发送。这样可以确保在页面切换回来后，如果WebSocket连接丢失，能够自动重新处理连接逻辑。

回到顶部