node3

 

Hola a todos, hace rato no haciamos una entrada con algo de "sustancia" porque bueno... nos habiamos dedicado a la impresion 3d, no todo funciona tan fácil cuando se tiene una DIY, en fin hoy escribiremos algo sobre node.js (y socket.io) un fantastico entorno de programación con infinitas posibilidades en cuanto al intercambio de datos cosa que hace algunos años eran algo complicadas.

Primero que todo lo que deben hacer es descargar e instalar  XAMPP o el servidor de su preferencia.
Posteriormente deben descargar node.js e instalarlo.


A continuacion dejamos un excelente video (aprendimos de ahi) de como instalar node.js y socket.io

 

 

Tambien dejamos un video muy importante respecto a node.js ( con el también aprendimos un montón, les recomendamos que lo vean en su totalidad)

 

Ahora empezaremos a codear nuestro servidor:
El chat funcionará por el puerto 3000, si lo prefieren pueden cambiarlo.

var link=require("socket.io").listen(3000);
 
link.sockets.on("connection",begin);
 
function begin(user){
 
 
user.on("mensajeNuevo", emit);
 
 
}
 
 
function emit(data){
 
link.sockets.emit("mensajeDelServidor",data);
console.log(data);
 
}
 

 

 Increible que sea tan poco codigo no?, pero funciona...

Ahora guarden ese codigo como chat_server.js y no olviden guardarlo dentro de su carpeta de instalacion de node.js en nuestro caso es C:\Program Files\nodejs

 

Ahora escribiremos el cliente

 

 
<!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="http://localhost:3000/socket.io/socket.io.js"> </script>
 
 <script>
 var websocket=io.connect("http://localhost:3000"); 
 
 $(document).on("ready",iniciar);
  
 function iniciar(){
 
 websocket.on("mensajeDelServidor",recibirMensaje);
 
 $("#sendmsg").on("click",enviarMensaje);
 }
 
function enviarMensaje(){
 
websocket.emit("mensajeNuevo",$("#mensaje").val());
 
}
function recibirMensaje(datosServidor){
 
 $("#listamsg").append($(' <li>').text(datosServidor));
 
 
}
 </script>   
       
 </head>
 
 <body>
 <ul id="listamsg"> </ul>
 <input type="text" id="mensaje">
 <button id="sendmsg">Enviar </button>
 </body>
 </html>

Ahora guardamos este archivo como chat.html dentro de nuestra carpeta htdocs dexampp, en nuestro caso es C:\xampp\htdocs\node.

Vamos a probar nuestro chat.


1. Ir al panel de control de XAMPP e iniciar Apache

 

xampp

2. Ir a cmd, y entrar a node, para nosotros seria C:\Program Files\nodejs

node

3. Teclear el siguiente comando : node chat_server.js

node2

 

Al dar enter no aparecerá nada raro asi que no hay de que preocuparse.
 
 
4.Ir al navegador de su preferencia y teclear Localhost/node/chat.html (en nuestro caso)
 
chat
Como pueden ver no es mas que una caja de texto con un boton de enviar.
 
5. finalmente solo nos queda escribir algo y mirar que es lo que pasa en cmd
hola
 
6.Lo que queda es escribir la misma dirección en otro navegador y podrán ver como los mensajes se ven en cada página.
 
chat2
 
Buen esperamos que haya sido util la información, si desean descargar los archivos pueden hacer click Aquí