Práctico: Cree una aplicación web de sala de chat con tecnología de Node.js (quinta parte)

Este Nodo.js La serie de tutoriales lo ayudará a crear una aplicación web de sala de chat en tiempo real con tecnología de Node.js completamente implementada en la nube. A lo largo de la serie, aprenderá a configurar Nodo.js en su máquina Windows, cómo desarrollar una interfaz web con Expresarcómo implementar una aplicación basada en Node Express para microsoft azurecómo utilizar Zócalo.IO para agregar una capa en tiempo real y cómo implementarlo todo junto.

Nivel: Principiante a Intermedio: se espera que sepa HTML5 y JavaScript

Parte 5: Conexión de la sala de chat con WebSockets

Bienvenido a la Parte 5 de la serie de tutoriales prácticos de Node.js: Cree una aplicación web de sala de chat con la tecnología de Node.js.

En esta entrega, le mostraré cómo conectar la sala de chat del front-end al backend de la sala de chat del nodo que incorporó. Parte 2, parte 3 y parte 4.

Agregar jQuery, SocketIO e index.js

Lo primero que queremos hacer antes de comenzar a escribir nuestro código JavaScript frontend es asegurarnos de que el servidor del nodo entregue los archivos y las dependencias que necesitamos. Agreguemos jQuery y Socket.IO primero al archivo layout.jade que se extiende por todos los demás archivos jade en nuestro proyecto.

Reemplace el enlace único a bootstrap.min.js con un enlace a todos los demás archivos que necesitamos.

script(type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js")
script(type="text/javascript" src="/js/bootstrap.min.js")
script(type="text/javascript" src="/socket.io/socket.io.js")

Tenga en cuenta que la primera línea enlaza con jQuery alojado en el Red de entrega de contenido de Microsoft Ajax. Esta CDN alberga bibliotecas de JavaScript de terceros populares, como jQuery, y le permite agregarlas fácilmente a sus aplicaciones web. Puede mejorar significativamente el rendimiento de sus aplicaciones Ajax mediante el uso de una CDN. El contenido de la CDN se almacena en caché en servidores ubicados en todo el mundo. La CDN es compatible con SSL (HTTPS) en caso de que necesite servir una página web utilizando la capa de conexión segura.

Ahora agregaré una línea más al final para crear un nuevo bloque.

block body_end

Estoy haciendo esto para que cualquier archivo de Jade que amplíe layout.jade también pueda agregar etiquetas de script justo antes del final de la etiqueta del cuerpo.

Ahora queremos usar ese nuevo bloque para agregar un enlace a nuestro archivo index.js que crearemos en la carpeta public/js, asegúrese de crear el archivo.

block body_end
  script(type="text/javascript" src="https://www.noupe.com/js/index.js")

Asegúrese de que el bloque comience con sangría cero para seguir las convenciones de codificación de Jade. Si ejecuta el servidor de nodos y navega a la página principal en su navegador, notará en sus herramientas F12 que los archivos se están sirviendo correctamente.

Cambios rápidos en app.js

Hay algunas cosas que quiero cambiar en app.js. Primero, quiero invertir la dirección de clasificación para que los mensajes más antiguos se envíen primero y segundo. También quiero emitir los mensajes de chat recibidos anteriormente en el mismo canal en el que planeo recibir los mensajes nuevos. Los cambios irán a la línea 49 y 50 en app.js. Este es el resultado:

var stream = collection.find().sort().limit(10).stream();
stream.on('data', function (chat) { socket.emit('chat', chat.content); });

No olvide configurar la variable de entorno CUSTOMCONNSTR_MONGOLAB_URI antes de volver a ejecutar el archivo app.js, de lo contrario, el backend del nodo fallará cuando no pueda conectarse a su MongoDB.

Encendido del botón Enviar

Es hora de encender ese botón de envío para enviar mensajes en el cuadro de mensaje usando WebSockets al servidor backend en el canal de chat.

var socket = io();
$('#send-message-btn').click(function () {
    var msg = $('#message-box').val();
    socket.emit('chat', msg);
    $('#messages').append($('
').text(msg));
    $('#message-box').val('');
    return false;
});
socket.on('chat', function (msg) {
    $('#messages').append($('
').text(msg));
});

Línea 1

Queremos crear un socket y podemos hacerlo llamando a la función io() que se encuentra en el archivo socket.io-client.js.

Línea 2

Seguido de eso, queremos ejecutar una función al hacer clic en el botón Enviar mensaje usando la función $ de jQuery y el controlador de eventos de clic.

Línea 3

Obtendremos el valor de la cadena en el cuadro de mensaje usando la función $ de jQuery.

Línea 4

Usamos la función de emisión en la variable de socket que creamos en la línea 1 para enviar un mensaje en el canal de ‘chat’ que contiene el valor del cuadro de mensaje.

Línea 5-7

En este punto, agregaremos el mensaje en el cuadro de mensaje al div #messages para que el usuario pueda ver que se envió el mensaje. Asignaremos el valor del cuadro de mensaje a una cadena vacía para aclararlo.

Línea 9-10

Queremos agregar el mensaje recibido en el canal de chat de otros usuarios al div #messages. El backend de Node no volverá a enviar el mensaje que el cliente se escribió a sí mismo, pero está bien porque agregamos el mensaje de inmediato en el controlador de la función de clic.

Conclusión

¡Voila! Has conectado tu backend y tu frontend usando WebSockets. Si desea identificar a las personas en la sala de chat o agregar un avatar para cada usuario, depende de usted, pero puede usar esta sala de chat en adelante. En la próxima entrega, le mostraré cómo implementar esta sala de chat anónima en Azure y cómo puede depurarla.

¡Estén atentos para la Parte 6!

La parte 6—¡El final y la depuración de aplicaciones de nodos remotos!—se publicará pronto en Noupe y también se encuentra en mi blog aquí. Puedes mantenerte actualizado sobre este y otros artículos siguiendo mi cuenta de twitter: @ramisayar.

Más partes de la serie en MSDN

Parte 1 – Introducción a Node.js
Parte 2: Bienvenido a Express con Node.js y Azure
Parte 3 – Construcción de un backend con Node, Mongo y Socket.IO
Parte 4: creación de una interfaz de usuario de sala de chat con Bootstrap

Parte 5: Conexión de la sala de chat con WebSockets
Parte 6: el final y la depuración de aplicaciones de nodos remotos

Más aprendizaje para el nodo en Azure

Para un aprendizaje más profundo sobre el nodo, mi curso es disponible aquí en la Academia Virtual de Microsoft.

O algunos videos de formato más corto sobre temas de nodos similares:

• Serie de seis partes: creación de aplicaciones con node.JS
• Un paseo por el nodo (Coding4Fun)

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y es nuevo motor de renderizado contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ moderno.ES.

(dpe)