Foros del Web » Programando para Internet » PHP »

Problema chat

Estas en el tema de Problema chat en el foro de PHP en Foros del Web. Hola, esto es un problema con mi versión adaptada del chat de Jquery parecido al de Gmail... El problema es, que al seleccionar un amigo, ...
  #1 (permalink)  
Antiguo 17/03/2012, 03:16
Avatar de roal40  
Fecha de Ingreso: enero-2012
Mensajes: 61
Antigüedad: 12 años, 2 meses
Puntos: 4
Problema chat

Hola, esto es un problema con mi versión adaptada del chat de Jquery parecido al de Gmail...

El problema es, que al seleccionar un amigo, lo he tenido que hacer mediante ID ya que en el div si era por nombre quedaba...

Código HTML:
<div id="chatbox_pepito tiene espacios"></div> 
De esta manera, el chat no funcionaba, pero lo puse para que quedase con la ID de pepito

Código HTML:
<div id="chatbox_999"></div> 
El problema es que... obviamente... el titulo, en la parte superiro (La cabecera de con quien hablas) es que se muestra...

999

Os dejo los codigos...

chat.php

Código PHP:
<?php
define 
('DBPATH','localhost');
define ('DBUSER','user');
define ('DBPASS','pass');
define ('DBNAME','nombre');

session_start();

global 
$dbh;
$dbh mysql_connect(DBPATH,DBUSER,DBPASS);
mysql_selectdb(DBNAME,$dbh);

if (
$_GET['action'] == "chatheartbeat") { chatHeartbeat(); } 
if (
$_GET['action'] == "sendchat") { sendChat(); } 
if (
$_GET['action'] == "closechat") { closeChat(); } 
if (
$_GET['action'] == "startchatsession") { startChatSession(); } 

if (!isset(
$_SESSION['chatHistory'])) {
    
$_SESSION['chatHistory'] = array();    
}

if (!isset(
$_SESSION['openChatBoxes'])) {
    
$_SESSION['openChatBoxes'] = array();    
}

function 
chatHeartbeat() {
    
    
$sql "select * from chat where (chat.to = '".mysql_real_escape_string($_SESSION['username'])."' AND recd = 0) order by id ASC";
    
$query mysql_query($sql);
    
$items '';

    
$chatBoxes = array();

    while (
$chat mysql_fetch_array($query)) {

        if (!isset(
$_SESSION['openChatBoxes'][$chat['from']]) && isset($_SESSION['chatHistory'][$chat['from']])) {
            
$items $_SESSION['chatHistory'][$chat['from']];
        }

        
$chat['message'] = sanitize($chat['message']);

        
$items .= <<<EOD
                       {
            "s": "0",
            "f": "
{$chat['from']}",
            "e": "
{$chat['idfrom']}",
            "m": "
{$chat['message']}"
       },
EOD;

    if (!isset(
$_SESSION['chatHistory'][$chat['from']])) {
        
$_SESSION['chatHistory'][$chat['from']] = '';
    }

    
$_SESSION['chatHistory'][$chat['from']] .= <<<EOD
                           {
            "s": "0",
            "f": "
{$chat['from']}",
            "e": "
{$chat['idfrom']}",
            "m": "
{$chat['message']}"
       },
EOD;
        
        unset(
$_SESSION['tsChatBoxes'][$chat['from']]);
        
$_SESSION['openChatBoxes'][$chat['from']] = $chat['sent'];
    }

    if (!empty(
$_SESSION['openChatBoxes'])) {
    foreach (
$_SESSION['openChatBoxes'] as $chatbox => $time) {
        if (!isset(
$_SESSION['tsChatBoxes'][$chatbox])) {
            
$now time()-strtotime($time);
            
$time date('g:iA M dS'strtotime($time));

            
$message "Enviado a las $time";
            if (
$now 180) {
                
$items .= <<<EOD
{
"s": "2",
"f": "$chatbox",
"m": "
{$message}"
},
EOD;

    if (!isset(
$_SESSION['chatHistory'][$chatbox])) {
        
$_SESSION['chatHistory'][$chatbox] = '';
    }

    
$_SESSION['chatHistory'][$chatbox] .= <<<EOD
        {
"s": "2",
"f": "$chatbox",
"m": "
{$message}"
},
EOD;
            
$_SESSION['tsChatBoxes'][$chatbox] = 1;
        }
        }
    }
}

    
$sql "update chat set recd = 1 where chat.to = '".mysql_real_escape_string($_SESSION['username'])."' and recd = 0";
    
$query mysql_query($sql);

    if (
$items != '') {
        
$items substr($items0, -1);
    }
header('Content-type: application/json');
?>
{
        "items": [
            <?php echo $items;?>
        ]
}

<?php
            
exit(0);
}

function 
chatBoxSession($chatbox) {
    
    
$items '';
    
    if (isset(
$_SESSION['chatHistory'][$chatbox])) {
        
$items $_SESSION['chatHistory'][$chatbox];
    }

    return 
$items;
}

function 
startChatSession() {
    
$items '';
    if (!empty(
$_SESSION['openChatBoxes'])) {
        foreach (
$_SESSION['openChatBoxes'] as $chatbox => $void) {
            
$items .= chatBoxSession($chatbox);
        }
    }


    if (
$items != '') {
        
$items substr($items0, -1);
    }

header('Content-type: application/json');
?>
{
        "username": "<?php echo $_SESSION['nombrechat'];?>",
        "items": [
            <?php echo $items;?>
        ]
}

<?php


    
exit(0);
}

function 
sendChat() {
$resultadoamigos mysql_query("SELECT * FROM users WHERE (id = '$_POST[to]')");
while(
$filanombre mysql_fetch_array($resultadoamigos)){
    
$from $_SESSION['nombrechat'];
    
$to $filanombre['nombre'];
    
$idto $_POST['to'];
    
$idfrom $_SESSION['username'];
    
$message $_POST['message'];
}

    
$_SESSION['openChatBoxes'][$_POST['to']] = date('Y-m-d H:i:s'time());
    
    
$messagesan sanitize($message);

    if (!isset(
$_SESSION['chatHistory'][$_POST['to']])) {
        
$_SESSION['chatHistory'][$_POST['to']] = '';
    }

    
$_SESSION['chatHistory'][$_POST['to']] .= <<<EOD
                       {
            "s": "1",
            "f": "
{$to}",
            "e": "
{$idto}",
            "m": "
{$messagesan}"
       },
EOD;


    unset(
$_SESSION['tsChatBoxes'][$_POST['to']]);

    
$sql "insert into chat (chat.from,idfrom,chat.to,idto,message,sent) values ('".mysql_real_escape_string($idfrom)."', '".mysql_real_escape_string($from)."', '".mysql_real_escape_string($idto)."', '".mysql_real_escape_string($to)."', '".mysql_real_escape_string($message)."',NOW())";
    
$query mysql_query($sql);
    echo 
"1";
    exit(
0);
}

function 
closeChat() {

    unset(
$_SESSION['openChatBoxes'][$_POST['chatbox']]);
    
    echo 
"1";
    exit(
0);
}

function 
sanitize($text) {
    
$text htmlspecialchars($textENT_QUOTES);
    
$text str_replace("\n\r","\n",$text);
    
$text str_replace("\r\n","\n",$text);
    
$text str_replace("\n","<br>",$text);
    return 
$text;
}
Nota: Por razones que ahora no me acuerdo... hice que la IDfrom sea el nombre del usuario, y from sea la ID... (Error mio, nada más ténganlo en cuenta).

Nota 2: Esta parte no modifica el titulo del chat, pero por si lo quieren...

Código que inicia el chat en index.php

Código HTML:
<a href="javascript:void(0)" onclick="javascript:chatWith('<?=$filaamigos['idusuariopedido']?>')"><?=$filaamigos['usuariopedido']?></a> 
Nota: De esta manera la chatbox quedaria... div id="chatbox_1"></div> (Por ejemplo, si pusiese nada mas usuario pedido... quedaría el nombre del usuario, con espacios, por lo que no lo cojería el div)
  #2 (permalink)  
Antiguo 17/03/2012, 03:18
Avatar de roal40  
Fecha de Ingreso: enero-2012
Mensajes: 61
Antigüedad: 12 años, 2 meses
Puntos: 4
Respuesta: Problema chat

Sigo el post, ya que no cabe:

Chat.js

Código HTML:
var windowFocus = true;
var username;
var chatHeartbeatCount = 0;
var minChatHeartbeat = 1000;
var maxChatHeartbeat = 33000;
var chatHeartbeatTime = minChatHeartbeat;
var originalTitle;
var blinkOrder = 0;

var chatboxFocus = new Array();
var newMessages = new Array();
var newMessagesWin = new Array();
var chatBoxes = new Array();
$(document).ready(function(){
	originalTitle = document.title;
	startChatSession();

	$([window, document]).blur(function(){
		windowFocus = false;
	}).focus(function(){
		windowFocus = true;
		document.title = originalTitle;
	});
});

function restructureChatBoxes() {
	align = 0;
	for (x in chatBoxes) {
		chatboxtitle = chatBoxes[x];

		if ($("#chatbox_"+chatboxtitle).css('display') != 'none') {
			if (align == 0) {
				$("#chatbox_"+chatboxtitle).css('right', '30px');
			} else {
				width = (align)*(317+14)+30;
				$("#chatbox_"+chatboxtitle).css('right', width+'px');
			}
			align++;
		}
	}
}

function chatWith(chatuser) {
	createChatBox(chatuser);
	$("#chatbox_"+chatuser+" .chatboxtextarea").focus();
}

function createChatBox(chatboxtitle,minimizeChatBox) {
	if ($("#chatbox_"+chatboxtitle).length > 0) {
		if ($("#chatbox_"+chatboxtitle).css('display') == 'none') {
			$("#chatbox_"+chatboxtitle).css('display','block');
			restructureChatBoxes();
		}
		$("#chatbox_"+chatboxtitle+" .chatboxtextarea").focus();
		return;
	}

	$(" <div />" ).attr("id","chatbox_"+chatboxtitle)
	.addClass("chatbox")
	.html('<div class="chatboxhead"><div class="chatboxtitle">'+chatboxtitle+'</div><div class="chatboxoptions"><a href="javascript:void(0)" onclick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"><div class="minimizar_chat"></div></a> <a href="javascript:void(0)" onclick="javascript:closeChatBox(\''+chatboxtitle+'\')"><div class="cerrar_chat"></div></a></div><br clear="all"/></div><div class="chatboxcontent"></div><div class="chatboxinput"><textarea class="chatboxtextarea" onkeydown="javascript:return checkChatBoxInputKey(event,this,\''+chatboxtitle+'\');"></textarea></div>')
	.appendTo($( "body" ));
			   
	$("#chatbox_"+chatboxtitle).css('bottom', '0px');
	
	chatBoxeslength = 0;

	for (x in chatBoxes) {
		if ($("#chatbox_"+chatBoxes[x]).css('display') != 'none') {
			chatBoxeslength++;
		}
	}

	if (chatBoxeslength == 0) {
		$("#chatbox_"+chatboxtitle).css('right', '30px');
	} else {
		width = (chatBoxeslength)*(317+14)+30;
		$("#chatbox_"+chatboxtitle).css('right', width+'px');
	}
	
	chatBoxes.push(chatboxtitle);

	if (minimizeChatBox == 1) {
		minimizedChatBoxes = new Array();

		if ($.cookie('chatbox_minimized')) {
			minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/);
		}
		minimize = 0;
		for (j=0;j<minimizedChatBoxes.length;j++) {
			if (minimizedChatBoxes[j] == chatboxtitle) {
				minimize = 1;
			}
		}

		if (minimize == 1) {
			$('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','none');
			$('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','none');
		}
	}

	chatboxFocus[chatboxtitle] = false;

	$("#chatbox_"+chatboxtitle+" .chatboxtextarea").blur(function(){
		chatboxFocus[chatboxtitle] = false;
		$("#chatbox_"+chatboxtitle+" .chatboxtextarea").removeClass('chatboxtextareaselected');
	}).focus(function(){
		chatboxFocus[chatboxtitle] = true;
		newMessages[chatboxtitle] = false;
		$('#chatbox_'+chatboxtitle+' .chatboxhead').removeClass('chatboxblink');
		$("#chatbox_"+chatboxtitle+" .chatboxtextarea").addClass('chatboxtextareaselected');
	});

	$("#chatbox_"+chatboxtitle).click(function() {
		if ($('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display') != 'none') {
			$("#chatbox_"+chatboxtitle+" .chatboxtextarea").focus();
		}
	});

	$("#chatbox_"+chatboxtitle).show();
}


function chatHeartbeat(){

	var itemsfound = 0;
	
	if (windowFocus == false) {
 
		var blinkNumber = 0;
		var titleChanged = 0;
		for (x in newMessagesWin) {
			if (newMessagesWin[x] == true) {
				++blinkNumber;
				if (blinkNumber >= blinkOrder) {
					document.title = x+' dice...';
					titleChanged = 1;
					break;	
				}
			}
		}
		
		if (titleChanged == 0) {
			document.title = originalTitle;
			blinkOrder = 0;
		} else {
			++blinkOrder;
		}

	} else {
		for (x in newMessagesWin) {
			newMessagesWin[x] = false;
		}
	}

	for (x in newMessages) {
		if (newMessages[x] == true) {
			if (chatboxFocus[x] == false) {
				$('#chatbox_'+x+' .chatboxhead').toggleClass('chatboxblink');
			}
		}
	}
	
	$.ajax({
	  url: "chat.php?action=chatheartbeat",
	  cache: false,
	  dataType: "json",
	  success: function(data) {

		$.each(data.items, function(i,item){
			if (item)	{

				chatboxtitle = item.f;

				if ($("#chatbox_"+chatboxtitle).length <= 0) {
					createChatBox(chatboxtitle);
				}
				if ($("#chatbox_"+chatboxtitle).css('display') == 'none') {
					$("#chatbox_"+chatboxtitle).css('display','block');
					restructureChatBoxes();
				}
				
				if (item.s == 1) {
					item.e = username;
				}

				if (item.s == 2) {
					$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxinfo">'+item.m+'</span></div>');
				} else {
					newMessages[chatboxtitle] = true;
					newMessagesWin[chatboxtitle] = true;
					$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+item.e+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+item.m+'</span></div>');
				}

				$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);
				itemsfound += 1;
			}
		});

		chatHeartbeatCount++;

		if (itemsfound > 0) {
			chatHeartbeatTime = minChatHeartbeat;
			chatHeartbeatCount = 1;
		} else if (chatHeartbeatCount >= 10) {
			chatHeartbeatTime *= 2;
			chatHeartbeatCount = 1;
			if (chatHeartbeatTime > maxChatHeartbeat) {
				chatHeartbeatTime = maxChatHeartbeat;
			}
		}
		
		setTimeout('chatHeartbeat();',chatHeartbeatTime);
	}});
}

function closeChatBox(chatboxtitle) {
	$('#chatbox_'+chatboxtitle).css('display','none');
	restructureChatBoxes();

	$.post("chat.php?action=closechat", { chatbox: chatboxtitle} , function(data){	
	});

}
Continuación...
  #3 (permalink)  
Antiguo 17/03/2012, 03:20
Avatar de roal40  
Fecha de Ingreso: enero-2012
Mensajes: 61
Antigüedad: 12 años, 2 meses
Puntos: 4
Respuesta: Problema chat

Continuación...

chat.js

Código HTML:
function toggleChatBoxGrowth(chatboxtitle) {
	if ($('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display') == 'none') {  
		
		var minimizedChatBoxes = new Array();
		
		if ($.cookie('chatbox_minimized')) {
			minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/);
		}

		var newCookie = '';

		for (i=0;i<minimizedChatBoxes.length;i++) {
			if (minimizedChatBoxes[i] != chatboxtitle) {
				newCookie += chatboxtitle+'|';
			}
		}

		newCookie = newCookie.slice(0, -1)


		$.cookie('chatbox_minimized', newCookie);
		$('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','block');
		$('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','block');
		$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);
	} else {
		
		var newCookie = chatboxtitle;

		if ($.cookie('chatbox_minimized')) {
			newCookie += '|'+$.cookie('chatbox_minimized');
		}


		$.cookie('chatbox_minimized',newCookie);
		$('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','none');
		$('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','none');
	}
	
}

function checkChatBoxInputKey(event,chatboxtextarea,chatboxtitle) {
	 
	if(event.keyCode == 13 && event.shiftKey == 0)  {
		message = $(chatboxtextarea).val();
		message = message.replace(/^\s+|\s+$/g,"");

		$(chatboxtextarea).val('');
		$(chatboxtextarea).focus();
		$(chatboxtextarea).css('height','44px');
		if (message != '') {
			$.post("chat.php?action=sendchat", {to: chatboxtitle, message: message} , function(data){
				message = message.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&quot;");
				$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+username+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+message+'</span></div>');
				$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);
			});
		}
		chatHeartbeatTime = minChatHeartbeat;
		chatHeartbeatCount = 1;

		return false;
	}

	var adjustedHeight = chatboxtextarea.clientHeight;
	var maxHeight = 94;

	if (maxHeight > adjustedHeight) {
		adjustedHeight = Math.max(chatboxtextarea.scrollHeight, adjustedHeight);
		if (maxHeight)
			adjustedHeight = Math.min(maxHeight, adjustedHeight);
		if (adjustedHeight > chatboxtextarea.clientHeight)
			$(chatboxtextarea).css('height',adjustedHeight+8 +'px');
	} else {
		$(chatboxtextarea).css('overflow','auto');
	}
	 
}

function startChatSession(){  
	$.ajax({
	  url: "chat.php?action=startchatsession",
	  cache: false,
	  dataType: "json",
	  success: function(data) {
 
		username = data.username;

		$.each(data.items, function(i,item){
			if (item)	{

				chatboxtitle = item.f;

				if ($("#chatbox_"+chatboxtitle).length <= 0) {
					createChatBox(chatboxtitle,1);
				}
				
				if (item.s == 1) {
					item.f = username;
				}

				if (item.s == 2) {
					$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxinfo">'+item.m+'</span></div>');
				} else {
					$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+item.f+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+item.m+'</span></div>');
				}
			}
		});
		
		for (i=0;i<chatBoxes.length;i++) {
			chatboxtitle = chatBoxes[i];
			$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);
			setTimeout('$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);', 100);
		}
	
	setTimeout('chatHeartbeat();',chatHeartbeatTime);
		
	}});
}

jQuery.cookie = function(name, value, options) {
    if (typeof value != 'Desconocido') {
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString();
        }
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};
  #4 (permalink)  
Antiguo 17/03/2012, 09:43
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 20 años
Puntos: 406
Respuesta: Problema chat

Es demasiado código para estarlo checando, y mas para lo que quieres, ahora, para solucionar el tema lo mas sencillo y rapido es que hagas una petición via Ajax al servidor para que este te responda el nombre del usuario a partir del id que tienes y así colocarlo en el titulo de tu ventana, la otra forma es que agregues el nombre pero remplaces los espacios con guines bajos, y luego desde javascript al abrir la ventana volver a remplazar los guiones bajos en espacios para poder colocarlo en el titulo, ya depende como quieras resolverlo...
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)
  #5 (permalink)  
Antiguo 17/03/2012, 10:01
Avatar de roal40  
Fecha de Ingreso: enero-2012
Mensajes: 61
Antigüedad: 12 años, 2 meses
Puntos: 4
Respuesta: Problema chat

Cita:
Iniciado por Nemutagk Ver Mensaje
Es demasiado código para estarlo checando, y mas para lo que quieres, ahora, para solucionar el tema lo mas sencillo y rapido es que hagas una petición via Ajax al servidor para que este te responda el nombre del usuario a partir del id que tienes y así colocarlo en el titulo de tu ventana, la otra forma es que agregues el nombre pero remplaces los espacios con guines bajos, y luego desde javascript al abrir la ventana volver a remplazar los guiones bajos en espacios para poder colocarlo en el titulo, ya depende como quieras resolverlo...
Buenas, lo de los guiones ya lo intenté, y es demasiado código para modificar...

La cosa es que... en el chat.php donde las lineas...

username....

item....

Poner también un item t que sea el nombre mediante una consulta...

En el principio:

var titulochat;

Un poco más abajo...

if (item) {
titulochat = item.t;
}

Y donde el header del chat...

'+titulochat+'

Pero me sale con undefined, creo que es por la razón de que he cerrado el if antes de llegar... xD ahora mismo no tengo tiempo para probarlo, pero en un rato probaré.

Etiquetas: chat, html, mysql, sql, usuarios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:42.