Flutter json_rpc_2 implementation - dart

Question

Did anyone successfully implemented WebSocket using json_rpc_2 package?https://pub.dartlang.org/packages/json_rpc_2
I try to present live data, e.g. a ticker, from this API: https://api.hitbtc.com/

Answer 1

Actually, I managed to solve the problem. Here's the code:
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:json_rpc_2/json_rpc_2.dart' as json_rpc;
import 'package:web_socket_channel/io.dart';
class SymbolDetails extends StatelessWidget {
final String symbolId;
SymbolDetails({this.symbolId});
#override
Widget build(BuildContext context) {
var _api = IOWebSocketChannel.connect('wss://api.hitbtc.com/api/2/ws');
var client = json_rpc.Client(_api.cast());
client.sendNotification(
'subscribeTicker',
{'symbol': '$symbolId'},
);
return Scaffold(
appBar: AppBar(
title: Text('$symbolId details'),
),
body: StreamBuilder(
stream: _api.stream,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.none) {
return Center(
child: Text('Please check your internet connection'),
);
} else if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
}
String _snapshotData = snapshot.data;
Map _response = json.decode(_snapshotData);
return ListView(
children: [
ListTile(
title: Text('Ask price:'),
trailing: Text(
'${_response['params']['ask']}',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
ListTile(
title: Text('Bid price:'),
trailing: Text(
'${_response['params']['bid']}',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
],
);
},
),
);
}
}

Answer 2

I came up with a more fleshed-out example that runs on MongoDB. It is also null-safe. Here is the API I came up with:
import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_web_socket/shelf_web_socket.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:mongo_dart/mongo_dart.dart' as mongo;
void main() async {
final handler = webSocketHandler((WebSocketChannel socket){
final server = Server(socket.cast<String>());
server.registerMethod('hello', () async{
mongo.Db db = mongo.Db('mongodb://127.0.0.1:27017/obj1');
await db.open();
var list = await db.collection('Person').find(null).toList();
// await db.close();
return list;
});
server.listen();
});
final server = await shelf_io.serve(handler, '127.0.0.1', 4042);
print('Serving at ws://${server.address.host}:${server.port}');
}
Here is the Flutter client:
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:json_rpc_2/json_rpc_2.dart' as json_rpc;
import 'package:web_socket_channel/io.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({super.key, required this.title});
#override
Widget build(BuildContext context) {
var api = IOWebSocketChannel.connect(Uri.parse('ws://127.0.0.1:4042'));
var client = json_rpc.Client(api.cast());
client.sendRequest(
'hello',
);
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: StreamBuilder(
stream: api.stream,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.none) {
return const Center(
child: Text('Please check your internet connection'),
);
} else if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator());
}
String snapshotData = snapshot.data;
Map<String,dynamic> raw = json.decode(snapshotData);List items = raw['result'];
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('${items[index]["first_name"].toString()} ${items[index]["last_name"].toString()}'),
);
},
);
},
),
);
}
}
When all goes well, the end result is a formatted list of names.