Search for a command to run...
Real-Time Communication in Flutter: A Comprehensive Guide to Implementing WebSockets for Seamless Connectivity
I am a full stack developer, a Machine Learning enthusiast & a Flutter Developer. Also, I am a budding Entrepreneur!
I am a student of Life and believe in building tech for people.
I love contributing to open-source projects and use my knowledge to develop a software solution for general problems arising in the community.
In this series, I will cover interesting micro articles on how to get more comfortable with Flutter & Dart.
Elevate Your Flutter App's Notification Game: Master Firebase Cloud Messaging Like a Pro!
Have you ever worked on a frontend codebase so large that you feared deploying a CSS change to the Settings page because it might somehow break the Checkout flow? Or perhaps you've struggled to align three different teams working on the same React re...
Elevate Your Flutter App's Notification Game: Master Firebase Cloud Messaging Like a Pro!
Mastering Clean Architecture and GetX for High-Performing Flutter Apps
Unleash the power of Dart's Extension Methods with this simple guide
WebSockets provide a powerful way to establish a full-duplex communication channel between the client and server, allowing real-time data exchange. This is particularly useful in applications that require live updates, such as chat apps, online gaming, financial dashboards, and collaborative tools. In this blog post, we’ll explore how to effectively implement WebSockets in Flutter, using a robust and well-structured approach.
Imagine you’re building a chat app. You want messages to appear instantly without the user having to refresh the page or wait for updates. WebSockets make this happen by keeping a continuous connection open between your app and the server. This allows data to flow back and forth instantly, giving your users that smooth, real-time experience.
To get started with WebSockets in Flutter, you first need to import the necessary Dart packages in pubspec.yaml:
dependencies:
retry: ^3.1.0
A well-structured approach to handling WebSocket connections in Flutter is to use a singleton class. This class will handle everything related to WebSockets, from connecting to the server to managing incoming data.
import 'dart:async';
import 'dart:developer';
import 'dart:io';
class WebSocketManager {
// Singleton pattern - only one instance of WebSocketManager will exist
static final WebSocketManager _singleton = WebSocketManager._internal();
// StreamController to manage the flow of data
final StreamController<Object> streamController = StreamController.broadcast(sync: true);
// Variable to store the WebSocket URL
late String wsUrl;
WebSocket? socket;
WebSocketStatus status = WebSocketStatus.closed;
// Factory constructor to return the singleton instance
factory WebSocketManager(String url) {
_singleton.wsUrl = url;
return _singleton;
}
// Private constructor for the singleton pattern
WebSocketManager._internal();
// Initialize the WebSocket connection
Future<void> initWebSocketConnection() async {
// Check if the WebSocket is closed before connecting
if (status == WebSocketStatus.closed) {
status = WebSocketStatus.connecting;
log("Socket Connecting...");
socket = await connectWs();
// If the connection is successful, open the WebSocket and start listening for data
if (socket?.readyState == WebSocket.open) {
socket!.pingInterval = const Duration(seconds: 5);
status = WebSocketStatus.open;
log("Connection OPEN");
broadcast();
} else {
// If the connection fails, log the error and close the WebSocket
log("Connection DONE inside initWebSocketConnection()");
log("Close Code: ${socket?.closeCode}");
status = WebSocketStatus.closed;
streamController.addError('Connection Done with close code: ${socket?.closeCode}');
}
}
}
// Broadcast data received from the WebSocket to all listeners
void broadcast() {
socket?.listen(
(dynamic streamData) {
try {
streamController.add(streamData as String);
} catch (e) {
streamController.addError(e.toString());
}
},
onDone: () {
status = WebSocketStatus.closed;
log("Connection DONE");
streamController.addError('Connection Done with close code: ${socket?.closeCode}');
},
onError: (dynamic e) async {
status = WebSocketStatus.closed;
streamController.addError(e.toString());
},
);
}
// Connect to the WebSocket server with retry logic
Future<WebSocket?> connectWs() async {
// Retry connection with exponential backoff
const r = RetryOptions(maxAttempts: 20, delayFactor: Duration(seconds: 1));
WebSocket? response;
try {
// Attempt to connect to the WebSocket server
response = await r.retry(
() => WebSocket.connect(wsUrl),
retryIf: (e) {
// You can provide any condition for retrying
return true;
},
onRetry: (e) {
log("Socket Connection Error: $e");
log("Retrying!");
},
);
} on TimeoutException {
// If the connection times out, try again
log("Socket TimeoutException!");
initWebSocketConnection();
return null;
} catch (e) {
// If there's another type of error, log it or handle it accordingly
log("Socket connection error: $e");
return null;
}
return response;
}
// Function for dispose of the WebSocket connection
Future<void> dispose() async {
await socket?.close();
socket = null;
status = WebSocketStatus.closed;
}
}
Key Components of the WebSocketManager Class
Singleton Pattern: The class uses a singleton pattern to ensure only one instance of WebSocketManager exists, managing the WebSocket connection across the entire app.
StreamController: This is used to broadcast incoming messages from the WebSocket to multiple listeners within the app.
WebSocket Status: The WebSocketStatus enum tracks the state of the WebSocket connection (open, closed, or connecting).
Retry Logic: Exponential backoff with jitter is implemented using the retry package, allowing the WebSocket to automatically retry the connection multiple times if it fails.
Once you’ve set up the WebSocketManager class, the next step is to integrate it into your Flutter application. Below is an example of how to use the WebSocketManager in your app:
// Initialize the WebSocketManager with the appropriate WebSocket URL
wsManager = WebSocketManager("https://echo.websocket.org/");
// Establish the WebSocket connection
wsManager?.initWebSocketConnection();
// Retrieve the StreamController from the WebSocketManager
final streamController = wsManager?.streamController;
// ...
// Listen to the WebSocket stream and handle incoming data
StreamBuilder<dynamic>(
stream: streamController?.stream, // The stream of data from the WebSocket
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasError) {
// Show an error message in the UI
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
// Show a loading indicator while waiting for the stream to emit data
return const CircularProgressIndicator();
}
if (snapshot.hasData) {
// Display the received data in the UI
return Text('Received data: ${snapshot.data}');
}
// Show a default message if no data is received
return const Text('No data available');
},
)
What’s Going On Here?
WebSocket Initialization: We start by creating our WebSocketManager with a URL. This URL tells the WebSocket where to connect.
Connection Setup: Next, we call initWebSocketConnection() to start the connection. This gets our WebSocket up and running.
StreamController: Remember that radio broadcaster? We’re tuning into it here. We grab the StreamController from our WebSocketManager to listen to any messages coming through.
StreamBuilder: This function builds the UI every time a new snapshot of data arrives on the stream. It also runs when the stream’s connection state changes.
This approach ensures that your UI stays responsive and up-to-date with real-time data from the WebSocket.
WebSockets in Flutter might sound a bit intimidating at first, but with a solid understanding of how to manage connections and data, you’ll be up and running in no time. Remember, the key is to keep it simple, handle errors gracefully, and enjoy the process of bringing real-time communication to life in your app!
Happy coding! 🎉