Flutter页面如何监听服务器异步验证状态更新？

针对你的需求，这里提供三种可行方案，按推荐优先级排序：

方案一：WebSocket长连接（首选，实时双向通信） #

通过WebSocket建立客户端与服务器的长连接，服务器验证完成后可主动推送消息给客户端，无需手动查询。

实现步骤： #

1. 添加依赖到pubspec.yaml：

dependencies:
  web_socket_channel: ^2.4.0

2. Flutter客户端代码示例：

import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';

class VerificationPage extends StatefulWidget {
  @override
  _VerificationPageState createState() => _VerificationPageState();
}

class _VerificationPageState extends State<VerificationPage> {
  late WebSocketChannel _channel;

  @override
  void initState() {
    super.initState();
    // 连接服务器的WebSocket端点（替换为你的实际地址）
    _channel = WebSocketChannel.connect(
      Uri.parse('ws://your-server-domain/verification-ws'),
    );

    // 监听服务器推送的消息
    _channel.stream.listen((message) {
      // 假设服务器返回的验证完成标识为"VERIFIED_SUCCESS"
      if (message == "VERIFIED_SUCCESS") {
        _executePostVerificationCode();
      }
    }, onError: (error) {
      // 处理连接异常，比如提示用户重连
      print("WebSocket连接异常: $error");
    }, onDone: () {
      print("WebSocket连接已关闭");
    });
  }

  // 验证完成后需要执行的代码
  void _executePostVerificationCode() {
    setState(() {
      // 示例：更新UI、跳转页面或执行业务逻辑
      showDialog(
        context: context,
        builder: (ctx) => AlertDialog(
          title: Text("验证完成"),
          content: Text("已通过服务器验证，即将进入下一步"),
          actions: [
            TextButton(
              onPressed: () => Navigator.pushReplacementNamed(ctx, "/home"),
              child: Text("确认"),
            )
          ],
        ),
      );
    });
  }

  @override
  void dispose() {
    _channel.sink.close(); // 页面销毁时关闭连接
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("等待验证")),
      body: const Center(child: Text("服务器验证中，请稍候...")),
    );
  }
}

3. 服务器端配合：
   验证流程完成后，通过WebSocket向当前客户端连接发送约定好的消息（比如上述示例中的VERIFIED_SUCCESS）即可。

方案二：推送服务（适合后台验证场景） #

如果验证过程可能在应用后台完成，可使用FCM（Firebase Cloud Messaging）或APNs实现服务器主动推送通知，客户端监听通知并执行逻辑。

实现示例： #

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  final messaging = FirebaseMessaging.instance;

  // 获取设备令牌并发送给服务器存储（关联当前用户的验证请求）
  final token = await messaging.getToken();
  if (token != null) {
    _sendTokenToServer(token);
  }

  // 监听前台收到的推送消息
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    if (message.data["verification_status"] == "completed") {
      _executePostVerificationCode();
    }
  });

  // 监听应用在后台/关闭时点击通知的情况
  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
    if (message.data["verification_status"] == "completed") {
      _executePostVerificationCode();
    }
  });

  runApp(const MyApp());
}

// 向服务器发送设备令牌
void _sendTokenToServer(String token) {
  // 实现你的API请求逻辑，将token传给服务器存储
}

// 验证完成后执行的代码
void _executePostVerificationCode() {
  // 跳转页面、更新状态等逻辑
}

服务器端需调用FCM/APNs的推送API，向存储的设备令牌发送携带验证状态的消息。

方案三：优化轮询（备选，无WebSocket/推送支持时使用） #

如果服务器不支持主动推送，可设置合理间隔的定时轮询，替代手动点击查询：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class VerificationPage extends StatefulWidget {
  @override
  _VerificationPageState createState() => _VerificationPageState();
}

class _VerificationPageState extends State<VerificationPage> {
  late Timer _pollingTimer;

  @override
  void initState() {
    super.initState();
    // 每5秒轮询一次服务器（可根据需求调整间隔）
    _pollingTimer = Timer.periodic(const Duration(seconds: 5), (timer) {
      _checkVerificationStatus();
    });
  }

  // 查询服务器验证状态
  Future<void> _checkVerificationStatus() async {
    try {
      final response = await http.get(Uri.parse("https://your-server-domain/check-verification"));
      if (response.statusCode == 200) {
        final data = jsonDecode(response.body);
        if (data["status"] == "verified") {
          _pollingTimer.cancel(); // 验证完成后停止轮询
          _executePostVerificationCode();
        }
      }
    } catch (e) {
      print("轮询出错: $e");
    }
  }

  void _executePostVerificationCode() {
    // 执行验证完成后的逻辑
  }

  @override
  void dispose() {
    _pollingTimer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("等待验证")),
      body: const Center(child: Text("服务器验证中，请稍候...")),
    );
  }
}

内容的提问来源于stack exchange，提问作者Thomas Szpila