Chat con Websockets - Aurelia y Express (Parte 3 - conectando frontend y backend)

Hola nuevamente, ahora que ya tenemos la estructura del proyecto preparada, es hora de ver si podemos conectarnos al socket, para esto crearemos la estructura del proyecto con aurelia y utilizaremos bootstrap-sass en el proyecto. Como ya se realizo estos pasos en otros posts, no los repetiré acá, pero si pondré los comandos necesarios para bajar el proyecto de github y darle el nombre de chat-frontend (se tendrá dos proyectos, uno con nodejs, express y socket.io para el backend, y otro con aurelia para el frontend).

$ git clone https://github.com/feardarkness/aurelia_bootstrap_sass_starter
$ mv aurelia_bootstrap_sass_starter/ chat-frontend
$ cd chat-frontend
$ rm -rf .git
$ git init
$ npm install
$ NODE_ENV=dev au run watch

Antes de continuar, revisaremos algunos conceptos necesarios; el protocolo HTTP no almacena ningún estado, abrimos el navegador, enviamos un mensaje al servidor, se procesa, se devuelve la respuesta y se cierra la conexión; no se guarda ningún estado, usualmente para que el navegador nos recuerde es necesario guardar la identidad en una cookie. Además, toda conexión es iniciada por el cliente y cada interacción entre el cliente y el servidor es aislada una de la otra.

Los websockets por otro lado son full-duplex (conexiones bidirecionales) y abren conexiones persistentes del navegador al servidor. Una vez que se ha realizado la conexión, esta se mantiene abierta hasta que uno de los dos extremos (cliente o servidor) decida cerrarla. Ya que la conexión se ha establecido se puede enviar mensajes en cualquier momento (ideal para un chat :D).

Ahora, continuando con la aplicación, crearemos un textarea y un input, nada muy elaborado pero lo suficiente como para ver el funcionamiento de nuestros sockets.
Primero agregamos la librería socket.io con

$ npm install socket.io-client --save

Ahora, agregamos la libreria al archivo aurelia_project/aurelia.json, dentro de dependencies:

{
  "name": "socket.io",
  "path": "../node_modules/socket.io-client/dist",
  "main": "socket.io"
},

Además, crearemos un elemento nuevo y le agregaremos los elementos básicos para hacer el chat:

$ au generate element
      chat-window

Modificaremos el elemento recién creado, le agregaremos un textarea donde aparecerán los mensajes, un input cuyo valor estará enlazado con el atributo message del viewmodel y un botón para enviar el mensaje con la acción sendMessage (src/resources/elements/chat-window.html).

<template>
  <div class="row" id="chat">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <textarea id="chat-content" rows="10"></textarea>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="form-group">
        <label for="mensaje"
           class="col-sm-1 control-label text-right">Mensaje:</label>
        <div class="col-sm-5">
          <input type="text" class="form-control"
             id="mensaje" placeholder="Escriba el mensaje que desea enviar"
             value.bind="message">
        </div>
        <div class="col-sm-2">
          <button type="submit" class="btn btn-primary"
                  click.delegate="sendMessage()">Enviar Mensaje</button>
        </div>
      </div>
    </div>
  </div>
</template>

También es necesario modificar el viewmodel del elemento recien creado (src/resources/elements/chat-window.js), agregaremos el logger, y algunos mensajes con el websocket.

import io from 'socket.io';
import {LogManager} from 'aurelia-framework';

export class ChatWindow {
  message = '';

  constructor() {
    this.logger = LogManager.getLogger('chat-window-element');
  }

  attached() {
    this.logger.debug('Attached...');
    this.socket = io('http://127.0.0.1:8081');

    this.socket.on('connect', () =>{
      this.logger.debug('Socket connected...');
    });

    this.socket.on('be-message', (data) => {
      this.logger.debug(`Event with data: ${data}`);
    });

    this.socket.on('disconnect', () =>{
      this.logger.debug('Socket disconnected...');
    });
  }

  sendMessage() {
    this.socket.emit('fe-message', {
      message: this.message
    });
  }
}

Importamos socket.io, y cuando el elemento está enlazado con el DOM (attached) creamos la conección con el backend (127.0.0.1 puerto 8081), además, agregamos un mensaje cuando el socket logré conectarse (on connect), un mensaje cuando el servidor nos hable con el evento be-message (on be-message) y un mensaje cuando el elemento se desconecté del socket del backend (on disconnect). Además, cuando el botón del frontend se presione emitiremos un mensaje (emit) con el nombre fe-message.

Agregamos unos estilos muy básicos en el archivo source/assets/main.scss:

#chat{
  #chat-content {
    width: 100%;
  }
}

Y eso es todo para el frontend. Ahora es necesario levantar el backend (chat-backend), puedes clonarlo con:

$ git clone https://github.com/feardarkness/chat-backend.git
$ git checkout tags/express-debug

Modificaremos el backend para recibir el mensaje enviado por el frontend (index.js):

import express from 'express';
import http from 'http';
import debugModule from 'debug';
import socketIO from 'socket.io';

const app = express();
const server = http.Server(app);
const io = socketIO(server);
const debug = debugModule('chat-backend');

server.listen(8081, () => {
  debug('Servidor escuchando en el puerto 8081');
});

io.on('connection', (socket) => {
  debug('Alguien esta conectado!!!');

  socket.emit('be-message', {
    message: 'Bienvenido usuario!!!',
  });

  socket.on('fe-message', (data) => {
    debug('Usuario conectado', data);
  });
});

Se agrega un listener para cuando un ciente se conecte (on connection), y se responde un mensaje de bienvenida al usuario (socket emit be-message); además le indicamos al socket que muestre el mensaje "Usuario conectado" y los datos enviados en caso de recibir un mensaje tipo "fe-message" (on fe-message).

Ahora iniciamos el backend con:

$ npm start

Y podemos observar la interacción entre el backend y el frontend a través de sockets.

Backend y Frontend comunicándose

Y eso es todo por ahora, para obtener el backend del proyecto:

$ git clone https://github.com/feardarkness/chat-backend.git
$ git checkout tags/connect-be-fe

Para obtener el frontend del proyecto:

$ git clone https://github.com/feardarkness/chat-frontend.git
$ git checkout tags/connect-be-fe

Y eso es todo por ahora, keep coding >_<