Sistema de Chat

Ao arquitetar o sistema de chat procuramos uma estrutura que pudesse ser caracterizada pela sua performance do lado do cliente e baixo tráfego de dados entre este e o servidor.
No mapa de pesquisa da página inicial, toda a informação é obtida com base numa lógica de pesquisa na base de dados e/ou posterior pesquisa na Amazon, fazendo um re-factor à informação obtida, sendo a informação final fornecida ao sistema numa ficha de XML criada no momento e segundo os critérios estabelecidos. O facto é que todo este processo levava, por vezes, a tempos de carregamento mais longos do que os desejados, algo que não pode acontecer num sistema de chat, onde longos históricos de mensagens têm de ser rapidamente carregados e a troca de mensagens tem de ocorrer o mais rapidamente possível.

Modal de chat que permite aos utilizadores trocarem mensagens instantâneamente

Como forma de optimizar o processo começamos por pesquisar acerca do uso de JSON versus XML. Vindo a descobrir que JSON é 21% mais leve do que XML (devido principalmente ao facto de existir menos encoding/marking dos objetos), preferimos trocar a estruturação forte do XML (vantagens que não nos eram úteis para esta utilização) pelo leve peso e facilidade de interpretação (programática) dos dados devolvidos em JSON.

Enquanto que com XML tínhamos de percorrer os resultados devolvidos pela ficha gerada, tendo conhecimento dos nomes dos vários campos, verificar se estes eram ‘undefined’, entre outras etapas de processamento, utilizando JSON ultrapassamos todo este trabalho de processamento, que dificultava significativamente a leitura e complexidade do código e tornava os ficheiros de JavaScript significativamente mais longos e pesados (tanto a nível de tamanho como de recursos necessários para o seu processamento).

Exemplo de uma chamada Ajax e interpretação dos dados devolvidos em XML com JavaScript puro (54 Linhas)
Exemplo de uma chamada Ajax e interpretação dos dados devolvidos em JSON com jQuery (22 Linhas)

Uma vez que usamos Bootstrap temos obrigatoriamente de importar jQuery em todas as páginas, e já anteriormente fazíamos uso da framework para facilitar certas funcionalidades. Ao desenvolver o sistema de chat passamos a fazer uso completo da mesma, tirando partido de algumas das vantagens fundamentais que esta oferece:

  • Selectors avançados de elementos facilitados;
  • Sintaxe mais leve e simplificada;
  • Funcionalidades específicas direcionadas para Ajax (tanto para requests de GET como de POST) e interpretação dos dados devolvidos;
    - Adição dos elementos devolvidos com facilidade através do ‘append’ e ‘prepend’;
  • Facilidade de lidar com chamadas assíncronas com a propriedade ‘.done’ de um objeto Ajax, permitindo executar uma porção do código apenas quando os dados já foram devolvidos e interpretados (JavaScript Promise).

Uma vez que a funcionalidade de chat tem de ser ubiqua e facilmente acessível ao longo de todas as páginas do website (e da aplicação mobile), existe um icon de chat sempre presente no canto inferior direito do ecrã, que nos avisa quando temos mensagens novas.

Podemos também criar uma nova conversa visitando o perfil de um utilizador e clicando no botão conversar, no canto superior direito.

Perfil de um utilizador, demonstrando a sua informação e permitindo-nos criar com ele uma conversa.

O script ‘chat.js’ está intrinsecamente associado ao ‘notifications.js’, sendo que toda a informação de atualização, tal como novas mensagens ou respostas a empréstimos chega até ele a partir da tarefa recorrente de procura e atualização de novas notificações para mostrar ao utilizador.

Show your support

Clapping shows how much you appreciated BOOX’s story.