Flutter / Stream 사용하여 실시간으로 API Get 하기

비트코인 관련 프로젝트 진행하던 도중 빗썸에서 실시간으로 가격을 불러와 해당 가격을 사용해야하는 일이 있었다.

첫번째로 빗썸의 비트코인 가격 불러오는 API 주소를 알아야했다.

https://api.bithumb.com/public/ticker/All

맨뒤에 All만 바꾸어서 BTC로 하면 BTC만 가져온다.

https://api.bithumb.com/public/ticker/BTC

해당 주소를 가지고 5초마다 통신하여 비트코인의 가격을 불러왔다.

빗썸에서 비트코인 API 받아와서 실시간으로 연동 시킴

Stream<http.Response> btcstream() async* {
    yield* Stream.periodic(Duration(seconds: 5), (_) {
      return http.get(Uri.parse("https://api.bithumb.com/public/ticker/BTC"));
    }).asyncMap((event) async => await event);
  }

Duration을 걸어 5초마다 비트코인의 가격정보를 받아오게된다.
그리고 불러온값을 Map 형태로 바꾸어 return 시킨다.

StreamBuilder(
                      // StreamBuilder를 통해 비동기 처리를 해주자.
                      stream: controller.btcstream(),
                      builder: (BuildContext context, AsyncSnapshot snapshot) {
                        // 매초마다 변화된 데이터를 감지해서 화면에 뿌려준다.
                        Map bitcoinData = jsonDecode(snapshot.data.body);
                        print(bitcoinData);
                        return Text(
                            '${bitcoinData['data']['closing_price']}'} 비트코인 금액');
                      },
                    )

출력되는 데이터 구조

{status: 0000, data: {opening_price: 21788000, closing_price: 21938000, min_price: 21783000, max_price: 22067000, units_traded: 1960.25091588, acc_trade_value: 42981662043.8457, prev_closing_price: 21787000, units_traded_24H: 2310.96588471, acc_trade_value_24H: 50608279059.3343, fluctate_24H: 172000, fluctate_rate_24H: 0.79, date: 1673437396497}}