Implementing WebSocket in Flutter Apps

Real-time communication is a crucial component of modern mobile apps, especially in chat applications, multiplayer games, live notifications, or collaborative platforms. In Flutter, implementing WebSocket is a powerful way to establish full-duplex communication between client and server. This article will walk you through the key steps in setting up and managing WebSocket connections in Flutter applications using the built-in WebSocket features and third-party libraries like web_socket_channel.

What is WebSocket?

WebSocket is a communication protocol that provides a persistent, bidirectional channel between the client and the server over a single TCP connection. Unlike HTTP requests, which are unidirectional and stateless, WebSocket maintains an open connection, enabling continuous data exchange with low latency.

Benefits of Using WebSocket in Flutter

• Low latency: Suitable for apps that require real-time updates.
• Efficient communication: Data flows both ways without reestablishing a connection.
• Reduced server load: One open connection per client.
• Great for user engagement: Immediate delivery of messages or updates.

Setting Up WebSocket in Flutter

To begin, you need to include the web_socket_channel package in your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  web_socket_channel: ^2.4.0

After adding the dependency, run flutter pub get to install it.

Creating a WebSocket Connection

Here’s a basic example of using WebSocketChannel:

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

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

class MyApp extends StatelessWidget {
  final WebSocketChannel channel =
      WebSocketChannel.connect(Uri.parse('wss://echo.websocket.org'));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WebSocket Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('WebSocket Example')),
        body: WebSocketPage(channel: channel),
      ),
    );
  }
}

class WebSocketPage extends StatefulWidget {
  final WebSocketChannel channel;

  WebSocketPage({required this.channel});

  @override
  _WebSocketPageState createState() => _WebSocketPageState();
}

class _WebSocketPageState extends State<WebSocketPage> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        children: <Widget>[
          TextField(
            controller: _controller,
            decoration: InputDecoration(labelText: 'Send a message'),
          ),
          ElevatedButton(
            onPressed: () {
              widget.channel.sink.add(_controller.text);
            },
            child: Text('Send'),
          ),
          StreamBuilder(
            stream: widget.channel.stream,
            builder: (context, snapshot) {
              return Text(snapshot.hasData ? '${snapshot.data}' : '');
            },
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    widget.channel.sink.close();
    super.dispose();
  }
}

This simple Flutter app demonstrates sending and receiving messages using WebSocket. You can extend this to handle JSON data, use authentication headers, or integrate with backend services like Firebase Functions, AWS API Gateway, or Node.js servers.
Handling Disconnections and Errors

Always make sure to handle disconnections gracefully. Monitor the connection state and retry or show a meaningful error to users when the connection fails.

widget.channel.stream.listen(
  (message) {
    print('Received: $message');
  },
  onError: (error) {
    print('WebSocket error: $error');
  },
  onDone: () {
    print('WebSocket connection closed');
  },
);

External Resource

For more advanced usage and WebSocket security practices, refer to WebSocket Security Best Practices by OWASP.