heroku Logo

+

nodejs light

 

 

En esta entrada publicaremos la manera para poder hacer público nuestro minichat, hemos hecho unos pequeños cambios en el servidor y en el index. De antemano agradecemos a las personas de quien aprendimos acerca del manejo de la plataforma Heroku, especialmente Joseph Esteban, al parecer todo un experto en este tema.



Bueno aquí publicaremos el nuevo código para el servidor y para el index, realmente no son muchos cambios pero para que sirvieran en heroku fueron necesarios, respecto al index.html de nuevo no es mas que una caja de texto y un boton enviar, el css se lo dejamos a ustedes.

server.js:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var PORT = process.env.PORT || 8080;
 
app.get('/',function(req,res){
   res.sendFile(__dirname + '/index.html');
});
 
io.on('connection',function(socket){

   socket.on('message',function(msj){
      io.sockets.emit('message',msj);
   });
});
http.listen(PORT,function(){
  console.log('el servidor esta escuchando el puerto %s',PORT);
});

 

index.html:

 

 

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 
 <title>Mini chat</title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  
<script src="/socket.io/socket.io.js"></script>
  
<script>
 var socket = io();
  $(function(){
   $("#sendmsg").on('click',function(){
    var mensaje = $("#mensaje").val();
    if(mensaje=='') return false;
     
    console.log(mensaje)
    socket.emit('message',mensaje);
    $("#mensaje").val('').focus();
   });
 
    
  });
   
  socket.on('message',function(msg){
   $("#listamsg").append($('<li>').text(msg));
  });
 
  
</script>   
    
</head>
 
<body>
<ul id="listamsg"></ul>
<textarea id ="mensaje" rows="4" cols="50">
 
</textarea>
<button id="sendmsg">Enviar</button>
 
</body>
 
</html>

 

Bien.. una vez hechos los cambios empezaremos a subir nuestra aplicación.

Lo primero que deben hacer es crear una cuenta en heroku, despues deben bajarse  el Heroku Toolbelt ,pueden entrar haciendo click Aqui (si desean pueden seguir con el tutorial de heroku), se supone que dentro de esta instalación esta incluido Ruby y Git bash, en caso de que les funcione no hay problema, pero como en nuestro caso no funcionó nos remitimos  a esta página: https://developers.openshift.com/en/managing-client-tools.html esto no es mas que otra plataforma de cloud computing como heroku pero pues al instalar Ruby y Git con esas instrucciones mas la instalación de heroku Toolbelt, todo funcionó de maravilla, al parecer openshift también es una buena plataforma pero nos gustó mas Heroku.
 
Cuando hayan instalado las respectivas aplicaciones entraremos a nuestro cmd y seguiremos los siguientes pasos:

1. Crear la aplicación en Heroku. Esto se logra haciendo click en el + de la parte de la derecha

c01

 

c02

2. Crear una carpeta para su proyecto, normalmente esta debe quedar en C: además siempre le ponemos el mismo nombre de la aplicación ( eso ya depende de ustedes), dentro de esta carpeta vamos a poner los archivos del servidor y del index ademas del .gitignore y el Procfile.

.gitignore: es un archivo que le dice a heroku que archivos o carpeta no se van a subir a la aplicación, en este caso nuestro .gitignore dirá lo siguiente:

c03

 

No es mas que una simple linea de código.
 
Procfile: es un archivo que le dice a heroku cual es el archivo que va a iniciar nuestra aplicación, en nuestro caso será el server.js
 
c04
 
Finalmente nuestra carpeta debe quedar asi:
 
c05
 

3. Logearnos en heroku por medio de la consola.

c06

Si todo les quedo bien instalado todo deberiamos hacerlo por consola.

4. Ubicarnos en la carpeta del proyecto y ejecutar npm init

Por medio de este comando crearemos el package.json que es un archivo sumamente importante porque va a contener las instrucciones, librerias entre otras cosas que harán que nuestra aplicación se ejecute correctamente.

c07

 
Una vez ejecuten el comando hay que llenar un especie de formulario con  informacion respectiva de nuestra app, las entradas mas importantes son entry point: dejar por defecto y test command: node server.js
 
Al finalizar nos quedaría algo asi:
 
c08
 
Finalmente se va a crear package.json en nuestra carpeta ahora lo que debemos hacer es editarlo porque no se ha creado completamente, tenemos que agregra la libreria socket.io, express entre otras cosas, entonces editamos el archivo para que quede de esta manera:
 
c09

5. Una vez lo hayamos editado guardamos y salimos del archivo, ahora ejecutamos el siguiente comando: npm install y dejamos que la consola haga lo suyo:

c10

 
Ahora si vamos a nuestra carpeta de proyecto vamos a encontrar una carpeta llamada node_modules
 
c11
 

6. Debemos inicializar un repositorio con los comandos:

git init 
heroku git:remote -a codechatter
 
c12
 
c13

7. Subir la aplicación a la web con los siguientes comandos:

$ git add .
$ git commit -m "upload1" 
$ git push heroku master

 

8. Escribir heroku open para abrir la aplicación:

c14

 

Finalmente la aplicación se va a ver en el browser.

c15

Normalmente la aplicación se abre automáticamente con https:// , eso puede hacer que esta no funcione bien, lo que deben hacer es cambiarla por http:// ahi en el browser y listo.

Bueno eso es todo para esta entrada, esperamos que haya sido de utilidad , aqui les dejamos el link del chat, http://codechatter.herokuapp.com/ pueden probar que sirve en diferentes browsers además de su celular, depronto pueden encontrarse con alguien que les despeje muchas dudas a pesar de la sencillez del chat.
 
Saludos.