Creando una simple sala de chat (II).

5. Creando nuestra aplicación.

Una vez instalados node.js, npm y express.js, lo siguiente es crear nuestra aplicación. Para ello ejecutamos en una consola el siguiente comando:

$ express -c stylus expresschat

El uso del atributo -c indica a express que nosotros queremos utilizar stylus como renderizador de nuestro css. Mientras que expresschat es el nombre de nuestra aplicación.

Luego ejecutamos el sguiente comando:

$ cd expresschat && npm install

Con esto ya temenos creada nuestra estructura, por defecto express creará dos o tres vistas, llamadas index.jade y users.jade.

Nuestra aplicación hará uso de broadcasting basado en web sockets, para poder acceder a estos web sockets, existe una herramienta implementada en node.js llamada Socket.io, la cual debemos agregar como dependencia a nuestra aplicación. Para hacer esto ejecutamos el siguiente comando.

$ npm install socket.io

Bien ahora si nos damos cuenta, Express creo un archivo llamado package.json, en nuestro directorio raíz. Antes de empezar tenemos que editarlo en orden de agregar nuestra dependencia a socket.io. El archivo final debe lucir como se muestra a continuación.

{ "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
     "start": "node app.js"
   },
  "dependencies": {
     "express": "3.2.4",
     "socket.io": "~0.9.6",
     "jade": "*",
     "stylus": "*"
   },
   "engines": {
     "node": "0.8.x",
     "npm": "1.2.x"
   }
}

6. Creando nuestras vistas.

Express.js es agnóstico al tipo de lenguaje que uses al momento de crear un template, para este caso usaremos el motor de plantillas Jade, te darás cuenta luego que es sencillo de usar.

A parte de las vistas generadas por defecto por Express, ubicadas en la carpeta views. Crearemos dos vistas principales, que se muestran a continuación:

chatroom.jade

doctype 5
html
  head
    title= title
    link(rel="stylesheet", href="/stylesheets/main.css")
    script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")
    script(src="/socket.io/socket.io.js")
    script(src="/javascripts/client.js")
  body
   input(id="txtUserName", type="hidden", value=username)
   div(class="container")
    div(id="estado")
    div(id="innerScroll", class="innerScroll")
    input(id="txtMensaje", type="text", value="", placeholder="mensaje")
    input(id="btnEnviar", type="button", value="Enviar", onclick="enviarMsj();")
   

index.jade

extends layout

block content
  div(class="outer")
   div(class="content")
    form(action="/chatroom", method="POST", name="user")
     span(class="texto") Ingresa tu nick:
     input(type="text", placeholder="nick name", name="userName", value="", class="")
     input(type="submit", value="Empezar Chat", class="boton")

Además modificaremos nuestro archivo base denominado

layout.jade

doctype 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/main.css')
  body
    block content