WebSockets в Flutter — Создание приложений в реальном времени

FlutterPulse

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Реальное время связи — это переломный момент в современных приложениях, позволяющий использовать функции вроде живого обмена сообщениями, обновлений акций, многопользовательских игр и совместных инструментов.

✅ Что такое WebSockets и как они работают
✅ Как интегрировать WebSockets в Flutter
✅ Реализация системы реального времени чата с использованием WebSockets
✅ Обработка состояний соединения и ошибок

К концу вы сможете создавать реальное двустороннее общение в своих приложениях Flutter. 🚀

1. Понимание WebSockets

Что такое WebSockets?

WebSockets предоставляют постоянный двусторонний канал связи между клиентом и сервером. В отличие от традиционных HTTP-запросов, требующих опроса, WebSockets поддерживают открытое соединение, позволяя серверу отправлять данные клиенту в реальном времени.

Почему использовать WebSockets в Flutter?

🔹 Низкая задержка: Нет необходимости отправлять повторные HTTP-запросы.
🔹 Эффективность: Использует одно TCP-соединение вместо множества HTTP-вызовов.
🔹 Обновления в реальном времени: Идеально для чат-приложений, живых уведомлений, тикеров акций и игр.

2. Настройка WebSockets в Flutter

Flutter предоставляет встроенный класс WebSocket в библиотеке dart:io, но мы будем использовать пакет web_socket_channel для лучшей совместимости как с мобильными, так и с веб-приложениями.

Шаг 1: Установка зависимостей

Добавьте пакет в pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  web_socket_channel: ^2.4.0

Запустите:

flutter pub get

3. Подключение к серверу WebSocket

Шаг 2: Установление соединения WebSocket

Создайте сервис WebSocket для управления реальным временем связи:

import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:web_socket_channel/status.dart' as status;

class WebSocketService {
  final String socketUrl = "wss://echo.websocket.org"; // Пример сервера WebSocket
  late WebSocketChannel channel;

  void connect() {
    channel = WebSocketChannel.connect(Uri.parse(socketUrl));

    // Слушаем входящие сообщения
    channel.stream.listen(
      (message) {
        print("Received: $message");
      },
      onError: (error) {
        print("WebSocket error: $error");
      },
      onDone: () {
        print("WebSocket connection closed.");
      },
    );
  }

  void sendMessage(String message) {
    channel.sink.add(message);
    print("Sent: $message");
  }

  void disconnect() {
    channel.sink.close(status.goingAway);
  }
}

Как это работает:
✅ connect(): Устанавливает WebSocket-соединение.
✅ sendMessage(): Отправляет сообщение на сервер.
✅ listen(): Получает сообщения от сервера.
✅ disconnect(): Закрывает соединение после завершения.

4. Создание интерфейса реального времени для чата

Теперь давайте создадим базовый интерфейс для приложения для чата в реальном времени с использованием WebSockets.

Шаг 3: Создание экрана чата

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

class ChatScreen extends StatefulWidget {

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

class _ChatScreenState extends State<ChatScreen> {
  final WebSocketChannel channel =
      WebSocketChannel.connect(Uri.parse('wss://echo.websocket.org'));
  final TextEditingController _controller = TextEditingController();
  List<String> messages = [];

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      channel.sink.add(_controller.text);
      setState(() {
        messages.add("Вы: ${_controller.text}");
      });
      _controller.clear();
    }
  }

  @override
  void initState() {
    super.initState();
    channel.stream.listen(
      (message) {
        setState(() {
          messages.add("Сервер: $message");
        });
      },
      onError: (error) => print("Ошибка: $error"),
      onDone: () => print("WebSocket закрыт."),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Чат в реальном времени")),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: messages.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(messages[index]),
                );
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      hintText: "Введите сообщение...",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Как работает это приложение для чата:
✅ Пользователи могут ввести сообщение и отправить его через WebSockets.
✅ Сервер отправляет сообщение обратно, имитируя взаимодействие в реальном времени.
✅ Сообщения отображаются в интерфейсе чата динамически.

5. Обработка состояний WebSocket-соединения

WebSockets могут отключаться из-за проблем с сетью. Для повышения надежности необходимо:

Шаг 4: Автоматическое повторное подключение WebSockets

Измените сервис WebSocket:

void connect() {
  channel = WebSocketChannel.connect(Uri.parse(socketUrl));
  channel.stream.listen(
    (message) {
      print("Получено: $message");
    },
    onError: (error) {
      print("Ошибка WebSocket: $error");
      reconnect(); // Попытка повторного подключения
    },
    onDone: () {
      print("WebSocket закрыт.");
      reconnect(); // Автоматическое повторное подключение
    },
  );
}

void reconnect() {
  Future.delayed(Duration(seconds: 5), () {
    print("Повторное подключение...");
    connect();
  });
}

Теперь, если соединение обрывается, оно будет автоматически пытаться подключиться снова через 5 секунд. 🔄

6. Использование WebSockets для уведомлений в реальном времени

WebSockets также можно использовать для отправки уведомлений в реальном времени. Пример:

void listenForNotifications() {
  channel.stream.listen((message) {
    showNotification(message);
  });
}

void showNotification(String message) {
  print("Новое уведомление: $message");
}

Теперь любые новые сообщения от сервера вызывают уведомление в реальном времени! 🔔

Итоговые мысли

Используя WebSockets в Flutter, мы достигли:
✅ Двусторонняя связь в реальном времени
✅ Полнофункциональное приложение для чата с использованием WebSockets
✅ Механизм автоматического повторного подключения для повышения надежности
✅ WebSockets для уведомлений в реальном времени

🔥 Что дальше?
🔹 Реализовать частные чаты с использованием WebSockets
🔹 Защитить WebSocket-соединения с помощью токенов аутентификации
🔹 Создать многопользовательские игры с использованием WebSockets