Flutter Web：如何检测应用关闭并实现WebSocket数据发送

要检测Flutter Web应用的关闭事件，你可以使用浏览器的onBeforeUnload事件，结合会话时长统计和数据发送需求，以下是完整的实现示例：

核心实现步骤 #

1. 引入dart:html库访问浏览器原生API
2. 记录用户会话的开始时间
3. 监听页面卸载事件，计算会话时长并发送数据

完整代码示例 #

import 'dart:html';
import 'dart:convert';

void main() {
  // 记录会话启动时间
  final sessionStart = DateTime.now();

  // 监听页面卸载/关闭事件
  window.onBeforeUnload.listen((event) {
    // 计算会话持续时长（转换为秒）
    final sessionDuration = DateTime.now().difference(sessionStart).inSeconds;

    // 构造要发送的会话数据
    final sessionData = jsonEncode({
      'duration': sessionDuration,
      'userIdentifier': 'user_123' // 替换为实际用户标识
    });

    // 方案1：使用WebSocket发送数据（注意异步限制）
    // 假设已提前建立WebSocket连接
    // if (webSocketConnection != null && webSocketConnection.readyState == WebSocket.OPEN) {
    //   webSocketConnection.send(sessionData);
    // }

    // 方案2：使用Navigator.sendBeacon（更可靠的页面卸载数据发送方式）
    final dataBlob = Blob([sessionData], 'application/json');
    final sendSuccess = Navigator.instance.sendBeacon('/api/save-session-data', dataBlob);
    
    if (sendSuccess) {
      print('会话数据已成功提交');
    } else {
      print('会话数据提交失败');
    }

    // 若需触发浏览器离开确认弹窗，可设置returnValue（不需要则删除此行）
    // event.returnValue = '您的会话数据将被保存，确定离开吗？';
  });
}

关键注意事项 #

• WebSocket的局限性：onBeforeUnload回调中执行异步操作（如WebSocket的发送回调）时，浏览器可能在操作完成前终止页面，导致数据丢失。如果必须使用WebSocket，建议确保连接已处于就绪状态，且发送数据量较小。
• sendBeacon的优势：sendBeacon是浏览器专为页面卸载场景设计的API，它会异步发送数据且不会阻塞页面关闭流程，数据发送的可靠性远高于普通异步请求或WebSocket。
• 确认弹窗控制：如果设置了event.returnValue或返回非空字符串，浏览器会弹出确认离开的对话框。不需要此弹窗时，直接省略相关设置即可。

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