Server-Sent Events(SSE) com dart (Shelf e Flutter)

Fala Devs! Com toda certeza você já deve ter tido a necessidade de fazer uma requisição HTTP, eu mesmo já escrevi um artigo muito legal que utilizamos o DIO como cliente HTTP para fazermos requisições a nossa API (https://blog.flutterando.com.br/consumindo-api-utilizando-o-dio-9ec72aeceeaa).

Entretanto podemos passar por situações que precisamos fazer uma requisição em que o resultado venha de forma gradativa ao cliente, há algumas formas que podemos realizar esta tarefa, a primeira maneira é fazer que nosso cliente fique acessando o servidor continuamente em busca de atualizações, esta técnica é chamada de pooling.

Outra forma seria utilizar os WebSockets, eles são talvez a melhor opção quando queremos receber dados de forma gradativa e em tempo real.

Em seu funcionamento é criada uma sessão de comunicação interativa entre o cliente e o servidor, recebendo mensagens em tempo real, funcionando de forma semelhante ao Firestore.

Entretanto ela é uma técnica um pouco custosa e complexa, e as vezes não precisamos de lima solução tão robusta assim, então existe um meio termo?

E a resposta é SIM! O Server-Sent Events(popularmente conhecido como SSE), um método que funciona de forma semelhante ao Websocket, ele basicamente definira uma comunicação em uma API chamada de EventSource e esta comunicação se manterá aberta recebendo mensagens de forma gradativa do servidor.

E um bônus, neste artigo não implementaremos apenas o cliente, veremos também como criar o SSE do lado do servidor e para isto utilizaremos, é claro, o DART para o backend com o pacote SHELF. https://pub.dev/packages/shelfv

Servidor

Para isto vamos criar um projeto em branco em Dart. Execute

dart create server

Utilizaremos três pacotes para desenvolver nossa API em Dart:

Shelf(https://pub.dev/packages/shelf) — Pacote responsável por nos ajudar a criar nossos webservers

Shelf_router(https://pub.dev/packages/shelf_router) — Pacote que trata a criação de caminhas para os nossos endpoints.

Eventsource(https://pub.dev/packages/eventsource) — Pacote responsável por implementar o padrão do eventsource(SSE) em nossa api.

Com esses três pacotes nosso pubspec deverá ficar da seguinte maneira

A primeira tarefa que faremos é fazer uma implementação do eventsource em nosso projeto

Basta adicionarmos a implementação a seguir

Agora podemos implementar o entry point do nossa API que está no sse.dart

Primeiramente criamos o método que irá gerar as as mensagens retornadas para o cliente de forma assíncrona, para isto basta quando quisermos retornar alguma informação executar o publisher.add() passando um evento de resposta e na hora que finalizar o processamento executar o publisher.close()

Feito isso podemos criar nosso endpoint (no caso o /events) e passar nosso EventSourcePublisher como parâmetro do método eventSourceHandler.

E sucesso! Nossa API está pronta, basta executar e ela estará disponível na porta que configuramos (8080), execute:

dart run

O resultado será o seguinte:

Cliente

No nosso aplicativo Flutter só iremos precisar do pacote eventsource(https://pub.dev/packages/eventsource)

Adicione ele no seu pubspec

Este pacote nos oferece um objeto Eventsource que contém o método conect() que faz a conexão com a API e rebe as mensagens. Como próximo passo devemos criar uma Stream e emitir o resultado da mensagem que vem da API nessa Stream.

Também devemos criar um getter para conseguir acessar a stream.

A implementação da classe completa deve ficar assim:

Agora temos uma stream que emite um resultado de um Map agora em nossa datasource podemos escutar essa stream para ela fazer o mapper do JSON para um Model

No repositório fazemos um mapper de model para entity.

E por fim na nossa controller podemos escutar a Stream e mandar atualizar nossa store para fazer reatividade na nossa page.

Desta forma teremos o seguinte resultado

Legal ne?? muito simples trabalhar com SSE em nossos aplicativos.

O projeto completo pode conferir abaixo
https://github.com/toshiossada/flutter_sse

Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil