如何在顫振中決議Web套接字回應（JSON）

我有一個任務，我想通過網路套接字獲取資料，并將它們顯示在應用程式的螢屏上。但我什至沒有找到一個正常的例子來這樣做。如果有人幫助做到這一點，或者有人樹立榜樣，我將不勝感激。我有套接字網址：

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"] }

以下是 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();
  }
}

uj5u.com熱心網友回復：

在這種情況下，您不想顯示整個 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需要一個字串 while snapshot.datais Object?。在您的生產代碼中，您可能還想rate在訪問之前檢查密鑰是否存在。

標籤：扑 镖 插座

上一篇：一創建就到串列末尾，Flutter

下一篇：Pow()函式給出有關資料型別的錯誤