Implementing Real-Time Features with WebSockets or other Protocols in Flutter

In modern application development, real-time features have become increasingly crucial. Whether it’s live chat, real-time data updates, or collaborative editing, users expect instantaneous interactions. Flutter, Google’s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, provides several options for implementing real-time features. Among these, WebSockets are a popular choice, but other protocols and services also offer viable solutions. In this blog post, we’ll explore how to implement real-time features in Flutter using WebSockets and alternative protocols.

Why Use Real-Time Features?

Real-time features provide several benefits:

• Enhanced User Experience: Instant updates keep users engaged and informed.
• Improved Collaboration: Real-time collaboration enables multiple users to interact simultaneously.
• Data Synchronization: Ensures data consistency across devices and users.

Implementing Real-Time Features with WebSockets in Flutter

WebSockets provide a persistent, full-duplex communication channel over a single TCP connection. This makes them ideal for real-time applications.

Step 1: Add the WebSocket Dependency

First, add the websocket package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  websocket: ^3.0.5

Then, run flutter pub get to install the dependency.

Step 2: Create a WebSocket Connection

Create a class to manage the WebSocket connection:

import 'package:websocket/websocket.dart' as ws;

class WebSocketManager {
  final String url;
  ws.WebSocketChannel? channel;

  WebSocketManager(this.url);

  Future connect() async {
    try {
      channel = ws.IOWebSocketChannel.connect(Uri.parse(url));
      print('WebSocket connected to $url');
    } catch (e) {
      print('Error connecting to WebSocket: $e');
    }
  }

  void sendMessage(String message) {
    if (channel != null) {
      channel!.sink.add(message);
    } else {
      print('WebSocket is not connected.');
    }
  }

  Stream getMessages() {
    return channel?.stream ?? Stream.empty();
  }

  void disconnect() {
    channel?.sink.close();
    print('WebSocket disconnected.');
  }
}

Step 3: Use the WebSocket in Your Flutter App

Implement the WebSocket in your Flutter application. Here’s an example:

import 'package:flutter/material.dart';
import 'package:realtime_app/websocket_manager.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Real-Time Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State {
  final TextEditingController _controller = TextEditingController();
  final WebSocketManager _socketManager = WebSocketManager('ws://your-websocket-server.com'); // Replace with your WebSocket server URL
  List _messages = [];

  @override
  void initState() {
    super.initState();
    _socketManager.connect().then((_) {
      _socketManager.getMessages().listen((message) {
        setState(() {
          _messages.add('Received: $message');
        });
      });
    });
  }

  @override
  void dispose() {
    _socketManager.disconnect();
    super.dispose();
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      _socketManager.sendMessage(_controller.text);
      setState(() {
        _messages.add('Sent: ${_controller.text}');
      });
      _controller.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Real-Time Chat'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_messages[index]),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      hintText: 'Enter message',
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Replace 'ws://your-websocket-server.com' with your actual WebSocket server URL.

Alternative Protocols and Services for Real-Time Features

While WebSockets are a common choice, several other protocols and services are available for implementing real-time features in Flutter.

1. Firebase Realtime Database

Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and synchronize data between your users in real-time. It’s an excellent option for simple real-time data synchronization.

How to Use Firebase Realtime Database in Flutter

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  final databaseReference = FirebaseDatabase.instance.reference();
  String message = '';

  @override
  void initState() {
    super.initState();
    databaseReference.child('message').onValue.listen((event) {
      setState(() {
        message = event.snapshot.value.toString();
      });
    });
  }

  void updateMessage(String newMessage) {
    databaseReference.child('message').set(newMessage);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Firebase Realtime Database Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Message from Firebase:',
            ),
            Text(
              message,
              style: TextStyle(fontSize: 20),
            ),
            ElevatedButton(
              child: Text('Update Message'),
              onPressed: () {
                updateMessage('Hello Firebase!');
              },
            ),
          ],
        ),
      ),
    );
  }
}

2. Stream

Stream is a scalable solution for building activity feeds and chat applications. It offers client-side SDKs and a robust API for managing real-time data.

How to Use Stream in Flutter

import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
import 'package:flutter/material.dart';

void main() async {
  final client = StreamChatClient(
    'YOUR_STREAM_API_KEY',
    logLevel: Level.INFO,
  );

  await client.connectUser(
    User(id: 'flutter_user'),
    'YOUR_STREAM_USER_TOKEN',
  );

  runApp(MyApp(client: client));
}

class MyApp extends StatelessWidget {
  final StreamChatClient client;

  const MyApp({Key? key, required this.client}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        return StreamChat(client: client, child: child);
      },
      home: ChannelListPage(),
    );
  }
}

class ChannelListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stream Chat Example')),
      body: ChannelsBloc(
        child: ChannelListView(
          filter: FilterEq('members', [StreamChat.of(context).currentUser!.id]),
          sort: [SortOption('last_message_at', direction: Sort.DESC)],
          limit: 20,
          channelWidget: ChannelPage(),
        ),
      ),
    );
  }
}

class ChannelPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ChannelHeader(),
      body: MessageListView(),
      bottomSheet: MessageInput(),
    );
  }
}

3. Socket.IO

Socket.IO is a library that enables real-time, bidirectional, and event-based communication between web clients and servers. It provides reliability features and can fall back to HTTP long polling if WebSockets are not available.

How to Use Socket.IO in Flutter

import 'package:flutter/material.dart';
import 'package:socket_io_client/socket_io_client.dart' as IO;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  late IO.Socket socket;
  String message = '';

  @override
  void initState() {
    super.initState();
    socket = IO.io('http://localhost:3000', { // Replace with your Socket.IO server URL
      'transports': ['websocket'],
      'autoConnect': false,
    });
    socket.connect();

    socket.onConnect((_) {
      print('Connected to Socket.IO server');
    });

    socket.on('message', (data) {
      setState(() {
        message = data;
      });
    });

    socket.onDisconnect((_) {
      print('Disconnected from Socket.IO server');
    });
  }

  void sendMessage(String newMessage) {
    socket.emit('send_message', newMessage);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Socket.IO Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Message from Server:',
            ),
            Text(
              message,
              style: TextStyle(fontSize: 20),
            ),
            ElevatedButton(
              child: Text('Send Message'),
              onPressed: () {
                sendMessage('Hello Socket.IO!');
              },
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    socket.disconnect();
    super.dispose();
  }
}

Conclusion

Implementing real-time features in Flutter can significantly enhance user experience and engagement. WebSockets, Firebase Realtime Database, Stream, and Socket.IO offer different approaches and levels of abstraction. Choose the solution that best fits your project’s requirements, considering factors such as scalability, complexity, and integration with existing services. With the right tools, building real-time Flutter applications is both feasible and rewarding.