The Road to WebSockets

Back in 2008, developers Michael Carter and Ian Hickson faced challenges with a technology called Comet when building real-time features for web apps. They felt it wasn’t efficient or smooth enough, so they worked together through online chats and discussions to create something better. This effort led to the birth of WebSocket, a standard designed for modern, real-time communication on the web.

Understanding WebSockets in Flutter

WebSockets provide a full-duplex communication channel over a single, long-lived connection, allowing for real-time data exchange between the client and server. Unlike traditional HTTP requests, which require a new connection for each request-response pair, WebSockets maintain an open connection, significantly reducing latency and overhead.

In the context of Flutter, using WebSockets can enhance your app's interactivity and responsiveness. This is particularly useful for applications that require live updates, such as chat apps, real-time notifications, and live data feeds.

Comparing WebSockets and HTTP

HTTP is a request/response protocol, which means the client (like a browser) sends a request, and the server responds. It’s not built for bidirectional, always-on, real-time communication over a single connection.

To mimic real-time communication, developers sometimes use two HTTP connections: one for sending data from the client to the server and another for receiving updates from the server. But this approach comes with a big problem—it doubles the resources needed for each client, which puts a heavy load on the server.

As web technologies advanced and users started expecting faster, richer, and real-time experiences, it became clear that HTTP alone wasn’t enough. This is why a better solution, like WebSocket, was created.

Use cases and benefits

The WebSocket technology has broad applicability. You can use it for different purposes, such as streaming data between backend services, or connecting a backend with a frontend via long-lasting, full-duplex connections. In a nutshell, WebSockets are an excellent choice for architecting event-driven systems and building realtime apps and services where it’s essential for data to be delivered immediately.

Real-time Updates (One-way Communication):

Here, the server sends frequent, low-latency updates to the client. Examples include:

• Live sports scores
• Alerts
• Real-time dashboards
• Location tracking

Two-way Communication (Bidirectional):

In this case, both the client and server can send messages to each other. Examples include:

• Chat apps
• Virtual events or classrooms (with features like polls, quizzes, and Q&A)
• Multi-user collaboration (e.g., multiple people editing the same document together)

Setting Up Your Flutter Environment

Before diving into WebSocket implementation, ensure your Flutter environment is properly set up. You need to have Flutter installed and configured on your system. Additionally, you'll need the web_socket_channel package, which provides a WebSocketChannel that integrates WebSocket functionality with Flutter.

To install the web_socket_channel package, add the following dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  web_socket_channel: ^2.1.0        

Then, run flutter pub get to install the package.

Import the necessary packages

Establishing a WebSocket connection in Flutter is straightforward with the web_socket_channel package.

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

Initialize the WebSocket channel

    final channel = IOWebSocketChannel.connect('ws://echo.websocket.org');        

Create a basic Flutter app structure

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

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

Build the WebSocketDemo widget

1    class WebSocketDemo extends StatefulWidget {
2      @override
3      _WebSocketDemoState createState() => _WebSocketDemoState();
4    }
5
6    class _WebSocketDemoState extends State<WebSocketDemo> {
7      final channel = IOWebSocketChannel.connect('ws://echo.websocket.org');
8
9      @override
10      Widget build(BuildContext context) {
11        return Scaffold(
12          appBar: AppBar(
13            title: Text('WebSocket Demo'),
14          ),
15          body: StreamBuilder(
16            stream: channel.stream,
17            builder: (context, snapshot) {
18              return Center(
19                child: Text(snapshot.hasData ? '${snapshot.data}' : ''),
20              );
21            },
22          ),
23        );
24      }
25
26      @override
27      void dispose() {
28        channel.sink.close();
29        super.dispose();
30      }
31    }
32        

This example establishes a WebSocket connection to an echo server and displays any incoming messages.