How to use websockets for my JSON streambuilder? - json

Question

I have set up the streambuilder and stream async functions,but i do not know how to use it properly as it needs websockets. How can i use websockets in these case to fetch my Json data from my server?
Stream<List<Post>> FetchPosts(http.Client client) async* {
final response = await http.get("$SERVER_IP/api/articles/?format=json");
final parsed = jsonDecode(utf8.decode(response.bodyBytes)).cast<Map<String, dynamic>>();
yield parsed.map<Post>((json) => Post.fromJSON(json)).toList();
}
StreamBuilder<List<Post>>(
stream: FetchPosts(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData ? PostsList(posts: snapshot.data)
:
Center(child: CircularProgressIndicator(backgroundColor: Colors.pink,valueColor: new AlwaysStoppedAnimation<Color>(Colors.pinkAccent)));
},
),
Class
class Post {
final String id;
final String author;
final String caption;
Post({this.id, this.author,this.caption});
factory Post.fromJSON(Map<String, dynamic> jsonMapPost) {
return Post(
id: jsonMapPost['id'] as String,
caption: jsonMapPost['caption'] as String,
author: jsonMapPost['author'] as String,);}}
Json data
[{"id":"a4d64194-3d81-4a4e-b7e6-6fce36fea793","author":"a94d4433-ffaf-4af1-aa8d-67ac75bf2e53","caption":"this is caption",]}

Answer 1

You can use web_socket_channel package that provides StreamChannel wrappers for WebSocket connections.
With it you fetchPosts function can turn into something like that:
Stream<List<Post>> fetchPosts() {
final channel = IOWebSocketChannel.connect(Uri.parse("$SERVER_IP/api/articles/?format=json"));
return channel.stream.map((r) => parse(r));
}
If your websocket server emits message in this format:
[
{
"id": "a4d64194-3d81-4a4e-b7e6-6fce36fea793",
"author": "a94d4433-ffaf-4af1-aa8d-67ac75bf2e53",
"caption": "this is caption"
}
]
then your parse function can look like that:
List<Post> parse(String message) {
final json = jsonDecode(message) as List<dynamic>;
return json.map((j) => Post.fromJSON(j as Map<String, dynamic>)).toList();
}