Por: @leonardom
Publicado em: 2019-05-29

Web sockets

Conforme a aplicação está evoluindo, está surgindo necessidade de criar funcionalidades cada vez mais avançadas. Entre elas estão gráficos em tempo real, notificações, mensagens enviadas pelo servidor para o cliente. Por esse motivo, é importante que haja o estudo de ferramentas que atendam essa necessidade do sistema.

Uma ferramenta que atende a necessidade de comunicação bidirecional (client-server, server-client), é o **websocket. **Websockets é uma tecnologia avançada que torna possível abrir uma sessão de comunicação interativa entre o navegador do usuário e um servidor. Com esta API, você pode enviar mensagens para um servidor e receber respostas orientadas a eventos sem ter que consultar o servidor para obter uma resposta.

Podemos também utilizar ou não bibliotecas e ferramentas que fazem uso do websocket, como:

Websockets puros (https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications);
Socket.io (https://socket.io/);
Crossbar.io (https://crossbar.io/);

Para esse Lab, foi escolhido fazer o uso do Socket.io.

Socket.io

Socket.io é uma biblioteca que permite fazer a comunicação bidirecional entre cliente e servidor. A mesma não é uma implementação de websocket, porém faz uso dele quando possível. Quando não é possível, pela uso de um navegador antigo por exemplo, são utilizadas alternativas para fazer a comunicação.

O socket.io permite que faça uma separação entre namespaces e salas para que haja uma separação de responsabilidades.

Através da separação de namespaces, também existe a separação de salas (rooms). Estas salas são geradas pelo servidor, e é possível enviar certos eventos somente para determinadas salas. Isso flexibiliza o envio dos dados e permite que seja feita uma separação de grupos, por exemplo.

O Socket.io também faz o gerenciamento das conexões, e é flexível o suficiente para utilizar uma conexão para cada *namespace, *ou reaproveitálas.

Flask-socket.io

Para o backend, foi utilizada uma biblioteca adicional para integrar o socket.io com o flask, que é a flask-socketio (https://flask-socketio.readthedocs.io/en/latest/).

Padrões definidos

Para melhor escalabilidade da comunicação entre os componentes do sistema, é importante definir alguns padrões para organização da comunicação. Estes padrões foram definidos pela equipe de desenvolvimento.

Foram definidos que para:

**Contextos: **Separar em namespaces diferentes;
**Grupos de usuários: **Separar em salas (rooms) diferentes;
**Informações enviadas pelo servidor: **Seja utilizado eventos.

Exemplo desse padrão:

Contexto: Notificações;
Grupos de usuários: Administradores, Todos;
Informações enviadas pelo servidor: ‘firewall_rules_applyied’, ‘openvpn_restarted’.

Outro exemplo:

**Contexto: **System;
**Grupos de usuários: **DBC, Networks (permissões);
Informações enviadas pelo servidor: ‘network_chart:update’, ‘cpu_chart:update’.

Com esse padrão, acreditamos que seja possível obter uma boa performance, pois podem ser utilizadas conexões diferentes para cada *namespace, *não congestionando a conexão.

Exemplo de uso das bibliotecas

No lado do cliente, é utilizada a biblioteca socket.io-client é muito simples fazer a implementação de chamadas/subscribe de eventos. (Para outros métodos, pode ser consultado na url https://socket.io/docs/client-api/)

import io from 'socket.io-client'

const socket = io('/namespace')

socket.on('my_pong', data => {
  console.log('dados eviados pelo servidor', data)
})

socket.$emit('my_ping', payload)

No backend, a implementação é feita da seguinte maneira:

TODO