如何在Flutter客户端实时获取Dart命令行服务端的日志？

核心思路：通过WebSocket实现实时日志推送 #

既然你的服务端已经部署了Web服务器，WebSocket是实现跨端双向实时通信的最优选择——完全不需要依赖文件读写或客户端本地状态管理工具（比如Riverpod，它更适合维护客户端内部状态，而非跨端实时日志推送）。

步骤1：改造服务端，捕获日志并推送 #

Dart的print语句会输出到标准输出(stdout)，你可以重定向标准输出捕获日志内容，再通过WebSocket推送给连接的客户端。

服务端代码示例：

import 'dart:io';
import 'dart:convert';
import 'dart:async';

void main() async {
  // 保存所有连接的WebSocket客户端
  final Set<WebSocket> connectedClients = {};

  // 启动WebSocket服务（绑定独立端口，避免和现有Web服务冲突）
  final wsServer = await HttpServer.bind(InternetAddress.anyIPv4, 8081);
  print('WebSocket日志推送服务启动，端口：8081');

  // 监听新客户端连接
  wsServer.listen((HttpRequest request) {
    WebSocketTransformer.upgrade(request).then((WebSocket socket) {
      connectedClients.add(socket);
      // 客户端断开时从列表移除
      socket.done.then((_) => connectedClients.remove(socket));
    });
  });

  // 重定向标准输出，捕获print内容并推送
  stdout.listen((List<int> data) {
    final logContent = utf8.decode(data).trim();
    if (logContent.isNotEmpty) {
      // 推送给所有在线客户端
      for (var client in connectedClients) {
        client.add(logContent);
      }
    }
  });

  // 启动原有服务端业务逻辑
  runYourBusinessServer();
}

// 模拟你的业务服务逻辑，print的内容会被捕获推送
void runYourBusinessServer() {
  Timer.periodic(const Duration(seconds: 2), (timer) {
    print('${DateTime.now()}: 服务端业务操作日志...');
  });
}

步骤2：Flutter客户端接收实时日志 #

使用官方推荐的web_socket_channel包连接服务端WebSocket，实时获取并展示日志。

客户端代码示例：

1. 先在pubspec.yaml添加依赖：

dependencies:
  web_socket_channel: ^2.4.0

2. 日志页面实现：

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

class ServerLogPage extends StatefulWidget {
  const ServerLogPage({super.key});

  @override
  State<ServerLogPage> createState() => _ServerLogPageState();
}

class _ServerLogPageState extends State<ServerLogPage> {
  late final WebSocketChannel _logChannel;
  final List<String> _logList = [];

  @override
  void initState() {
    super.initState();
    // 连接服务端WebSocket地址，替换为你的服务端实际IP和端口
    _logChannel = WebSocketChannel.connect(
      Uri.parse('ws://你的服务端IP:8081'),
    );
    // 监听日志推送
    _logChannel.stream.listen((log) {
      setState(() {
        _logList.add(log.toString());
      });
    });
  }

  @override
  void dispose() {
    _logChannel.sink.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('服务端实时日志')),
      body: ListView.builder(
        padding: const EdgeInsets.all(16),
        itemCount: _logList.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.symmetric(vertical: 4),
            child: Text(_logList[index]),
          );
        },
      ),
    );
  }
}

方案优势说明 #

• 实时性强：WebSocket是长连接，日志产生后立即推送，无需客户端轮询或文件扫描
• 资源开销低：避免磁盘IO操作和文件读写冲突，仅依赖网络通信
• 耦合度低：基于现有Web服务体系，无需修改客户端状态管理逻辑，也不依赖本地文件系统
• 扩展性好：后续可轻松扩展日志分级、客户端订阅指定日志类型等功能

内容的提问来源于stack exchange，提问作者Артем Ильинский