如何在颤动中解析网络套接字响应（JSON）

Question

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

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

我还有一个正文，我将发送到套接字以 return 数据：

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

Web 套接字返回的内容如下：

{
  "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();
  }
}

问题是我 return 所有 JSON(string)。我只想 return 数据“速率” 我的思琳：

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?。在您的生产代码中，您可能还想在访问之前检查密钥 rate 是否存在。

如何在颤动中解析网络套接字响应（JSON）

how to parsing web socket response (JSON) in flutter

sockets

dart

flutter