¿Te sientes Solo? Hagamos un chat con Node y Angular !!
Seguro que te pasa como a mi.
Te sientes solo y no tienes amigos con quienes hablar. Tratas de conectarte a ICQ y todos tus amigos ya se mudaron a otras aplicaciones, entras a IRC y los únicos que se dignan a hablarte son BOTS sin sentimientos.
Y si hacemos un chat ?
Para ello, usaremos 3 componentes: Node.js, Angular y una librería de node para websockets llamada sockjs.
El proyecto se compondrá de 2 archivos
- server.js: que contendrá la lógica del servidor
- chat.html: que tendrá la presentación y la lógica del cliente integrada.
Empecemos
Para nuestro servidor
[snippet id=»66″]
La magia sucede en la linea 6, donde se crea el handler de sockjs.
En la siguiente linea se configura el evento generado cada vez que un nuevo usuario se conecta. La función entrega el objeto conexión que es almacenado en una lista. Cada vez que se registra una conexión, se envía un saludo.
En el evento de recibir un mensaje por parte de un usuario (Linea 11), se recorre la lista de conexiones y a cada usuario se le envía un mensaje con el mensaje, usuario que origina y fecha de recepción.
Finalmente, para el evento de desconexión (Linea 16), se envía a todos los usuarios una advertencia de que el usuario ha abandonado el chat.
Las últimas 3 lineas crean el servidor y vinculan la ruta ‘/chat’ al handler de sockjs .
Luego el cliente
[snippet id=»67″]
Gran parte de este archivo contiene estructura HTML para el formateo de los datos y CSS para el estilo.
Las partes importantes son:
- Lineas 65-66 donde se incluyen las librerías de cliente de sockjs y angular
- Linea 69 donde conectamos el cliente con el servidor
- Linea 70 a 82 donde definimos el controlador de angularjs. Iniciamos la lista que almacenará los mensajes, definimos el método ‘sendMessage’ que enviará nuestros mensajes al servidor y finalmente, nos subscribimos al evento de recepción de mensajes-.
- Linea 88 donde por medio de la directiva «ng-controller» vinculamos el controlador de angularjs con la presentación.
- Linea 102 donde recorremos los mensajes y los dibujamos
Fácil, cierto?
Si quieres revisar el código, puedes explorarlo en nuestro repositorio:
https://github.com/cristiansalinas/33SurChat
Si quieres ver el programa terminado, entra a chatear con nosotros:
Nos vemos !
