Comunicação cliente-servidor em tempo real com Socket.IO

Guia com exemplos reais e casos de uso

João Gabriel
Mar 5 · 13 min read
Image for post
Image for post

O que já estamos acostumados a usar

Provavelmente todo desenvolvedor iOS já utilizou algum tipo de requisição para consultar uma informação na internet acessando alguma API. Uma forma de implementar esse tipo de requisição é usando uma URLSession. Nesse tipo de comunicação, o cliente faz uma requisição e sempre espera uma resposta do servidor, como no esquema abaixo:

Image for post
Image for post
Exemplo do fluxo de uma requisição e resposta para um servidor.

Motivações

As comunicações bidirecionais, nas quais o cliente pode requisitar o servidor e vice-versa, são possíveis com comunicação Socket. Como mostra o seguinte fluxo:

Image for post
Image for post
Exemplo do fluxo de uma requisição e resposta em uma comunicação socket.
  • Chat (disponível neste tutorial);
  • Login / Validação via QR Code (disponível nesse tutorial);
  • Jogos;
  • Gráficos de mercado financeiro;
  • Qualquer outro tipo de app que necessite de atualização em tempo real.

O que é o Socket.IO?

Socket.IO é um framework que facilita a implementação de Socket e está disponível para iOS, Android, e linguagens de programação utilizadas em back-end e front-end. Os exemplos deste post vão usar Swift (iOS) e Javascript (Web) para implementar o cliente e NodeJS para implementar o funcionamento do back-end.

Image for post
Image for post
Trecho de código em Swift exemplificando um evento sendo emitido.
Image for post
Image for post
Trecho de código em Swift exemplificando um evento sendo escutado.
Image for post
Image for post
Lista de eventos padrão Socket.

Utilizando Socket.IO

Vamos agora a um passo a passo para poder criar um primeiro app com Socket! 😃

  1. Selecione iOS e Single View App e clique em Next.
  2. Digite um nome para o projeto e clique em Next.
  3. Vá em File -> Swift Packages -> Add Package Dependency
  4. Depois cole o link https://github.com/socketio/socket.io-client-swift.git, e clique em Next.
  5. Selecione Branch: master e clique em Next.
  6. Para adicionar o framework, clique em Finish.

Exemplos de utilização

Os exemplos a seguir são algumas aplicações que se beneficiam do uso de Socket:

Image for post
Image for post
Exemplo de aplicação que recebe uma coordenada e movimenta um elemento na tela.
Image for post
Image for post
Exemplo de aplicação que recebe uma coordenada e atualiza um pin em um mapa.
Código do SocketParser em Swift, uma classe que auxilia a conversão da estrutura recebida para um objeto específico.
Struct representando a coordenada 2D
Protocolo para ser implementado pela controller, permitindo que o SocketManager se comunique com a controller.
Implementação do SocketPositionManager, que gerencia o acesso ao Socket.
Método implementado pela Controller, que manipula a posição de um elemento “element” na tela.
Método implementado pela Controller, que solicita que a tela altere a posição de um pin, utilizando um CLLocationCoordinate2D.
Servidor codificado em NodeJS.
Image for post
Image for post
Exemplo de aplicação de chat que recebe e emite mensagens de texto.
Implementação do SocketChatManager, que gerencia o acesso ao Socket para um app com chat.
  • user left” = recebe o username do usuário que se desconectou e o novo total de usuários ainda conectados.
  • new message” = recebe o username do usuário que enviou a mensagem e a mensagem enviada.
  • typing” = recebe o username do usuário que está digitando uma mensagem.
  • stop typing” = recebe o username do usuário que parou de digitar.
Servidor para aplicação chat codificado em nodeJS.
Image for post
Image for post
Exemplo de aplicação para validação utilizando a leitura de QRCode.
Image for post
Image for post
Fluxo de funcionamento da validação usando QRCode.
  1. Assim que se conecta, obtém seu SocketID;
  2. Página web mostra na tela o SocketID (só que codificado com o QRCode).
  1. Converte o QRCode para texto (esse texto é o SocketID do Cliente Web);
  2. Envia request para servidor com o SocketID e a mensagem de texto.
  1. Converte os valores recebidos para String;
  2. Envia apenas para o SocketID especificado(a).
Exemplo de implementação da página .html que exibe o QRCode.
Exemplo de implementação do script jQuery que roda no cliente para interagir com socket.
Exemplo de implementação em NodeJS de uma rota para receber os dados e enviar ao socket ID a mensagem.
Exemplo em nodeJS de como deixar a referência ao socket acessível de qualquer parte da aplicação.

Conclusão

Com este tutorial, é possível ter uma visão geral do funcionamento da framework e suas possíveis aplicações práticas. Qualquer dúvida ou sugestão, é só deixar um comentário ou me acionar por meio dos contatos abaixo. 😜



Concrete

Nós desenvolvemos produtos digitais com inovação, agilidade…

João Gabriel

Written by

Concrete

Concrete

Nós desenvolvemos produtos digitais com inovação, agilidade e excelentes práticas, para que o mercado brasileiro e latino-americano acompanhe a velocidade do mercado digital mundial.

João Gabriel

Written by

Concrete

Concrete

Nós desenvolvemos produtos digitais com inovação, agilidade e excelentes práticas, para que o mercado brasileiro e latino-americano acompanhe a velocidade do mercado digital mundial.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store