Desenvolver um aplicativo de bate-papo em tempo real com Node-RED em 5 minutos

O Node-RED é uma nova ferramenta de software livre, criada pela equipe IBM Emerging Technology, que permite desenvolver aplicativos simplesmente conectando as partes. Essas partes podem ser dispositivos de hardware, APIs da web ou serviços online.

Mostraremos como desenvolver um aplicativo de bate-papo em tempo real no Node-RED, usando o IBM Cloud, em apenas alguns minutos.

—

No IBM Cloud, é fácil criar um novo tempo de execução do Node-RED. Com apenas alguns cliques, é possível obter um ambiente de trabalho, pronto para criar um novo aplicativo. Neste artigo, mostraremos como desenvolver — em apenas alguns minutos — um aplicativo de bate-papo em tempo real no Node-RED usando o IBM Cloud.

NoneNone

O que será necessário

• Uma conta do IBM Cloud
• Conhecimento básico de HTML, CSS e JavaScript. Fornecemos todo o código necessário, mas o entendimento básico dessas tecnologias ajudará a entender os detalhes.

Etapa 1. Criar o aplicativo no Node-RED

Siga os passos deste tutorial, “Create a Node-RED starter application” (Em Inglês).

Etapa 2. Importar o código

Todos os aplicativos em Node-RED podem ser importados e exportados usando o formato JSON. Portanto, vamos importar o seu aplicativo de bate-papo para a nova folha.

1. Acesse o repositório do projeto no serviço IBM DevOps e abra o arquivo nodechat.json.
2. Copie todo o conteúdo do arquivo e, em seguida, volte para o Node-RED no navegador.
3. Clique no botão de menu, no canto superior direito, e selecione Import from… > Clipboard…
   Clipboard…
4. Cole o conteúdo do arquivo que você copiou do repositório e clique em OK.
   
5. Clique em qualquer parte da folha em branco e inclua os nós importados.
   

Explicaremos a função de cada parte mais adiante no artigo, mas agora é o momento de implementar e executar o seu aplicativo.

Etapa 3. Implementar e executar o aplicativo

1. Clique no botão Deploy vermelho, próximo ao botão Menu, para que o aplicativo seja em tempo real.
   
2. Você deve ver uma mensagem de êxito na parte superior, e os pontos azuis nos nós devem desaparecer. Esses pontos indicam quando um nó foi alterado, mas ainda não foi implementado.
   
3. Agora abra uma nova guia no navegador e acesse http://[nome do aplicativo].mybluemix.net/chat, trocando [nome do aplicativo] pelo nome que você deu ao aplicativo.
   
4. Agora o aplicativo de bate-papo está executando. Insira um nome de usuário no campo à esquerda, escreva uma mensagem na caixa à direita e pressione Send.
   

5. Abra o bate-papo em outra janela ou envie o link para alguns amigos e divirta-se. Você deve receber as mensagens instantaneamente.
   

6. Abra o bate-papo em outra janela ou envie o link para alguns amigos e divirta-se. Você deve receber as mensagens instantaneamente.

Etapa 4. Explicando o código (opcional)

Nesta seção, explicamos o código do aplicativo mais detalhadamente. É possível ignorar essa seção, mas recomendamos a leitura para uma compreensão melhor sobre como o aplicativo é desenvolvido e saber mais sobre o funcionamento do Node-RED.

1. Na primeira seção, temos três nós: WebSocket in Function WebSocket out Esses são os blocos responsáveis por criar o canal de comunicação e processar as mensagens em tempo real usando o protocolo WebSocket . O bloco Function é muito simples. Ele somente remove o valor de _session a partir do objeto msg , para que a mensagem seja transmitida para todos os clientes conectados ao WebSocket.
2. O segundo fluxo é responsável pelo código no lado do cliente. Ele tem um nó HTTP in , um Template para renderizar uma página HTML e um nó HTTP out para a resposta. <img alt=” height=”51″ src=”https://developer.ibm.com/developer/default/tutorials/cl-rtchat-app/images/image017-br.jpg” width=”427″> O nó HTTP in ([get] /chat) cria um terminal para receber solicitações GET e as encaminha para o Template. O nó HTTP out cria a resposta adequada para ser enviada de volta para o usuário após a renderização do modelo.
3. O modelo pode ser dividido em três partes: estrutura da página, manipulação de mensagens e visual.
4. A estrutura da página é uma página HTML que contém um div que receberá todas as mensagens de bate-papo e um rodapé que contém os campos para enviar as mensagens.
5. A manipulação de mensagens é feita usando o JavaScript. Primeiramente, abrimos uma conexão ao terminal WebSocket que criamos usando o Node-RED.
   Em seguida, registramos os manipuladores de eventos para que o objeto ws manipule eventos, como abrir e fechar conexões ao servidor e receber novas mensagens.
6. Quando o usuário envia uma mensagem, criamos um objeto com o nome de usuário e a mensagem, que é enviado ao servidor usando o método send em nosso objeto ws .
7. A parte visual é feita com algumas regras CSS simples que não são abordadas neste artigo.

Conclusão

O Node-RED simplifica o desenvolvimento do código, fornecendo um conjunto de nós prontos para ser conectados e usados. Como este artigo mostra, o processo de configurar um servidor no IBM Cloud para usar nos seus projetos não é nada trabalhoso. É possível aprimorar ainda mais este aplicativo simples de bate-papo incluindo novos nós e criando novos fluxos para se conectar aos já existentes.