Contenido

Crea un chat como el de gMail/Facebook con jQuery

15 may

+ 9

Si estás buscando un chat para tu aplicación web, no dejes pasar este similar a los implementados en gMail o Facebook. Se trata de una implementación con jQuery y PHP que nos facilitará el trabajo de crearlo desde 0 nosotros mismo. El resultado, lo puedes ver en este ejemplo.[Descargar]

  • No tiene mala pinta, aparentemente si tiene el mismo estilo que el de gMail o Facebook, pero las técnicas utilizadas en esos chats son diferentes a la utilizada por el chat de Anant Garg.

    Los chat de gMail o Facebook usan la técnica COMET para recibir los mensajes, mientras que el de Anant Garg lo que hace es un setTimeout y ejecutar una petición AJAX cada X tiempo, cosa que no es muy eficiente.

    Otra cosa que he visto y no me convence es el modo de almacenar la información y de enviarla, generalmente los chats hacen uso de sockets para realizar conexiones y utilizan un “protocolo” propio de comunicación, lo que hace más robusta la y más eficiente aplicación.

    Y por último, cuando comienzas una conversación, y cierras la ventana, la próxima vez que la abres, vuelven a a parecer los mensajes enviados, normalmente una vez que se cierra el chat, la conversación debería quedar almacenada en logs (ya sean texto plano, bases de datos etc), es un problema que depende en que situación puede ser muy grave.

    Con ésta crítica no quiero dejar por los suelos el chat, unicamente es una crítica constructiva, indicando cuales son (desde mi punto de vista) los fallos que tiene el chat y donde se podría mejorar :-)

  • @epplestun Hello, I am aware of the technologies used by Gmail/Facebook- Comet + Jabber. But I have not implemented these technologies on purpose because most web servers do not have Comet support. In the next version I will be releasing a COMET version but that can be used only by users who have a dedicated server.

    Also, as you have pointed out, the chat history is displayed if the user closes and opens the chat box again. This is a feature similar to Gmail. Only when the user closes the session, the chat history is no longer displayed to the user, although a log is created in a mySQL database.

    Feel free to email me if you have any other suggestions.

  • @Anant Garg: Contesto en castellano ya que el blog es en castellano.

    Entiendo que dices que es necesario tener un servidor dedicado para poder implementar un servidor HTTP que envie cabeceras PUSH (método real para hacer COMET), pero se puede implementar sin ello.

    Aquí te dejo un ejemplo escrito en MooTools y PHP.

    Código Javascript:

    
    	var Comet = new Class({
    		timestamp : 0,
    		url : './chat.php',
    		noerror : true,
    		
    		initialize : function() {		
    		},
    		
    		connect : function() {
    			var self = this;
    			
    			this.ajax = new Request.JSON({
    				url : self.url,
    				method : 'get',
    				onSuccess : function(transport) {
    					self.timestamp = transport.timestamp;
    					self.handleResponse(transport);
    				},
    				
    				onComplete : function(transport) {
    					if (!self.noerror) {
    						setTimeout(function(){ 
    							self.connect() 
    							}, 5000);
    					} else {
    						self.connect();
    	        			self.noerror = false;
    					}
    				
    				}
    			}).send('timestamp=' + self.timestamp);
    			
    			this.ajax.comet = this;
    		},
    		
    		disconnect: function(){ 
    		},
    		
    		handleResponse: function(response) {
    			$('content').innerHTML += '' + response.msg + '';
    	  	},
    	  	
    	  	doRequest: function(request){
    			new Request({
    				url : this.url,
    	      		method: 'get'
    	    	}).send('msg=' + request);
    	  	}
    	});
    	
    	window.addEvent('domready', function() {
    		var comet = new Comet();
    		comet.connect();
    		
    		$('form').addEvent('submit', function(e) {
    			new Event(e).stop();
    			
    			comet.doRequest($('word').value);
    			
    			$('word').value='';
    			
    			return false;
    		});
    	});
    

    Y el código PHP (muy básico, ya que se almacena en un fichero de texto plano .txt):

    parte del path correspondiente al directorio

    
    $filename  = dirname(__FILE__).'/datos.txt';
    
    // almacenamos un nuevo mensajes en el archivo 
    $msg = isset($_GET['msg']) ? $_GET['msg'] : '';
    if ($msg != ''){
    	//file_put_contents -> escribir una cadena sobre un archivo
    	file_put_contents($filename,$msg);
    	die();
    }
    
    // bucle infinito mientras los datos del archivo no son modificados
    $lastmodif    = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
    
    //filemtime -> obtiene la hora de modificación del archivo
    $currentmodif = filemtime($filename);
    while($currentmodif  limpia la cache de estado de un archivo
      	clearstatcache();
      	$currentmodif = filemtime($filename);
    }
    
    // devolvemos array en formato json
    $response = array();
    
    //file_get_contents -> lee un archivo entero en una cadena
    $response['msg']       = file_get_contents($filename);
    $response['timestamp'] = $currentmodif;
    echo json_encode($response);
    
    //flush -> vaciar el búfer de salida
    flush();
    ?>
    

    Un saludo :-)

  • @epplestun Hello, the problem with the above example is that if it is used with an Apache server, a number of PHP sessions will remain open and it will completely choke the server. Thus I have mentioned that we require a dedicated server (with root access) so that we can install either MochiWeb/Meteor etc, because using Apache is not the best idea.

  • Excelente explicacion del uso del COMET
    debo implementarlo en la web http://www.delchoco.com vere como me va.

  • Gracias Andrés, excelente script, pero tengo una duda yo trabajo como programador y ese chat es para implementarlo en una red social con animo de lucro, que implicaciones tiene utilizarlo es que entiendo poco lo de las licencias, mil gracias

  • ¿Alguien sabe si existe la misma implementación pero para un entorno Java?

    Gracias!

  • @Andres: La licencia dice que no está permitido usar en proyectos como el que tu estás implementando. Tendrás que buscar una alternativa libre o que te permita usarla.
    @gorka: El HTML y Javascript, puedes usar este mismo, simplemente debes cambiar el fichero chat.php a jsp y te funcionará perfectamente.

  • @gorka,
    Echa un vistazo a DWR (http://directwebremoting.org/dwr/index.html) . Funciona bien para reverse ajax, etc. Solo para Java :-)

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.