Using WebSockets in Flutter for Real-Time Apps

In today’s world of real-time applications, WebSockets play a crucial role in ensuring seamless two-way communication between a client and a server. Flutter, being a powerful framework for cross-platform development, provides built-in support for WebSockets, making it easy to integrate real-time features into mobile applications.

What Are WebSockets?

WebSockets are a full-duplex communication protocol that allows continuous data exchange between the client and the server over a single, long-lived connection. Unlike traditional HTTP requests, which require repeated polling to fetch updates, WebSockets maintain a persistent connection, enabling real-time interaction with lower latency.

Why Use WebSockets in Flutter?

Real-time updates – Ideal for chat applications, live notifications, and stock market apps.
Reduced latency – Provides instant data updates without repeated HTTP requests.
Efficient communication – Eliminates the need for constant polling, reducing bandwidth usage.
Bidirectional communication – Both the client and server can send messages anytime.

Setting Up WebSockets in Flutter

Flutter provides built-in WebSocket support through the dart:io library. Below is a step-by-step guide to implementing WebSockets in a Flutter app.

Step 1: Import Dependencies

Ensure you import the necessary Dart package:

import 'dart:io';
import 'dart:async';

Step 2: Establish a WebSocket Connection

To establish a WebSocket connection, use the WebSocket.connect method:

Future<WebSocket> connectToWebSocket(String url) async {
  try {
    final socket = await WebSocket.connect(url);
    print('Connected to WebSocket');
    return socket;
  } catch (e) {
    print('Error connecting to WebSocket: $e');
    rethrow;
  }
}

Step 3: Sending and Receiving Messages

Once connected, you can send and listen to messages as follows:

void handleWebSocket(WebSocket socket) {
  // Listen for messages from the server
  socket.listen((message) {
    print('Received: $message');
  });
  
  // Sending a message to the server
  socket.add('Hello from Flutter!');
}

Step 4: Handling Disconnection

To handle disconnections and attempt reconnections, use:

void handleDisconnection(WebSocket socket, String url) {
  socket.done.then((_) {
    print('WebSocket disconnected. Reconnecting...');
    Future.delayed(Duration(seconds: 5), () => connectToWebSocket(url));
  });
}

Step 5: WebSockets with Flutter Web

For Flutter Web, WebSockets are handled using the dart:html package instead of dart:io. Here’s how you can implement WebSockets in a Flutter Web project:

import 'dart:html';

void connectToWebSocket(String url) {
  WebSocket socket = WebSocket(url);
  
  socket.onOpen.listen((event) {
    print('WebSocket connection established');
  });
  
  socket.onMessage.listen((MessageEvent event) {
    print('Received: ${event.data}');
  });
  
  socket.onClose.listen((event) {
    print('WebSocket connection closed');
  });
  
  socket.onError.listen((event) {
    print('WebSocket error occurred');
  });
}

Step 6: Implementing WebSocket Communication in a Flutter App

To fully integrate WebSockets in a Flutter application, you might want to use state management solutions like Provider or Riverpod to manage the WebSocket connection efficiently.

Using Provider for WebSocket Management

You can create a WebSocket service and provide it to your widgets using Provider:

import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:async';
import 'package:provider/provider.dart';

class WebSocketService with ChangeNotifier {
  WebSocket? _socket;
  StreamSubscription? _subscription;
  final String url;

  WebSocketService(this.url) {
    _connect();
  }

  void _connect() async {
    try {
      _socket = await WebSocket.connect(url);
      _subscription = _socket!.listen((message) {
        print('Received: $message');
        notifyListeners();
      });
    } catch (e) {
      print('Error connecting to WebSocket: $e');
    }
  }

  void sendMessage(String message) {
    _socket?.add(message);
  }

  @override
  void dispose() {
    _subscription?.cancel();
    _socket?.close();
    super.dispose();
  }
}

Using the WebSocket Service in the UI

class WebSocketDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => WebSocketService('wss://example.com/socket'),
      child: Scaffold(
        appBar: AppBar(title: Text('WebSocket Demo')),
        body: Consumer<WebSocketService>(
          builder: (context, socketService, child) {
            return Center(
              child: ElevatedButton(
                onPressed: () => socketService.sendMessage('Hello Server!'),
                child: Text('Send Message'),
              ),
            );
          },
        ),
      ),
    );
  }
}

Conclusion

WebSockets in Flutter enable real-time, low-latency communication, making them ideal for applications like chat systems, live notifications, and collaborative tools. By following these steps, you can integrate WebSockets into your Flutter app and create a seamless real-time experience for your users.

WebSockets in Flutter for Real-Time Apps