[Pequeño aporte] Chat con amigos MySQL y PHP

[roal40]

Buenas, os traigo un pequeño aporte que a muchos les gustará... está incompleto, lo posteo, ya que me gustaría compartirlo, y de paso... que me sugieran como mejorar el codigo...

Voy a suponer que tienen un sistema de amigos construido, ya que si tuviese que postear el mio, podría tirarme un buen rato...

Este chat es algo parecido al de la red social Tuenti o el de Facebook (No se como és ahora, no uso el facebook)

Este chat lo estoy construyendo actualmente para mi red social, por lo que necesito mejorarlo, y seguro que entre todos los usuarios podremos hacer un chat propio 100% funcional.

//Esto va en el indice

//Esto es la parte donde se mostrarán los amigos...

Código HTML:

<div class="amigos">
<?
$idpropietario = $_SESSION['idusuario'];
$resultadoamigos = mysql_query("SELECT * FROM amigos WHERE (idnombreusuario = '$idpropietario' AND estado= '1' AND conectadoamigo = '1') ORDER BY idpeticion DESC");
$resultadocontadoramigos = mysql_query("SELECT * FROM amigos WHERE (idnombreusuario = '$idpropietario' AND estado= '1' AND conectadoamigo = '1')");
$contadoramigos=mysql_num_rows($resultadocontadoramigos);
?>
                        <strong>Chat</strong> (<?=$contadoramigos?>)
    </div>
                        <div class="resultadochat">
                        <ul>
<?
while($filaamigos = mysql_fetch_array($resultadoamigos)){
?>
<li>
<div class="infochat">
      <a href="javascript:void(0)" onclick="document.getElementById('<?=$filaamigos['idusuariopedido']?>').style.display = ' block '; document.getElementById('caja_<?=$filaamigos['idusuariopedido']?>').style.display = ' block ';"><?=$filaamigos['usuariopedido']?></a>
</div>
                        </li>
                        <?
						}
						?>
                        </ul>
                        </div> 

//Esto es la parte donde se mostrarán las conversaciones... (No dejo estilos, las capas tienen un display:none; y se muestran segun le das con javascript con un display:block;

Código HTML:

<?
$idpropietario = $_SESSION['idusuario'];
$resultadoamigos = mysql_query("SELECT * FROM amigos WHERE (idnombreusuario = '$idpropietario' AND estado= '1' AND conectadoamigo = '1') ORDER BY idpeticion DESC");
while($filaamigos = mysql_fetch_array($resultadoamigos)){
?>
<div class="chat_box" id="caja_<?=$filaamigos['idusuariopedido']?>">
<div class="contenido_chat">
<div class="quienhablas">
<div class="contenidoquienhablas">
<div id="online_<?=$filaamigos['idusuariopedido']?>" class="online_icono"></div>
<div id="nombre_online_<?=$filaamigos['idusuariopedido']?>" class="nombre_online">
<p><?=$filaamigos['usuariopedido']?></p>
</div>
<div id="cerrar_<?=$filaamigos['idusuariopedido']?>" class="cerrar_chat">
<img src="css/img/cerrar_chat.png" onclick="document.getElementById('<?=$filaamigos['idusuariopedido']?>').style.display = ' none '; document.getElementById('caja_<?=$filaamigos['idusuariopedido']?>').style.display = ' none ';" />
</div>
<div id="minimizar_<?=$filaamigos['idusuariopedido']?>" class="minimizar_chat">
<img src="css/img/minimizar_chat.png" onclick="document.getElementById('caja_<?=$filaamigos['idusuariopedido']?>').style.display = ' none ';" />
</div>
</div>
</div>
<div id="mensajesrecividos_chat" class="mensajesrecividos_chat">
<?
$idpropietario = $_SESSION['idusuario'];
$resultachat = mysql_query("SELECT * FROM chat WHERE (idde = '$idpropietario' AND idpara ='$filaamigos[idusuariopedido]' OR idde = '$filaamigos[idusuariopedido]' AND idpara ='$idpropietario') ORDER BY idchat ASC");
while($filachat = mysql_fetch_array($resultachat)){
?>
<div class="mensajesrecibidoschat">
            <div class="imagenchat">
			<? 
if(empty($filachat['imagenusuario'])) {
?>
<a href="perfil.php?id=<?=$filachat['idde']?>"><img width="25px" height="25px" src="css/img/sinimagen.jpg"></a>
<?
	 }else{ 
?>
<a href="perfil.php?id=<?=$filachat['idde']?>"><img width="25px" height="25px" src="<?=$filachat['imagenusuario']?>" onerror="this.onerror=null;this.src='css/img/sinimagen.jpg';"></a>
<?

	 } 
	 ?>
     </div>
     <div class="nombrechat">
                 <?
		 	echo "<a href='perfil.php?id=".$filachat['idde']."'>".$filachat['de']."</a>";
			?>
            </div>
     <div class="chatintroducido">
            <?
            echo "".$filachat['mensaje'];
			?>
            </div>
            </div>
<?
}
?>
</div>
<div class="area_texto_chat">
<form action="acciones/enviarchat.php" method="post">
<textarea type="text" name="chatear" id="chatear" class="areaescribir" onkeypress="return checkearTecla_<?=$filaamigos['idusuariopedido']?>(event)"></textarea>
<input type="hidden" id="idusuariopedido" name="idusuariopedido" value="<?=$filaamigos['idusuariopedido']?>"/>
<input type="hidden" id="usuariopedido" name="usuariopedido" value="<?=$filaamigos['usuariopedido']?>"/>
<input type="hidden" id="avatarusuariopedido" name="avatarusuariopedido" value="<?=$filaamigos['avatarusuariopedido']?>"/>
<input type="submit" id="mandarchat_<?=$filaamigos['idusuariopedido']?>" name="mandarchat" class="botoninvisible" value="Enviar"/>
</form>
</div>
</div>
<script>
function checkearTecla_<?=$filaamigos['idusuariopedido']?>(e)
{
if(e.keyCode == 13)
document.getElementById("mandarchat_<?=$filaamigos['idusuariopedido']?>").click();
return true;
}
</script>
</div>
<?
}
?>
<div class="dockchat">
<?
$idpropietario = $_SESSION['idusuario'];
$resultadoamigos = mysql_query("SELECT * FROM amigos WHERE (idnombreusuario = '$idpropietario' AND estado= '1' AND conectadoamigo = '1') ORDER BY idpeticion DESC");
while($filaamigos = mysql_fetch_array($resultadoamigos)){
?>
<div class="contenidochat" id="<?=$filaamigos['idusuariopedido']?>">
<?
if(empty($filaamigos['avatarusuariopedido'])) {
?>
<a href="javascript:void(0)"><img src="css/img/sinimagen.jpg" x="50" y="50" style="width: 30px; height: 30px; top: 0px; left: 0px;" onclick="document.getElementById('caja_<?=$filaamigos['idusuariopedido']?>').style.display = ' block ';"></a>
<?
	 }else{ 
echo "<a href='javascript:void(0)'><img src='".$filaamigos['avatarusuariopedido']."' x='50' y='50' style='width: 30px; height: 30px; top: 0px; left: 0px; ' onerror=\"this.onerror=null;this.src='css/img/sinimagen.jpg';\" onclick=\"document.getElementById('caja_$filaamigos[idusuariopedido]').style.display = ' block ';\"/></a>";
	 }
?>
</div>
<?
}
?>
</div> 

//Esto va en... acciones/enviarchat.php

Código PHP:

  <?
    session_start();
    include('../nucleo/config.php'); //Aquí enlazan el archivo de conexión a su DB
    if(isset($_SESSION['usuario'])) { 
if(isset($_POST['mandarchat'])){
    if($_POST['chatear'] == ''){
    header("Location: /");
    }else{
        $clientmsg = $_POST['chatear'];
        $idusuarioamigo = $_POST['idusuariopedido'];
        $usuarioamigo = $_POST['usuariopedido'];
        $de = $_SESSION['nombre'];
        $idde = $_SESSION['idusuario'];
        $imagenusuario = $_SESSION['avatar'];
        $imagenusuarioreceptor = $_POST['avatarusuariopedido'];
if(mysql_query("INSERT INTO chat (mensaje,idpara,para,de,idde,imagenusuarioreceptor,imagenusuario) VALUES ('$clientmsg','$idusuarioamigo','$usuarioamigo','$de','$idde','$imagenusuarioreceptor','$imagenusuario')")){
        header("Location: /");
}
}
}
}else{ 
    header("Location: ../login.php"); 
} 
?>   

En la DB crear una tabla de nombre "chat" (sin "") y con...

idchat -> int(1) -> AUTO_INCREMENT
mensaje -> text -> latin1_swedish_ci
idde -> int(11)
de -> text -> latin1_swedish_ci
idpara -> int(11)
para -> text -> latin1_swedish_ci
imagenusuario -> text -> latin1_swedish_ci
imagenusuariopedido -> text -> latin1_swedish_ci
leido -> int(1)

(El campo de leido aun no le he dado uso, pero será para las notificaciones...)

Por ahora el chat hace...

Despliega chat, (eso con mis estilos, ya es cosa vuestra los estilos)

Muestra mensajes (Necesitas recargar página para ver los nuevos y abrir de nuevo el chat)

Puedes enviar mensajes, con solo pulsar ENTER (Recarga la página por cada mensaje que mandas, y tienes que reabrir el chat)

No avisa si te han mandado mensajes nuevos, es decir... no se te abre ni una ventana cuando tienes un mensaje nuevo ni nada...

Los usuarios conectados van nada mas, cuando un usuario se loguea, se cambia a conectado, cuando se desconecta, se cambia a desconectado, pero hay gente que no cierra sesión, por lo que tendría que hacerlo por IP

Aquí dejo una imagen:

[ocp001a]

No avisa si te han mandado mensajes nuevos, es decir... no se te abre ni una ventana cuando tienes un mensaje nuevo ni nada...

Bueno, ésta sería la parte más problemática de tu chat.

Yo realicé uno que lee periódicamente mediante llamadas ajax, y estoy pensando en manejar comet o similar cuando le pueda dedicar algún tiempo.

En mi caso, el sistema se basa fuertemente en javascript, ya que para minimizar la carga del servidor leo cada 10 segundos y sólo contesta el texto sin formato, siendo javascript quien formatea la cadena, la agrega a la plática, abre la ventana de conversación en caso de ser necesaria, controla el scroll y avisa mediante notificaciones de escritorio de chrome,sonidos y parpadeo de título si hay nuevos mensajes. No sé si mi comentario te aporte algo, es una sincera crítica constructiva, y si te interesas por alguna de las características que te mencioné de mi chat, puedes preguntar en algún post.

[roal40]

Iniciado por ocp001a

Bueno, ésta sería la parte más problemática de tu chat.

Yo realicé uno que lee periódicamente mediante llamadas ajax, y estoy pensando en manejar comet o similar cuando le pueda dedicar algún tiempo.

En mi caso, el sistema se basa fuertemente en javascript, ya que para minimizar la carga del servidor leo cada 10 segundos y sólo contesta el texto sin formato, siendo javascript quien formatea la cadena, la agrega a la plática, abre la ventana de conversación en caso de ser necesaria, controla el scroll y avisa mediante notificaciones de escritorio de chrome,sonidos y parpadeo de título si hay nuevos mensajes. No sé si mi comentario te aporte algo, es una sincera crítica constructiva, y si te interesas por alguna de las características que te mencioné de mi chat, puedes preguntar en algún post.

Todo lo que me has dicho quiero hacerlo... me gustaria poder usar el chat ese que hay con Jquey y tal por ejemplo... pero no puedo adaptarlo a mi sistema de amigos... o no se :S

El chat que te hablo es el: Chat JQuery como el de Gmail, con un par de estilos y modificaciones sería perfecto, hay algun post que alguien haya hecho un chat así como el mio algo más completo? Así ver que hacen distinto a mi manera y poder ponerle más cosas...

Encuanto a AJAX... no se como usarlo mediante peticiones a la SQL... :S

Me encantaría con el chat que te he dicho añadir algo para... conversaciones en grupo, pero eso sería un pequeño apaño por mi parte... creo... xD

[J0RG325]

amigo se ve bueno tu chat ojala pudieses compartir más el codigo como el estilo o el sistema de amigos que tienes...

[carlos234]

podrias pasarnos la parte del logeo y la bd de los amigos??

[rodrigo791]

El problema de este chat es que usa base de datos y creo que un chat de verdad usa sockets, yo he intentado usar las funciones de sockets de php para hacer un chat, pero no he podido.

Si usas una base de datos para un chat a mi entender no es muy eficiente ya que lo mas importante no es guardar los datos en una tabla sino que lo que importa es que lleguen los mensajes y que sea lo mas rapido posible, se tendrían que usar sockets para enviar datos desde host a host directamente, pero no se como se podria aplicar en php.

De todas maneras buen aporte!

[roal40]

Después de mucho, comento: Agregué el chat "Chat JQuery" como bien mencioné arriba, le apliqué los mismos estilos y lo configuré todo para que funcionase de la misma manera que este pero ya incluyendo la funcionalidad que trae de notificar a quien le llega y sin tener que recargar la página cada rato.

Si quereis busco el código y lo paso. Hace tiempo dejé eso a medio hacer, ahora estoy creando un CMS e Intranet propio, dejaré algún aporte en un futuro.

Saludos.

[ElJeshuuOk]

creo que lo tenes que mejorar mucho
yo todavia no me meti en este tema
pero estoy armando una red social de cero
y necesito un chat
pero muchos dicen usar node.js
esta bueno .
yo ando necesitando uno similar al facebook
pero con la barra
antes facebook lo tenia con la barra
despues la quito
o algo parecido como arrowchat.com
si algun futuro podes hacer un tuto como estilo arrowchat.com
arrowchat consume mucho para servidores
ni con 4gb de ram de vps ..
se puede crear uno y mejorarlo ?