Creando un chat realtime con Sails.js y React
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
api
assets
config
tasks
views
.editorconfig
.gitignore
.sailsrc
Gruntfile.js
README.md
app.js
bower.json
package.json

README.md

Chat Sails

a Sails application

  • Primeros Pasos:

Nota: Debes verificar el idioma de tu computador y la configuración de teclado.

Abrir en tu computador tu consola o terminal. En Windows en el buscador la encuentras como Simbolo del sistema, en Mac como Terminal.

Revisa tu versión de Node.js node -v(Enter)

Revisa tu version de Git git -v(Enter)

Crea una carpeta en tu escritorio/Desktop: Project Sails

Nota: Aqui puedes verificar como se llama tu escritorio con el comando dir

Abre la carpeta en tu terminal con el comando: cd Desktop(Enter) Luego...

cd Project Sails(Enter) Ya allí comienzas a instalar:

  • Instalación:

Para instalar Sails, es bastante simple. Los requisitos son tener Node.js instalado y también la NPM, que viene con Node. Entonces se debe escribir el siguiente comando en el terminal:

npm -g install sails

Nota: Aqui te saldrá un lindo barquito :) y una instrucción en tu terminal que dice CTRL + C (Enter) al ejecutar te aparece S/N, Es decir Si o No, le das S(Sí),y esperas que ejecute. Y sigue los pasos...

  • Crear un nuevo proyecto:

Con el fin de crear un nuevo proyecto de Sails, se utiliza el siguiente comando:

sails new chatSails

Luego ingresamos a la carpeta del proyecto con el comando:

cd chatSails

A continuación iniciamos el servidor web con el siguiente comando:

sails lift

Sails usa por defecto el puerto 1337, por lo que si visita http://localhost:1337 debe obtener la página por defecto de Sails.

  • Instalación Bower

Con Bower podemos descargar y actualizar todo tipo de librerías, frameworks, plugins, etc., pero sin tener que preocuparnos por descargarlos y subirlos a mano nosotros mismos.

npm install bower -g

  • Grunt

Otro requisito para utilizar sails, es tener instalado en nuestro sistema el gestor de tareas Grunt.

npm install grunt-bower --save

Grunt, es herramienta muy potente que nos ahorra mucho tiempo cuando estamos desarrollando. Se encarga de realizar tareas que son repetitivas, como minificar código, compilación, pruebas unitarias, etc. en definitiva hace nuestro trabajo más fácil.

Nota: Aquí es importante que vuelvas a tu carpeta de escritorio, abrir tu editor de texto (Sublime/Atom) y arrastres la carpeta de Project Sails. Te abrirán la estructura de la aplicación y podrás ver los ficheros mediante tabs.

  • Estructura de la aplicación
chatSails
|--api
    |--controllers
    |--models
    |--policies
    |--responses
    |--services
|--assets
    |--images
    |--js
    |--styles
    |--templates
|--bower_components
|--config
|--node_modules
|--tasks
    |--config
    |--register
|--views
  • Configuración de archivos

Crear un archivo bower.js en la ruta: tasks/config/bower.js y escribir el siguiente código:

module.exports = function(grunt) {
  grunt.config.set('bower', {
    dev: {
        dest: '.tmp/public',
        js_dest: '.tmp/public/js',
        css_dest: '.tmp/public/styles'
    }
  });
 
  grunt.loadNpmTasks('grunt-bower');
 
};

Agregar 'bower:dev', en el archivo compileAssets.js de la siguiente ruta: /tasks/register/compileAssets.js

module.exports = function(grunt) {
  grunt.registerTask('compileAssets', [
    'clean:dev',
    'bower:dev',
    'jst:dev',
    'less:dev',
    'copy:dev',
    'coffee:dev'
  ]);
};

NOTA En Views dentro del editor, nos ubicamos en el archivo llamado homepag, con CTRL+A seleccionamos, suprimimos, le cambiamos el nombre a chat.ejs y pegamos el código mencionado a continuación.

Crear el archivo chat.ejs en la siguiente ruta: views/chat.ejs y escribir el siguiente código:

<div>
	<div class="navbar-header">Chat Sails by Pioneras Developers</div>
	<div class="col-md-12" style="padding:100px">
		<table id="table-message" class="table-message">
			<tbody></tbody>
		</table>

		</div>

		<div class="navbar">
			<div class="div-form">
					<div class="child-form">
						<input id="name" type="text" placeholder="Nombre">
					</div>

					<div  class="child-form">
						<input id="message" type="text" placeholder="Mensaje">
					</div>
					<button id="send" class="btn-send child-form">Enviar</button>  
			</div>
		</div>

	</div>

Configurar el archivo routes.js en la siguiente ruta: /config/routes.js y escribir el siguiente código:

module.exports.routes = {

  'get /': {
    view: 'chat'
  },
  'get /join_chat': 'ChatController.joinUser',
  'get /send_message': 'ChatController.sendMessage',
};
  • Instalación de jQuery Ir a la consola y ejecutar

bower install jquery --save

NOTA Aquí volvemos a Sublime.

  • Creación de carpetas

Crear la carpeta views en la siguiente ruta: assets/js/views en esta nueva carpeta crear el archivo chat.js y escribir el siguiente código:

$(function(){
	$("#send").click(function(){
		//enviar mensaje escrito
		var data = {};
		data.user = $("#name").val();
		data.message = $("#message").val();
		
		io.socket.get('/send_message', data,  function(data, response) {
		});

		$("#message").val("");
		$("#message").focus();
	});

	//matricular usuario al chat
	io.socket.get('/join_chat', function(data, response) {
	});

	//recibir mensaje
	io.socket.on('message', function(data) {
		var tr = $("<tr><td class='td'><strong>" + data.user + " : " + "</strong>" + data.message + "</td></tr>");
		$("#table-message").find("tbody").append(tr);
	});
});

Crear la carpeta views en la siguiente ruta: assets/styles/views en esta nueva carpeta crear el archivo chat.css y escribir el siguiente código:

	body{
		background: #ededed;
		font-family: 'Open Sans', sans-serif;

	}

	.navbar-header {
		font-family: 'Open Sans', sans-serif;
		font-size: 33px;
		text-align: center;
		color: #FF8410;
		font-style: italic;
		font-weight: bold;
		padding: 2px;
		text-shadow: 1px 2px #999;
		height: 60px;
	}

	.chat_message {
		padding: 10px;
		color: #000;
		font-size: 15px;
		background: #fff;
		font-family: 'Open Sans', sans-serif;
	}
	.table-message {
		width: 100%;
		max-width: 100%;
		margin-bottom: 23px;
	}

	.td {
		padding: 5px;
		border-top: 1px solid #dddddd;
		height: 30px;
		background: white;
	}

	.navbar {
		position: fixed;
		right: 0;
		left: 0;
		z-index: 1030;
		background-color: #FF8410; 
		bottom: 0;
		margin-bottom: 0;
		height: 60px;
	}

	.content-form {
		
	}

	.div-form {
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.child-form {
		height: 30px;
		margin-right: 20px;
		border-bottom: 1px solid white;
	}

	.child-form input {
		height: 30px;
		background-color: rgba(255,255,255,0);
    	border: 0;
    	color: white;
    	font-family: 'Open Sans', sans-serif;
    	font-size: 15px;
	}

	.child-form input:focus {
		outline: none;
	}

	::-webkit-input-placeholder {
		color: rgba(255,255,255,0.5);
	}

	.btn-send {
		text-transform: uppercase;
		box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
		border-right: none;
		border-bottom: none;
        border-radius: 5px;
 		transition: all 2s ease;
        width: 10%;
	}
  • Creación de un API

Se creará el archivo controlador, para ello ejecutaremos la siguiente sentencia en la consola:

sails generate api Chat

  • Configuración de archivo ChatController

En la siguiente ruta: api/controllers/ChatController.js en esta nueva carpeta crear el archivo chat.css y escribir el siguiente código:

 module.exports = {

 	joinUser: function(req, res){
 		console.info("Se une un usuario nuevo al chat");
 		if (!req.isSocket) {return res.badRequest();}
 		sails.sockets.join(req, 'PionerasDev');
 	},

 	sendMessage: function(req, res){
 		var data = {};
 		data.user = req.param("user");
 		data.message = req.param("message");
		sails.sockets.broadcast('PionerasDev', 'message', data);
 	}

 };
  • Migraciones de las Bases de datos

Para las migraciones de la base de datos. Existen 3 tipos de migraciones:

 1. safe: Nunca auto-migra la base de datos. Debe hacerse a mano
 2. alter: Auto-migra, intentando mantener los datos actuales
 3. drop: Vacía/elimina todos los datos y reconstruye los modelos cada vez que se realiza un Sails lift

En esta ocasión se usará alter, para modificar la migración se abre el archivo: config/models.js y se descomenta la línea 30

migrate: 'alter'

  • Chat Pioneras

Iniciamos el servidor web con el siguiente comando:

sails lift

Abrimos el navegador y visitamos la siguiente dirección http://localhost:1337

😆 !Chat de Pioneras funcionando! 👏