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:
