Digital Developer Conference: Hybrid Cloud 2021 | Capacitaciones gratuitas por expertos y partners | 21 de Setiembre ¡Inscríbete Ahora!

Construya una aplicación de chat en tiempo real con Node-RED en 5 minutos

Node-RED es una nueva herramienta de código abierto creada por el equipo de IBM Emerging Technology que le permite construir aplicaciones simplemente uniendo las piezas con cable. Estas piezas pueden ser dispositivos de hardware, los APIs de web, o los servicios en línea.

Le mostraremos la forma de construir una aplicación de chat en tiempo real en Node-RED usando IBM Cloud en solo unos cuantos minutos.

En IBM Cloud es fácil crear un nuevo tiempo de ejecución Node-RED. Con solo unos cuantos clics ya tiene un ambiente de trabajo listo para crear su nueva aplicación. En este artículo, le mostraremos la forma de construir; en solo unos cuantos minutos; una aplicación de chat en tiempo real en Node-RED usando IBM Cloud.

Lo que necesitará

  • Una cuenta IBM Cloud
  • Conocimiento básico de HTML, CSS y JavaScript. Proporcionamos todo el código necesario, pero un entendimiento básico de estas tecnologías le ayudará a comprender los detalles.

Paso 1. Cree su aplicación Node-RED

Siga los pasos de este tutorial, «Create a Node-RED starter application» (En inglés).

Paso 2. Importe el código

Se puede importar y exportar toda aplicación Node-RED usando el formato JSON. Así que ahora importemos nuestra aplicación de chat hacia una nueva hoja.

  1. Acceda al repositorio del proyecto en IBM DevOps Services y abra el archivo nodechat.json.
  2. Copie el contenido de todo el archivo, después regrese a Node-RED en su navegador.
  3. Haga clic en el botón de menú en la esquina superior derecha y seleccione Import from... > Clipboard...

    Import menu on Node-RED

  4. Pegue el contenido del archivo que copió del repositorio y haga clic en Ok.

    Area to paste code to be imported

  5. Haga clic en alguna parte de la hoja en blanco para agregar los nodos que se importaron.

    Importing an app in Node-RED

Explicaremos lo que hace cada pieza posteriormente en este artículo, pero ahora es el momento de desplegar y ejecutar su aplicación.

Paso 3. Despliegue y corra la aplicación

  1. Haga clic en el botón rojo Deploy a un lado del botón del menú para que se active su aplicación.

    Deploy button on Node-RED

  2. Deberá ver aparecer un mensaje de éxito en la parte superior y desaparecerán los puntos azules en los nodos. Los puntos indican cuando se ha cambiado un nodo pero no se ha desplegado aún.

    Success message

  3. Ahora abra un nuevo tabulador en su navegador y vaya a http://[app name].mybluemix.net/chat, cambiando [app name] el nombre que le dio a su aplicación.

    Running our chat app

  4. Ahora ya está funcionando su aplicación de chat. Introduzca un nombre de usuario en el campo a la izquierda, escriba un mensaje en el cuadro a la derecha y oprima Send.

    Sending a message using our chat

  5. Abra el chat en una segunda ventana o envié el vínculo a algunos amigos y diviértase. Se deberán recibir los mensajes instantáneamente.

    Real-time conversation with multiple users

Paso 4. Explicando el código (opcional)

En esta sección, explicamos el código detrás de nuestra aplicación a mayor detalle. Se puede saltar esta sección pero le recomendamos que la lea para comprender mejor la forma en la que está construida la aplicación y aprender más acerca de cómo funciona Node-RED.

  1. En la primera sección tenemos tres nodos:

    • WebSocket in
    • Function
    • WebSocket out

    First flow of the application

    Estos son los bloques responsables de crear el canal de comunicación y procesar los mensajes en tiempo real usando el protocolo WebSocket. El bloque Function es muy simple. Solo remueve el valor para _session el objeto msg para que el mensaje se transmita a todos los clientes conectados a WebSocket.

    Code to broadcast message

  2. El segundo flujo es responsable del código del lado del cliente. Tiene un nodo HTTP in, un Template para entregar una página HTML y un nodo HTTP out para la respuesta.

    Second flow in the application

    El nodo HTTP in ([get] /chat) crea un parámetro para recibir las solicitudes GET y envía esas solicitudes a Template. El nodo HTTP out crea la respuesta apropiada que se volverá a enviar al usuario cuando se haya entregado la plantilla.

  3. La plantilla puede desglosarse en tres partes: estructura de página, manejo de mensaje y visual.
  4. La estructura de la página es una simple página HTML que contiene una div que recibirá todos los mensajes de chat y un pie de página que sostiene los campos para enviar mensajes.

    HTML structure of the app

  5. El manejo de mensajes se realiza usando JavaScript. Primero, abrimos una conexión para los parámetros WebSocket que creamos usando Node-RED.

    Openning a WebSocket connection

    Posteriormente, registramos los manejadores de eventos para que el objeto ws maneje eventos tales como conexiones de apertura y cierre con el servidor y recibiendo nuevos mensajes.

    Registering event handlers

  6. Cuando un usuario envía un mensaje creamos un objeto con el nombre del usuario y el mensaje que se envía al servidor usando el método send en nuestro objeto ws

    Code to send a new message

  7. La parte visual se realiza con algunas simples reglas de CSS que se cubren en este artículo.

Conclusión

Node-RED simplifica el desarrollo del código proporcionándonos un conjunto de nodos listos para conectarse en conjunto y usarse. Como se muestra en este artículo, se requiere muy poco trabajo para que se configure el servidor en IBM Cloud para usarse en sus proyectos. Se puede mejorar esta simple aplicación de chat aún más agregando nuevos nodos y creando nuevos flujos para conectarse a los existentes.

Avisos

El contenido aquí presentado fue traducido de la página IBM Developer US. Puede revisar el contenido original en este link.