Menu
Have you ever thought about how important it is for modern applications to have real-time functionality and rapid mobile app development? Real-time capabilities are essential for many functions, such as live notifications, stock market rate synchronization, and messaging. If these needs are only met by REST, this means that the server may be overworked due to repeated requests to the same endpoint. Thankfully, there is a solution available in the form of Real-Time Apps With Flutter and WebSockets, which enable smooth bidirectional communication channels between the server and the client.
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.
The constant, full-duplex communication between the WebSocket server and client is started by WebSockets. As a result, less traffic is needed because data may move quickly in both directions over a single connection, giving the web speed and real-time functionality. Additionally, servers may monitor clients and send them data as needed via WebSockets, something that is not possible with HTTP alone. WebSockets are utilized in a number of situations where instantaneous communication is necessary, including:
WebSockets are heavily supported by Flutter through the WebSocketIO class. But it’s important to remember that this package depends on “dart.io” and “dart:html,” which means we can’t compile for both web and mobile applications at the same time. In order to address this problem, the Dart team developed the ‘web_socket_channel’ package, which assembles both libraries enabling seamless cross-platform development.
Let’s begin by making a brand-new one. First, make sure the most recent version of the Dart SDK is installed. Launch a terminal window and type the following commands:
dart create -t server-shelf web_socket_server cd web_socket_server
Let’s start by looking at the code of the Dart server, which is capable of actively listening for WebSocket IO requests made to it, ensuring that these requests are handled skillfully.
void main(List args) async {
// Use any available host or container IP (usually `0.0.0.0`).
var server = await HttpServer.bind(InternetAddress.anyIPv4, 8080);
print('WebSocket server listening on ${server.address}:${server.port}');
await for (var request in server) {
//receive the websocket request
WebSocketTransformer.upgrade(request).then(
(webSocket) async {
print('Client connected');
},
);
}
} Let’s now add some logic to send data to the connected client from our server. To be more precise, we will send the client prices for arbitrary bitcoin coins to track. We will be able to test our client connection in real-time because these costs will be updated every second.
Every time it is called, a specific function has been created to provide five different random prices, each ranging from 100 to 200.
List<map<string, dynamic="">> generateRandomPrices() {
final List cryptocurrencies = [
'Bitcoin',
'Ethereum',
'Ripple',
'Litecoin',
'Cardano'
];
final Random random = Random();
List<map<string, dynamic="">> prices = cryptocurrencies.map(
(crypto) {
// Random price between 100 and 200
double price = 100.0 + random.nextDouble() * 100.0;
return {
'name': crypto,
'symbol': crypto.substring(0, 3),
'price': price.toStringAsFixed(2)
};
},
).toList();
return prices;
}</map<string,></map<string,> Next, implement the logic to handle the WebSocket request and send back the cryptocurrency coin prices.
WebSocketTransformer.upgrade(request).then(
(webSocket) async {
print('Client connected');
// Fetch initial cryptocurrency prices with a delay of 3 seconds to show loading
await Future.delayed(
Duration(seconds: 3),
);
List<map<string, dynamic="">> initialPrices = generateRandomPrices();
webSocket.add(
jsonEncode(initialPrices),
);
// Set up a timer to update prices every second
Timer.periodic(
Duration(seconds: 1),
(timer) {
List<map<string, dynamic="">> updatedPrices = generateRandomPrices();
webSocket.add(
jsonEncode(updatedPrices),
);
},
);
webSocket.listen(
(data) {
// You can add custom logic for handling client messages here
print('Received data: $data');
},
onDone: () {
print('Client disconnected');
},
);
},
);</map<string,></map<string,> Additionally, in order to effectively control the loading behavior, we have added a 3-second wait to the initial request.
In your terminal, use the following command to launch the dart server project:
dart run bin/server.dart
Installing the most recent Flutter SDK is essential before starting a new Flutter project. Open your terminal and run the following commands:
flutter create web_socket_client cd web_socket_client
We need to incorporate the web_socket_channel package into our project in order to effectively use websockets in Dart. Open the “pubspec.yaml” file at your project’s root directory and add the following lines:
dependencies: web_socket_channel: ^2.4.0
Remember to use your terminal to perform `flutter pub get` in order to obtain and install the updated dependencies.
We will create a simple application that connects to a WebSocket channel now that the project setup is complete.
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(
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: Container(),
),
); URLs for WebSockets 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.
We are currently developing a StreamBuilder widget to receive data from our websocket and show it.
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(),
);
}
},
),
),
);
}
} With the aid of the StreamBuilder widget, this straightforward application establishes a connection to a WebSocket and shows the data obtained from the server.
This suggests that creating real-time apps with WebSockets and Flutter is an effective way to create real-time functionalities. To fulfill the needs of modern consumers, your development team may create interactive, engaging experiences by providing bidirectional communication channels between clients and servers. With server-side Dart and Flutter’s strong websocket support, developers can create scalable, cross-platform real-time applications. For assistance in creating real-time app communication capabilities for your Flutter development project, get in touch with a Flutter app development company.
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | |||||
We are a team of artists. We provide professional services in the field of Mobile Applications, Web Applications and everything related to IT services. Turning to us for help once – you can no longer refuse.
© 2019 – 2022 | Made with ❤️ by App Ringer
Recent Comments