Chat en tu navegador con node.js y Faye


Siguiendo con los posts sobre faye, vamos a realizar un ejemplo práctico y muy vistoso, vamos a realizar un sencillo pero funcional  chat web en este post.

Lo primero es crear el servidor node:

Solo tenemos que incluir la extensión de faye para node

  1. var Faye = require(‘./faye/faye-node.js’); var fayeServer = new Faye.NodeAdapter({  mount:    ‘/’});
  2. fayeServer.listen(8888);

A este fichero lo llamaremos node.js, ahora desde bash lanzamos el servidor que acabamos de crear:

  1. $ node node.js

Y ya tenemos nuestro “servidor de chat” corriendo, preparado para funcionar

En el lado cliente creamos un sencillo html y un script para gestionar el chat:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript" src="faye/faye-browser-min.js"></script>
  2.  
  3. <script type="text/javascript">// <![CDATA[
  4.                         $(function() {
  5.                                 var client = new Faye.Client(‘http://localhost:8888/’);
  6.                                 var nick = "";
  7.  
  8.                                 client.subscribe(‘/chat’, function(message) {
  9.                                         $("#chat").append("
  11. <div><strong>"+message.nick+"</strong>: "+message.text+"</div>
  12.  
  13. ")
  14.  
  15.                                 });
  16.  
  17.                                 $(".nick form").submit(function() {
  18.                                         nick=$(".nick input[name=nick]").val();
  19.                                         $(".nick").hide();     
  20.                                         $(".chatMessage").show();
  21.  
  22.                                         return false;
  23.                                 })
  24.  
  25.                                 $(".chatMessage form").submit(function() {
  26.                                         text=$(".chatMessage input[name=message]").val();
  27.                                         client.publish(‘/chat’, {
  28.                                                 nick : nick,
  29.                                                 text: text
  30.                                         });
  31.                                         return false;
  32.                                 })
  33.                         });
  34.  
  35. // ]]></script>
  36.  
  37. &nbsp;
  38.  
  39. &nbsp;
  40. <div class="nick"><form action="#" method="POST" enctype="multipart/form-data"><label>Tu nick:</label>  <input type="text" name="nick" /> <input type="submit" value="Entrar al chat!!" /></form></div>
  41. <div class="chatMessage" style="display: none;"><form action="#" method="POST" enctype="multipart/form-data"><label>Tu mensaje:</label>  <input type="text" name="message" /> <input type="submit" value="Enviar" /></form></div>
  42.  
  43. <hr />
  44.  
  45. &nbsp;

 

Dejo una demostración funcional del tutorial para ver realmente la rapidez de node y faye lo recomendable seria iniciar la demo en dos o tres navegadores distintos.

Descargar código

ACTUALIZACIÓN: Debido a un cambio de proveedor en nuestro servidor node ha dejado de funcionar y el ejemplo del tutorial no funcionará

Relacionado

  • Stan

    Primera vez que leo de Faye y el chat esta increible, lo probe con una amiga remotamente y funciono muy bien. Excelente aporte gracias por compartirlo.