能否为Dart入门Web应用集成Redis？编译报错求助

你遇到的编译错误是因为**redis包依赖dart:io等仅支持Dart VM（服务器端/命令行）的API**，而Web浏览器环境（DDC编译目标）不提供这些API，因此编译被跳过。浏览器本身也不允许直接发起TCP连接到Redis服务（受同源策略限制，且Redis没有原生HTTP/WebSocket接口），所以直接在Web前端使用Redis客户端是不可行的。

正确的架构是让Web前端通过HTTP请求与后端服务交互，由后端服务负责连接Redis并处理数据。以下是具体实现步骤：

1. 前端修改：移除Redis依赖，改用HTTP请求数据 #

更新web/main.dart，去掉redis包导入，用http包请求后端接口：

import 'dart:html';
import 'dart:convert';
import 'package:http/http.dart' as http;

Iterable<String> thingsTodo() sync* {
    yield "walk the dog";
    yield "wash the dog";
}

LIElement newLI(String itemText) => LIElement()..text = itemText;

void main() async {
    querySelector('#output')?.children.addAll(thingsTodo().map(newLI));
    
    // 请求后端接口获取Redis数据
    try {
      final response = await http.get(Uri.parse('http://localhost:8081/get-redis-data'));
      if (response.statusCode == 200) {
        final redisData = jsonDecode(response.body);
        querySelector('#end')?.text = redisData['text'] ?? '无Redis数据';
      } else {
        querySelector('#end')?.text = '获取数据失败';
      }
    } catch (e) {
      querySelector('#end')?.text = '错误：$e';
    }
}

更新前端pubspec.yaml，移除redis包，添加http依赖：

name: quickstart
description: A simple web app
version: 1.0.0
environment:
  sdk: '>=3.0.0 <4.0.0'
dependencies:
  http: ^1.1.0
dev_dependencies:
  build_runner: ^2.4.0
  build_web_compilers: ^4.0.0
  webdev: ^2.7.0

执行dart pub get更新依赖。

2. 新建Dart后端服务：连接Redis并提供HTTP接口 #

创建一个新的Dart项目作为后端，比如命名为redis_backend，编写bin/server.dart：

import 'dart:convert';
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_cors_headers/shelf_cors_headers.dart';
import 'package:redis/redis.dart';

void main() async {
  // 连接本地Redis服务
  final conn = RedisConnection();
  final command = await conn.connect('localhost', 6379);

  // 配置CORS解决跨域问题
  final corsMiddleware = corsHeaders(
    headers: {
      ACCESS_CONTROL_ALLOW_ORIGIN: '*',
      ACCESS_CONTROL_ALLOW_METHODS: 'GET, POST, OPTIONS',
    },
  );

  // 定义路由逻辑
  final handler = Pipeline()
      .addMiddleware(corsMiddleware)
      .addMiddleware(logRequests())
      .addHandler((Request request) async {
    if (request.url.path == 'get-redis-data') {
      // 从Redis读取Python lpush的列表数据（示例键为todo-list）
      final redisResponse = await command.send_object(['LRANGE', 'todo-list', '0', '-1']);
      // 反序列化Redis中存储的JSON字符串
      final dataList = (redisResponse as List).map((item) => jsonDecode(item as String)).toList();
      // 返回第一个数据或默认值
      return Response.ok(
        jsonEncode(dataList.isNotEmpty ? dataList[0] : {'text': 'Redis列表为空'}),
        headers: {'Content-Type': 'application/json'},
      );
    }
    return Response.notFound('接口不存在');
  });

  // 启动后端服务，端口设为8081（避免与前端webdev serve默认端口冲突）
  final server = await shelf_io.serve(handler, 'localhost', 8081);
  print('后端服务运行于 http://${server.address.host}:${server.port}');
}

后端pubspec.yaml配置：

name: redis_backend
description: Dart后端服务，用于连接Redis并提供HTTP接口
version: 1.0.0
environment:
  sdk: '>=3.0.0 <4.0.0'
dependencies:
  shelf: ^1.4.0
  redis: ^3.1.0
  shelf_cors_headers: ^0.1.5

执行dart pub get更新依赖。

3. 启动服务并测试 #

1. 启动后端：在后端项目目录执行dart run bin/server.dart
2. 启动前端：在前端项目目录执行webdev serve，访问http://localhost:8080即可看到从Redis获取的数据

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