Share
NodeJS me da la capacidad de escribir código de back-end en uno de mis idiomas favoritos: JavaScript. Es la tecnología perfecta para construir aplicaciones en tiempo real. En este tutorial, te mostraré cómo construir una aplicación de chat web, utilizando ExpressJS y Socket.io.
Por cierto, si desea encontrar una solución de chat preparada con Node.js, eche un vistazo a Yahoo! Messenger node.JS BOT en Envato Market.
Yahoo! Messenger node.JS BOT en Envato Market Por supuesto, lo primero que debe hacer es instalar NodeJS en su sistema. Si es usuario de Windows o Mac, puede visitar nodejs.org y descargar el instalador. Si prefieres Linux, te sugiero que consultes este enlace. Aunque no voy a entrar en más detalles sobre esto, si surge algún problema de instalación, me complace poder ayudarlo; solo deja un comentario debajo de esta publicación.
Una vez que haya instalado NodeJS, estará listo para configurar los instrumentos necesarios.
Continuando, dentro de un directorio vacío, crea un paquete.json archivo con el siguiente contenido.
"name": "RealTimeWebChat", "version": "0.0.0", "description": "Web chat en tiempo real", "dependencies": "socket.io": "latest", "express": " latest "," jade ":" latest "," author ":" developer "
Usando la consola (bajo Windows - indicador de comando), navegue a su carpeta y ejecute:
npm instalar
En pocos segundos, tendrá todas las dependencias necesarias descargadas en el nodo_módulos directorio.
Comencemos con un servidor simple, que entregará la página HTML de la aplicación, y luego continuaremos con los bits más interesantes: la comunicación en tiempo real. Crear un index.js Archivo con el siguiente código de Expressjs:
Accentsconagua
var express = require ("express"); var app = express (); puerto var = 3700; app.get ("/", function (req, res) res.send ("¡Funciona!");); app.listen (puerto); console.log ("Escuchar en el puerto" + puerto); Arriba, hemos creado una aplicación y definido su puerto. A continuación, registramos una ruta que, en este caso, es una simple solicitud GET sin ningún parámetro. Por ahora, el controlador de la ruta simplemente envía un texto al cliente. Finalmente, por supuesto, en la parte inferior, ejecutamos el servidor. Para inicializar la aplicación, desde la consola, ejecute:
nodo index.js
El servidor se está ejecutando, por lo que debería poder abrir http://127.0.0.1:3700/ y ver:
Funciona!
Ahora, en lugar de "Funciona" Debemos servir HTML. En lugar de HTML puro, puede ser beneficioso utilizar un motor de plantillas. Jade es una excelente opción, que tiene una buena integración con ExpressJS. Esto es lo que normalmente uso en mis propios proyectos. Crear un directorio, llamado tpl, y pon lo siguiente page.jade archivo dentro de él:
!!! html head title = "Web chat en tiempo real" body #content (style = 'width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px # 999; overflow-y: scroll;') .controls input .field (style = 'width: 350px;') input.send (type = 'button', value = "send")
La sintaxis de Jade no es tan compleja, pero, para una guía completa, le sugiero que consulte jade-lang.com. Para utilizar Jade con ExpressJS, requerimos los siguientes ajustes.
app.set ('views', __dirname + '/ tpl'); app.set ('motor de vista', "jade"); app.engine ('jade', require ('jade') .__ express); app.get ("/", function (req, res) res.render ("page");); Este código informa a Express de dónde se encuentran los archivos de plantilla y qué motor de plantilla usar. Todo especifica la función que procesará el código de la plantilla. Una vez que todo está configurado, podemos usar el .hacer método de la respuesta objeto, y simplemente enviar nuestro código de Jade al usuario.
La salida no es especial en este punto; nada más que un div elemento (el que tiene id contenido), que se utilizará como soporte para los mensajes de chat y dos controles (campo de entrada y botón), que utilizaremos para enviar el mensaje.
Debido a que usaremos un archivo JavaScript externo que contendrá la lógica de front-end, debemos informar a ExpressJS sobre dónde buscar dichos recursos. Crear un directorio vacío, público, y agregue la siguiente línea antes de la llamada a la .escucha método.
app.use (express.static (__ dirname + '/ public'));
Hasta ahora tan bueno; tenemos un servidor que responde con éxito a las solicitudes GET. Ahora, es hora de agregar Zócalo.io integración. Cambia esta línea:
app.listen (puerto);
a:
var io = require ('socket.io'). listen (app.listen (puerto)); Arriba, pasamos el servidor ExpressJS a Socket.io. En efecto, nuestra comunicación en tiempo real seguirá ocurriendo en el mismo puerto..
En el futuro, debemos escribir el código que recibirá un mensaje del cliente y enviarlo a todos los demás. Cada aplicación Socket.io comienza con un conexión entrenador de animales. Deberíamos tener uno:
io.sockets.on ('conexión', función (socket) socket.emit ('mensaje', mensaje: 'Bienvenido al chat'); socket.on ('enviar', función (datos) io. sockets.emit ('mensaje', datos););); El objeto, enchufe, que se pasa a su controlador, es en realidad el socket del cliente. Piense en ello como una unión entre su servidor y el navegador del usuario. Tras una conexión exitosa, enviamos un Bienvenido tipo de mensaje y, por supuesto, vincular otro controlador que se utilizará como receptor. Como resultado, el cliente debe emitir un mensaje con el nombre, enviar, que vamos a atrapar. A continuación, simplemente enviamos los datos enviados por el usuario a todos los demás sockets con io.sockets.emit.
Con el código anterior, nuestro back-end está listo para recibir y enviar mensajes a los clientes. Vamos a añadir un código de front-end.
Crear chat.js, y colocarlo dentro de la público Directorio de su aplicación. Pega el siguiente código:
window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var field = document.getElementById ("field"); var sendButton = document.getElementById ("enviar"); var content = document.getElementById ("content"); socket.on ('message', function (data) if (data.message) messages.push (data.message); var html = "; para (var i = 0; i Nuestra lógica está envuelta en un .onload controlador solo para garantizar que todo el marcado y el JavaScript externo estén completamente cargados. En las siguientes líneas, creamos una matriz, que almacenará todos los mensajes, una enchufe objeto, y algunos accesos directos a nuestros elementos DOM. De nuevo, al igual que el back-end, enlazamos una función, que reaccionará a la actividad del socket. En nuestro caso, este es un evento, llamado mensaje. Cuando ocurre tal evento, esperamos recibir un objeto., datos, con la propiedad, mensaje. Agrega ese mensaje a nuestro almacenamiento y actualiza el contenido div. También hemos incluido la lógica para enviar el mensaje. Es bastante simple, simplemente emitiendo un mensaje con el nombre., enviar.
Si abres http: // localhost: 3700, Usted encontrará algunos errores popup. Eso es porque necesitamos actualizar page.jade para contener los archivos JavaScript necesarios.
head title = secuencia de comandos de "chat web en tiempo real" (src = '/ chat.js') (src = '/ socket.io/socket.io.js')
Tenga en cuenta que Socket.io gestiona la entrega de socket.io.js. No tienes que preocuparte por descargar manualmente este archivo.
Podemos volver a ejecutar nuestro servidor con nodo index.js en la consola y abierta http: // localhost: 3700. Deberías ver el mensaje de bienvenida. Por supuesto, si envías algo, debería aparecer en el contenido de div. Si desea asegurarse de que funciona, abra una nueva pestaña (o, mejor, un nuevo navegador) y cargue la aplicación. Lo mejor de Socket.io es que funciona incluso si detiene el servidor NodeJS. El front-end seguirá funcionando. Una vez que se reinicie el servidor, tu chat también estará bien.
En su estado actual, nuestro chat no es perfecto y requiere algunas mejoras..
El primer cambio que debemos hacer es la identidad de los mensajes. Actualmente, no está claro qué mensajes son enviados por quién. Lo bueno es que no tenemos que actualizar nuestro código NodeJS para lograr esto. Eso es porque el servidor simplemente reenvía el datos objeto. Por lo tanto, debemos agregar una nueva propiedad allí y leerla más adelante. Antes de hacer correcciones a chat.js, vamos a añadir un nuevo entrada campo, donde el usuario puede añadir su nombre. Dentro page.jade, cambiar el controles div:
.controles | Nombre: ingrese # nombre (estilo = 'ancho: 350px;') br ingreso # campo (estilo = 'ancho: 350px;') ingreso # envíe (escriba = 'botón', valor = "enviar")
Siguiente, en code.js:
window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var field = document.getElementById ("field"); var sendButton = document.getElementById ("enviar"); var content = document.getElementById ("content"); var nombre = documento.getElementById ("nombre"); socket.on ('message', function (data) if (data.message) messages.push (data); var html = "; para (var i = 0; i'; html + = mensajes [i] .message + '
'; content.innerHTML = html; else console.log ("Hay un problema:", datos); ); sendButton.onclick = function () if (name.value == "") alert ("Por favor escriba su nombre!"); else var text = field.value; socket.emit ('enviar', mensaje: texto, nombre de usuario: nombre.valor); ; Para resumir los cambios, hemos:
entrada camponombre de usuario Propiedad del objeto, que se envía al servidor.Si el número de mensajes es demasiado alto, el usuario deberá desplazar el div:
content.innerHTML = html; content.scrollTop = content.scrollHeight;
Tenga en cuenta que es probable que la solución anterior no funcione en IE7 e inferior, pero está bien: es hora de que IE7 desaparezca. Sin embargo, si desea garantizar el soporte, no dude en utilizar jQuery:
$ ("# content"). scrollTop ($ ("# content") [0] .scrollHeight); También sería bueno si el campo de entrada se borra después de enviar el mensaje:
socket.emit ('enviar', mensaje: texto, nombre de usuario: nombre.valor); field.value = ""; El último problema aburrido es el clic de la enviar botón cada vez. Con un toque de jQuery, podemos escuchar cuando el usuario presiona el Entrar llave.
$ (document) .ready (function () $ ("# field"). keyup (function (e) if (e.keyCode == 13) sendMessage (););); La función, enviar mensaje, Se podría registrar, como tal:
sendButton.onclick = sendMessage = function () …;
Tenga en cuenta que esta no es una buena práctica, ya que está registrada como una función global. Pero, para nuestra pequeña prueba aquí, estará bien.
NodeJS es una tecnología extremadamente útil y nos brinda mucha potencia y alegría, especialmente cuando se considera el hecho de que podemos escribir JavaScript puro. Como puede ver, con solo unas pocas líneas de código, logramos escribir una aplicación de chat en tiempo real totalmente funcional. Con buena pinta!
¿Desea obtener más información sobre la creación de aplicaciones web con ExpressJS? Te tenemos cubierto!
