🚀Comunicação WebSocket

Utilizando WebSockets em uma Aplicação Flutter

Introdução

WebSockets são uma tecnologia de comunicação bidirecional que permitem a transferência de dados em tempo real entre o cliente (neste caso, seu aplicativo Flutter) e o servidor. Esta documentação explicará como você pode incorporar WebSockets em sua aplicação Flutter para criar comunicação em tempo real.

Dependências

Para usar WebSockets em uma aplicação Flutter, você precisará adicionar uma dependência ao seu pubspec.yaml. Vamos usar o pacote web_socket_channel para facilitar a comunicação WebSocket. Adicione-o da seguinte maneira:

dependencies:
  flutter:
    sdk: flutter
  web_socket_channel: ^2.1.0 # Verifique a versão mais recente no pub.dev

Em seguida, execute flutter pub get para instalar as dependências.

Implementando WebSockets

Aqui estão as etapas para implementar WebSockets em sua aplicação Flutter:

1. Importe as bibliotecas necessárias:

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

2. Crie uma instância de WebSocketChannel:

final channel = WebSocketChannel.connect(
  Uri.parse('ws://seuservidor.com/ws_endpoint'),
);

Substitua 'ws://seuservidor.com/ws_endpoint' pelo URL do seu servidor WebSocket real.

3. Inicie a comunicação WebSocket:

Você pode fazer isso em uma função ou em um local apropriado do ciclo de vida do seu aplicativo. Por exemplo, em um StatefulWidget, você pode iniciar a comunicação WebSocket no método initState().

`@override
void initState() {
  super.initState();
  _connectToWebSocket();
}

void _connectToWebSocket() {
  // Implemente a lógica aqui para se conectar ao servidor WebSocket
}

4. Envie e receba mensagens:

Agora que você está conectado ao servidor WebSocket, pode enviar e receber mensagens. Por exemplo, para enviar uma mensagem:

channel.sink.add('Sua mensagem aqui'); 

E para ouvir mensagens recebidas:

channel.stream.listen(
  (message) {
    // Lógica para lidar com a mensagem recebida
  },
);

5. Feche a conexão WebSocket quando não for mais necessária:

É importante fechar a conexão WebSocket quando você não precisar mais dela para liberar recursos.

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

Implementando WebSockets com a Classe MessageService

Vamos explicar como implementar WebSockets em sua aplicação Flutter usando a classe MessageService como exemplo. A classe MessageService gerencia a conexão WebSocket, envia e recebe mensagens WebSocket e lida com reconexões automaticamente.

class MessageService {
  late WebSocketChannel channel;
  String? connectedRoom;

  Future initConnection(String room) async {
    // Cria a URL com base no nome da sala
    String url = "ws://seuservidor.com/ws/chat/$room/";
    debugPrint("[WEBSOCKET] Connecting to $url");

    // Estabelece a conexão WebSocket
    channel = WebSocketChannel.connect(
      Uri.parse(url),
    );
    debugPrint("[WEBSOCKET] Connected to chat websocket");
    connectedRoom = room;
  }

  Future closeConnection() async {
    // Fecha a conexão WebSocket
    channel.sink.close();
    connectedRoom = null;
  }

  Future _retryConnection({
    required void Function(String) onReceive,
  }) async {
    if (connectedRoom != null) {
      debugPrint("[WEBSOCKET] Reconnecting...");
      await initConnection(connectedRoom!);
      await broadcastNotifications(
        onReceive: onReceive,
      );
    } else {
      debugPrint("[WEBSOCKET] No room to connect");
    }
  }

  Future broadcastNotifications({
    required void Function(String) onReceive,
  }) async {
    // Configura a recepção de mensagens e lida com erros e reconexões
    channel.stream.listen(
      (event) {
        debugPrint("[WEBSOCKET] received: $event");
        onReceive(event);
      },
      onError: (_) async {
        debugPrint("[WEBSOCKET] websocket reception error.");
        _retryConnection(onReceive: onReceive);
      },
      onDone: () async {
        debugPrint("[WEBSOCKET] Connection closed.");
        _retryConnection(onReceive: onReceive);
      },
      cancelOnError: true,
    );
  }

  void sendMessage(String message) {
    // Envia uma mensagem pelo WebSocket
    channel.sink.add(message);
    debugPrint("[WEBSOCKET] sent: $message");
  }
}

• WebSocketChannel channel: Esta variável armazena o canal WebSocket que será usado para comunicação. É inicializada como late, o que significa que seu valor será atribuído em algum momento após a criação do objeto.

• String? connectedRoom: Uma variável que armazena o nome da sala à qual o cliente está conectado. Inicializada como null, ela será atualizada quando uma conexão WebSocket for iniciada.

• Future initConnection(String room) async: Esta função é responsável por iniciar uma conexão WebSocket com o servidor. Ela recebe o nome da sala como parâmetro e constrói a URL do WebSocket com base nesse nome. Em seguida, cria e estabelece uma conexão WebSocket usando a biblioteca web_socket_channel. A variável connectedRoom é atualizada com o nome da sala conectada.

• Future closeConnection() async: Esta função é usada para fechar a conexão WebSocket. Ela fecha o sink do canal, que é a parte usada para enviar mensagens, e redefine a variável connectedRoom como null.

• Future _retryConnection({required void Function(String) onReceive}) async: Esta função é usada internamente para tentar reconectar automaticamente à sala quando ocorre um erro de conexão WebSocket ou a conexão é encerrada. Ela verifica se connectedRoom não é nulo e, em seguida, chama initConnection para reconectar e broadcastNotifications para reconfigurar a recepção de mensagens.

• Future broadcastNotifications({required void Function(String) onReceive}) async: Esta função inicia a recepção de mensagens WebSocket. Ela configura um listener no stream do canal WebSocket para receber mensagens e chama a função de callback onReceive sempre que uma mensagem é recebida. Além disso, lida com erros e o fechamento da conexão, tentando reconectar automaticamente conforme necessário.

• void sendMessage(String message): Esta função é usada para enviar mensagens para o servidor WebSocket. Ela usa o sink do canal para enviar a mensagem especificada e registra a mensagem enviada para fins de depuração.

A classe MessageService fornece uma estrutura sólida para a comunicação WebSocket em sua aplicação Flutter, incluindo a capacidade de reconectar automaticamente em caso de falhas de conexão. Certifique-se de usá-la de acordo com os requisitos específicos do seu projeto e de personalizá-la conforme necessário.

Utilizando a Classe MessageService

1. Crie uma instância da classe MessageService:

final messageService = MessageService();

2. Inicie a conexão WebSocket:

Para iniciar uma conexão WebSocket, chame o método initConnection da classe MessageService com o nome da sala desejada:

await messageService.initConnection("nomedasala");

Lembre-se de substituir "nomedasala" pelo nome da sala real que você deseja conectar.

3. Envie e receba mensagens:

• Enviar Mensagem: Para enviar mensagens, use o método sendMessage da instância messageService:

messageService.sendMessage("Sua mensagem aqui");

• Receber Mensagens: Configure a função de callback onReceive ao chamar o método broadcastNotifications. Isso permitirá que você processe as mensagens recebidas:

messageService.broadcastNotifications(
  onReceive: (message) {
    // Lógica para lidar com a mensagem recebida
    print("Mensagem recebida: $message");
  },
);

4. Feche a conexão WebSocket quando não for mais necessária:

Certifique-se de fechar a conexão WebSocket quando ela não for mais necessária para liberar recursos:

messageService.closeConnection();

Com esta documentação, você deve estar pronto para usar WebSockets em sua aplicação Flutter e pode incorporar a classe MessageService como um exemplo para gerenciar a comunicação WebSocket. Certifique-se de configurar o URL do servidor WebSocket real e a lógica de processamento de mensagens de acordo com sua aplicação específica.