Flutter Getx+Socket.io聊天页面二次进入后UI不更新问题

问题描述 #

在Flutter中使用Socket.io实现聊天页面，首次进入任意聊天页面时消息可实时更新UI；但关闭后再次进入同一或其他聊天页面时，收发消息的数据已成功添加到列表（打印列表可见新消息），但UI无更新。

问题根源分析 #

1. SocketManager持有旧Controller实例：SocketManager中的静态ChatScreenController是App启动时通过Get.find()获取的，聊天页面关闭后Controller被销毁，再次进入页面会创建新的Controller实例，但SocketManager仍引用旧实例，导致调用update()无法通知当前UI。
2. Socket事件绑定/清理不当：每次进入页面重复绑定messageResponse事件，关闭页面时调用clearListeners()会移除所有Socket监听（包括连接状态监听），后续重新绑定可能失效。
3. List更新的刷新信号未传递：直接操作getchatList.insert()后，因Controller实例引用错误，刷新信号无法传递到当前页面的GetBuilder。

解决方案 #

1. 移除SocketManager对Controller的静态引用，动态获取实例 #

修改SocketManager，删除静态Controller变量，在updateMessageList中动态获取当前活跃的Controller：

class SocketManager {
  // 删掉这行静态引用
  // static ChatScreenController chatScreenController = Get.find<ChatScreenController>();

  // ...其他代码

  static void updateMessageList(ChatsData msg) {
    log("updateMessageList");
    // 动态获取当前页面的Controller实例
    final chatScreenController = Get.find<ChatScreenController>();
    chatScreenController.getchatList.insert(0, msg);
    chatScreenController.updateChatList();
  }
}

2. 优化Socket事件的绑定与清理，避免误删监听 #

不要用clearListeners()移除所有监听，改为只移除特定的messageResponse事件：
在SocketManager中新增方法：

static void removeMessageListener() {
  if (socket != null) {
    socket!.off('messageResponse');
  }
}

修改ChatScreenController的onClose方法：

@override
void onClose() {
  log("-----------------DISCOONECT CHAT");
  SocketManager.removeMessageListener(); // 仅移除消息监听，保留连接相关监听
  super.onClose();
}

3. 确保Controller初始化时正确绑定事件 #

在ChatScreenController的onInit中，先移除旧监听再绑定新监听，避免重复绑定：

@override
void onInit() {
  SocketManager.channelRef = channelId ?? "";
  print("SOCKET MANAGER CHANNEL REF-----------------${SocketManager.channelRef}");
  // 先清理旧监听，再绑定新的
  SocketManager.removeMessageListener();
  SocketManager.getMessagesListener();
  fetchChatList();
  super.onInit();
}

可选优化：改用RxList简化状态管理 #

将普通List改为RxList，自动触发UI更新，无需手动调用update()：

class ChatScreenController extends GetxController {
  // 替换原List定义
  RxList<ChatsData> getchatList = <ChatsData>[].obs;
  
  List<ChatsData> get chatList => getchatList.toList();
  set chatList(List<ChatsData> value) {
    getchatList.assignAll(value);
  }

  // ...其他代码

  void updateChatList(){
    log("======UPDATE CHAT");
    print('LAST MESSAGE=========== ${chatList.first.toJson().toString()}');
    // RxList自动触发更新，可省略手动update()
  }
}

对应的updateMessageList简化为：

static void updateMessageList(ChatsData msg) {
  log("updateMessageList");
  final chatScreenController = Get.find<ChatScreenController>();
  chatScreenController.getchatList.insert(0, msg);
}

验证效果 #

完成修改后，首次进入聊天页面消息正常实时更新；关闭页面再次进入后，收发消息时列表数据和UI会同步更新。

内容的提问来源于stack exchange，提问作者Nadeem Amanah