A communication protocol called websockets enables real-time, full-duplex communication via a single, persistent connection between a client and a server. A websocket allows both the client and the server to start the data transmission, unlike HTTP, which follows a request-response architecture. This creates a persistent connection that stays open until it is closed expressly. This provides a seamless real-time experience by enabling message sending between the client and the server at any moment.

URLs for NWebSockets usually start with “ws:” or “wss:”. We have successfully established a connection to a WebSocket and are now prepared to work with incoming data. However, have you thought about how this information will be updated and shown whenever fresh data is received from the server?

We will use Flutter’s integrated StreamBuilder widget to solve this. Every time new information is found in the data stream, this widget has the ability to refresh the data. Such a data stream is what WebSocket uses to provide bidirectional communication, which is essential for real-time applications.

import 'dart:convert';
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';

void main() => runApp(WebSocketApp());

class WebSocketApp extends StatelessWidget {
 final WebSocketChannel channel = WebSocketChannel.connect(
  // here the url can be replaced with your own websocket url
  Uri.parse('ws://192.168.3.243:8080'),
 );

 WebSocketApp({super.key});

 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   home: Scaffold(
    appBar: AppBar(
     title: const Text('Crypto Tracker'),
    ),
    body: StreamBuilder(
     stream: channel.stream,
     builder: (context, snapshot) {
      if (snapshot.hasData) {
       List body = jsonDecode(snapshot.data);
       return ListView.builder(
        shrinkWrap: true,
        itemCount: body.length,
        itemBuilder: (context, index) => ListTile(
         leading: Text(
          body[index]["symbol"],
         ),
         title: Text(
          body[index]["name"],
         ),
         trailing: Text(
          '₹${body[index]["price"]}',
         ),
        ),
       );
      } else if (snapshot.hasError) {
       return Center(
        child: Text(
         'Error Connecting : ${snapshot.error.toString()}',
        ),
       );
      } else {
       return Center(
        child: Platform.isIOS
          ? const CupertinoActivityIndicator()
          : const CircularProgressIndicator(),
       );
      }
     },
    ),
   ),
  );
 }
}