flutter - 如何在 flutter 中解析网络套接字响应(JSON)

Question

我有一个任务，我想通过 web socket 获取数据，并将它们显示在应用程序的屏幕上。但我什至没有找到一个正常的例子来这样做。如果有人帮忙做，或者有人树立榜样，我将不胜感激。 我有套接字网址:

wss: //ws-sandbox.coinapi.io/v1/

我还有一个要发送到套接字以返回数据的正文:

{ "type": "hello", "apikey": "C4F12EA7-D405-4619-99FD-62F4B00A8111", "heartbeat": false, "subscribe_data_type": ["exrate"], "subscribe_filter_asset_id": ["BTC / USD"] }

这是网络套接字中返回的内容:

{
  "time": "2022-04-28T16: 45: 31.0000000Z",
  "asset_id_base": "BTC",
  "asset_id_quote": "USD",
  "rate": 39693.575,
  "type": "exrate"
}

我想在屏幕上显示“费率”数据。 我将感谢你的帮助)

我的代码

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  WebSocketChannel channel = IOWebSocketChannel.connect("wss://ws-sandbox.coinapi.io/v1/");

  @override
  MyHomePageState createState() {
    return MyHomePageState();
  }
}



class MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title:  Text("Web Socket"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Form(
              child: TextFormField(
                decoration: InputDecoration(labelText: "Send any message to the server"),
                controller: _controller,
              ),
            ),
            StreamBuilder(
              stream: widget.channel.stream,
              builder: (context, snapshot) {
                return Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Text(snapshot.hasData ? '${snapshot.data}' : ''),
                );
              },
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.send),
        onPressed: sendData,
      ),
    );
  }

  void sendData() {
    if (_controller.text.isNotEmpty) {
      widget.channel.sink.add(_controller.text);
    }
  }

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

问题是我返回了所有的 JSON(字符串)。我只想返回数据“速率” 我的思琳:

Answer 1

在这种情况下，您不想显示整个 json 正文。所以不要使用 snapshot.data你需要先解析它。

snapshot.data有一个动态类型，所以我不知道你正在使用什么样的数据，但如果你以某种方式将它解析为 Map<String, dynamic>你可以做 data['rate'] .

使用常规 http 时你可以解析 http.Response 的库像这样:

jsonDecode(response.body).cast<Map<String, dynamic>>();

如果你告诉我 snapshot.data 的类型我或许可以为您提供更多信息。

---

编辑: 我刚刚尝试了您的代码，并且怀疑您得到了一个我们可以用 jsonDecode 解析的字符串:

jsonDecode(snapshot.data)["rate"]

如果我们将此应用于您的问题，这应该是解决方案:

您的小部件应如下所示:

Text(getExtractedRate(snapshot))

getExtractedRate方法应如下所示:

  String getExtractedRate(AsyncSnapshot<dynamic> snapshot) {
    return snapshot.hasData ? '${jsonDecode(snapshot.data)["rate"]}' : '';
  }

请记住，我使用的是 dynamic键入以避免键入冲突。 jsonDecode snapshot.data 需要一个字符串是Object? .在您的生产代码中，您可能还想检查 key 是否为 rate在访问它之前存在。