如何在Flutter Web应用中集成Tagsys RFID阅读器？

核心思路 #

Tagsys阅读器一般会提供HTTP/REST API或WebSocket接口来对外输出标签读取数据，Flutter Web可直接通过网络请求与阅读器的服务端交互，无需专门的Flutter插件（Web环境下浏览器原生支持网络通信）。

具体实现步骤 #

1. 获取阅读器官方API文档 #

直接联系设备供应商拿到官方接口手册，重点确认：

• 标签读取的接口地址（通常为阅读器IP+端口，比如http://[阅读器IP]/api/read-tags）
• 请求方式（GET/POST）
• 返回数据格式（多为JSON，包含标签ID、信号强度等字段）
• 认证规则（部分设备需要API Key或基础身份验证）

2. Flutter Web端网络请求实现 #

使用Flutter的http包或dio包发起请求，示例代码：

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

Future<List<String>> fetchBookTags() async {
  // 替换为你的阅读器实际API地址
  final response = await http.get(Uri.parse('http://192.168.1.100/api/read-tags'));
  
  if (response.statusCode == 200) {
    // 解析返回的JSON数据，假设格式为{"tags": ["EPC123", "EPC456"]}
    final data = jsonDecode(response.body);
    return List<String>.from(data['tags']);
  } else {
    throw Exception('读取Tagsys阅读器标签失败');
  }
}

3. 关联书籍信息 #

拿到标签ID后，需要：

• 提前建立标签ID与书籍信息（书名、作者、ISBN等）的映射关系，可使用Firebase、Supabase等云端数据库，或本地JSON文件
• 通过标签ID查询对应书籍数据，示例：

Map<String, Map<String, String>> tagBookMap = {
  'EPC123': {'title': 'Flutter实战', 'author': '张三'},
  'EPC456': {'title': 'RFID技术入门', 'author': '李四'}
};

Map<String, String>? getBookInfo(String tagId) {
  return tagBookMap[tagId];
}

4. 解决Web跨域问题 #

如果阅读器API地址与Flutter Web应用域名不同，会触发跨域报错，解决方式：

• 在阅读器后台配置CORS允许列表，添加你的Web应用域名
• 开发阶段可使用代理服务器转发请求（生产环境不建议通过浏览器临时放宽跨域限制）

实时读取替代方案 #

若阅读器支持WebSocket实时推送标签数据，可使用web_socket_channel包实现实时监听：

import 'package:web_socket_channel/web_socket_channel.dart';

final channel = WebSocketChannel.connect(
  Uri.parse('ws://[阅读器IP]/ws/tags'),
);

// 监听实时标签数据
channel.stream.listen((message) {
  final tagData = jsonDecode(message);
  print('收到标签: ${tagData['epc']}');
});

内容的提问来源于stack exchange，提问作者Sarthak Kumar Mishra