Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Node.js
Code

Chat em tempo real com Modulus e Node.js

by
Length:MediumLanguages:
This post is part of a series called Getting Started with Modulus.
Build a Real-Time Chat Application With Modulus and Laravel 5
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Portuguese (Português) translation by Thiago Oliveira (you can also view the original English article)

Neste tutorial, eu vou mostrar para você como implementar uma aplicação de chat em tempo real com Node.js, Socket.IO e MongoDB, e então vamos fazer o deploy dessa aplicação juntos para o Modulus.

Primeiramente, deixe-me mostrar a cara final da aplicação que teremos ao fim do artigo.

chat-screen

Node.js será o núcleo da aplicação, com Express como o MVC, MongoDB para o banco de dados, e Socket.IO para comunicação em tempo real. Quando terminarmos, vamos fazer o deploy da nossa aplicação para o Modulus. A parte do MongoDB na verdade existe dentro do Modulus.

1. Cenário

  1. John quer usar nossa aplicação, e abrí-la no browser.
  2. Na primeira página, ele seleciona um apelido usado durante o chat, e faz o login no nosso chat.
  3. Na área de texto ele escreve algo e aperta Enter.
  4. O texto é enviado por um serviço RESTful (Express) e esse texto é escrito no MongoDB.
  5. Antes de escrever no MongoDB, o mesmo texto vai ser transmitido para os usuários que estão atualmente logados na aplicação de chat.

Como você pode ver, essa é uma aplicação muito simples, mas ela cobre quase tudo para uma aplicação web. Não há sistema de canais nessa aplicação, mas você pode fazer um fork do código fonte e implementar o módulo de canais para praticar.

2. Design do Projeto do Zero

Vou tentar explicar os pequenos pedaços do projeto primeiro e combiná-los no final. Vou começar do back end para o front end. Então, vamos começar com os objetos de domínio (modelos do MongoDB).

2.1. Modelo

Para abstração de banco de dados, vamos usar o Mongoose. Nesse projeto, temos somente um modelo chamado Message. Esse modelo de mensagem somente contém text, createDate, e author. Não há modelo para o autor como User, por que não vamos implementar completamente um sistema de registro/login de usuários. Haverá uma simples página para prover o apelido, e esse apelido será salvado em um cookie. Ele será usado no modelo Message como o texto no campo author. Você pode ver um modelo JSON de exemplo abaixo.

Para criar documentos como esse, você pode implementar um modelo usando as funções do Mongoose abaixo:

Simplesmente importe o módulo do Mongoose, defina seu modelo com seus campos e atributos no formato JSON, e crie um modelo com o nome Message. Esse modelo será incluído nas páginas que você quiser usar.

Talvez você tenha uma questão sobre por que estamos guardando a mensagem no banco de dados, quando já transmitimos essa mensagem para o usuário no mesmo canal. É verdade que você não precisa salvar mensagens do chat, mas eu só gostaria de explicar a camada de integração com o banco de dados. De qualquer maneira, vamos usar esse modelo no nosso projeto dentro dos controllers. Controllers?

2.2. Controller

Como eu disse mais cedo, vamos usar o Express para a parte de MVC. E C aqui está para Controller. Para nosso projeto, haverá somente dois endpoints para mensagens. Um deles é para carregar mensagens recentes do chat, e o segundo é para lidar com mensagens enviadas no chat e guardá-las no banco de dados, e então transmitir no canal.

O primeiro e o segundo controller são somente para servir arquivos estáticos de HTML para o chat e página de login. O terceiro é para lidar com as requisições post para o endpoint /messages para criar novas mensagens. Nesse controller, primeiramente o corpo da requisição é convertido para o modelo Message, e então esse modelo é salvo no banco de dados usando a função do Mongoose save.

Eu não vou me aprofundar muito no Mongoose — você pode dar uma olhada na documentação para maiores detalhes. Você pode prover uma função callback para a função save para verificar se há algum problema ou não. Se ela tiver sucesso, nós teremos buscado os últimos cinco registros ordenados em ordem decrescente pelo createDate, e teremos transmitido cinco mensagens para os clients no canal.

Ok, terminamos o MC. Vamos mudar para a parte da View.

2.3. View

No geral, um sistema de templates como Jade, EJS, Handlebars, etc., pode ser usado com o Express. Porém, temos somente uma página, e isso é uma mensagem de chat, então vou servir isso estaticamente. Na verdade, como disse acima, existem mais dois controllers para servir essa página HTML estática. Você pode ver o seguinte para servir uma página HTML estática.

Esse endpoint simplesmente serve index.html e login.html usando res.sendFile. Ambos index.html e login.html estão na mesma pasta que o server.js, por isso que usamos __dirname antes do nome do arquivo HTML.

2.4. Front End

Na página front-end, usei o Bootstrap e não é necessário explicar como fiz isso. Simplesmente, eu liguei uma função à caixa de texto, e sempre que você pressionar a tecla Enter ou o botão Send, a mensagem será enviada para o serviço back-end.

Essa página também tem um arquivo javascript requerido do Socket.IO para ouvir o canal chamado message. O módulo do Socket.IO já foi importado no back end, e quando você usa esse módulo no servidor, ele automaticamente adiciona um endpoint para servir o arquivo javascript do Socket.IO, mas estamos usando o que está sendo servido do cdn <script src="//cdn.socket.io/socket.io-1.3.5.js"></script>. Sempre que uma nova mensagem chega no canal, ela vai ser detectada automaticamente e a lista de mensagens vai ser atualizada com as últimas cinco mensagens.

Existe mais uma verificação no código acima: a parte do cookie. Se você não escolheu nenhum apelido para o chat, significa que o cookie não está definido para o apelido, e você vai ser automaticamente redirecionado para a página de login.

Caso contrário, as últimas cinco mensagens vão ser buscadas por uma simples chamada de Ajax para o endpoint /messages. Da mesma maneira, sempre que você clicar no botão Send ou apertar a tecla Enter, a mensagem de texto será buscada da caixa de texto, e o apelido será buscado do cookie, e esses valores serão enviados para o servidor com uma requisição post. Não há verificação estrita para o apelido aqui, por que eu quiz focar na parte de tempo real, não na parte de autenticação de usuário.

Como você pode ver, a estrutura completa do projeto é bem simples. Vamos à parte do deploy. Como disse mais cedo, vamos usar o Modulus, um dos melhores PaaS para fazer deploy, escalar e monitorar sua aplicação na sua linguagem de escolha.

3. Fazendo o Deploy

3.1. Pré-requisitos

A primeira coisa que vem à mente é mostrar a você como fazer o deploy, mas para um deploy de sucesso, precisamos de um banco de dados funcionando. Vamos dar uma olhada em como criar um banco de dados no Modulus e então fazer o deploy.

Vá ao dashboard do Modulus depois de criar uma conta. Clique no menu Databases à esquerda, e clique em Create Database.

Click the Databases menu on the left and click Create Database

Preencha os campos requeridos no formulário popup como abaixo.

Fill in the required fields in the CREATE DATABASE popup form

Quando você preencher os campos requeridos e clicar em Create, ele irá criar um banco de dados MongoDB para você, e você vai ver a URL do seu banco de dados na tela. Nós vamos usar MONGO URI, então copie essa URI.

Your database has been created and is ready for use

No nosso projeto, Mongo URI é buscada na variável de ambiente MONGO_URI, e você precisa definir essa variável de ambiente no dashboard. Vá ao dashboard, clique no menu Projects, selecione seu projeto na lista, e clique em Administration no menu à esquerda. Nessa página, você verá a seção das variáveis de ambiente quando você fizer o scroll da página, como mostrado abaixo.

MONGO_URI Value

Você pode fazer o deploy para o Modulus de duas maneiras.

  • fazendo um upload do arquivo ZIP do projeto usando o dashboard
  • fazendo o deploy da linha de comando usando o Modulus CLI

Vou continuar com a opção da linha de comando, por que a outra é fácil fazer. Primeiro, instale o Modulus CLI:

Vá à pasta do seu projeto e execute o comando seguinte para logar no Modulus.

Quando você executar o comando acima, você vai precisar inserir um nome de usuário e senha:

prompt to enter a username and password

Se você criou uma conta usando o GitHub, você pode usar a opção --github.

Agora você está logado no Modulus, e é hora de criar um projeto. Use o comando seguinte para criar um projeto:

Quando você rodar essa função, será pedido o runtime. Selecione a primeira opção, que é Node.js, e depois será pedido o tamanho do servo, e você pode deixar isso como está.

Keep servo size as default

Criamos um projeto, e agora vamos fazer deploy do nosso projeto corrente para o Modulus. Execute o comando seguinte para enviar o projeto corrente para o projeto Realtime Chat do lado do Modulus.

Ele vai fazer o deploy do seu projeto e você vai ter a URL do seu projeto rodando no final da mensagem de deploy de sucesso.

Como você pode ver, o deploy para o Modulus é muito fácil!

O Modulus CLI tem comandos muito úteis para usar durante o deploy do seu projeto ou em runtime. Por exemplo, para tail logs do seu projeto corrente, você pode usar modulus project logs tail, para criar um banco de dados MongoDB use modulus mongo create <db-name>, para definir uma variável de ambiente use modulus env set <key> <value>, etc. Você pode ver uma lista completa de comandos usando o Modulus help.

Conclusão

O principal propósito desse tutorial foi mostrar a você como criar uma aplicação de chat em tempo real com Node.js, Socket.IO, e MongoDB. Para rodar um projeto em produção, Modulus é usado como um provedor PaaS. Modulus tem passos muito simples para fazer deploy, e também tem um banco de dados interno (MongoDB) para nossos projetos. Além disso, você pode usar ferramentas muito úteis dentro do dashboard do Modulus como Logs, Notifications, Auto-Scaling, Database Administration, e por aí vai.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.