Criar chat em JQuery

Hoje vamos proceder a criação de um simples chat utilizando o JQuery, sem ser necessário utilizar uma base de dados. O chat que realizaremos, em seguida, trata-se de um exemplo simples das enumeras possibilidades existentes, utilizando o JQuery como base do projecto.

A utilização de um chat, muitas vezes na pagina inicial dos websites, facilita a comunicação em tempo real, do criador do website com os seus visitantes, sendo assim, uma óptima ideia para aumentar o contacto com os seus visitantes.

Hoje em dia existe “N” modelos e plugins espalhados pela internet, que prometem satisfazer o que procuramos, mas, como nem sempre é assim, não há nada como criarmos o nosso próprio modelo e personalizado ao nosso gosto, de acordo com as nossas necessidades.

Código PHP, CSS e JQuery

Começamos por criar três div’s: wrapper, menu, chatbox. Fazendo assim um pequeno formulário, que mais tarde iremos dar vida com o JQuery e com o CSS.

<div id="wrapper">  
        <div id="menu">  
            <p class="welcome">Bem-vindo <b></b> | <a class="logout" id="sair" href="#">Sair</a></p>  
            <div style="clear:both"></div>  
        </div>      
        <div id="chatbox">
            
        </div>  

        <form name="message" action="">  
            <input name="usermsg" type="text" id="usermsg" size="63" />  
            <input name="submitmsg" type="submit"  id="submitmsg" value="Enviar!" />  
        </form>  
    </div>

CSS

Após a criação do corpo do chat utilizamos o CSS para dar forma ao nosso chat, neste caso usamos a cor azul e um design simples.

/* CSS Document */  
body {  
    font:12px arial;  
    color: #222;  
    text-align:center;  
    padding:35px; }  
   
form, p, span {  
    margin:0;  
    padding:0; }  
   
input { font:12px arial; }  
   
#wrapper, #loginform {  
    margin:0 auto;  
    padding-bottom:25px;  
    background:#EBF4FB;  
    width:50%;
    min-width: 155px;
    border:1px solid #ACD8F0; }  
   
#loginform { padding-top:25px; }  
   
    #loginform p { margin: 5px; }  
   
#chatbox {  
    text-align:left;  
    margin:0 auto;  
    margin-bottom:25px;  
    padding:10px;  
    background:#fff;  
    height:270px;  
    width:430px;  
    border:1px solid #ACD8F0;  
    overflow:auto; }  
   
#usermsg {  
    width:395px;  
    border:1px solid #ACD8F0; }  
   
#submit { width: 60px; }  
   
.error { color: #ff0000; }  
   
#menu { padding:12.5px 25px 12.5px 25px; }  
   
.welcome { float:left; }  
   
.logout { text-decoration: none; }  
.logout:hover { font-weight: bold; } 

.msgln { margin:0 0 2px 0; }

PHP

Criamos algumas funções em PHP, como: “entrar” na qual apresenta uma mensagem no chat, do utilizador que entrou; “sair” que destrói a sessão e apresenta uma mensagem no chat, do utilizador que saiu; “LoginFrom” nesta função criamos um pequeno from que é posteriormente ativado, caso o utilizador não estiver com o login feito.

<?php 
    function loginForm(){  
        echo' 
        <div id="loginform"> 
            <form action="index.php" method="post">  
                <label for="nome">Name: 
                <input type="text" name="nome" id="nome" /> 
                <input type="submit" name="entrar" id="entrar" value="Entrar" /> 
            </form> 
        </div> 
        ';  
    }

    if(isset($_ POST['entrar'])){  
        if($_ POST['nome'] != ""){  
            $_ SESSION['nome'] = stripslashes(htmlspecialchars($_ POST['nome']));
            
            $fp = f open("log.html", 'a');  // "a" abrir para ler e escrever
            f write($fp, "<div class='msgln'><i>". $_ SESSION['nome'] ." entrou do chat.</i><br></div>");  
            f close($fp);
        }  
        else{  
            echo '<span class="error">Escolha um nome, antes de entrar!</span>';  
        }  
    }

    if(isset($_ GET['sair'])){ 
        $fp = f open("log.html", 'a');  // "a" abrir para ler e escrever
        f write($fp, "<div class='msgln'><i>". $_ SESSION['nome'] ." saiu do chat.</i><br></div>");  
        f close($fp);  

        session_destroy();  
        header("Location: index.php");
    }
?>

JQuery

Com ajuda do JQuery criaremos uns efeitos, como o de scroll automático, atualização da div do chat sem ser necessário a atualizar a pagina, o que tornaria menos atrativo.

// jQuery Document  
$(document).ready(function(){
    $("#sair").click(function(){  
        var sair = confirm("Tem a certeza que quer sair?");  
        if(sair==true){window.location = 'index.php?sair=true';}        
    });

    $("#submitmsg").click(function(){     
        var clientmsg = $("#usermsg").val();  
        $.post("post.php", {text: clientmsg});                
        $("#usermsg").attr("value", "");  
        return false;  
    });

    function loadLog(){
        var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
        $.ajax({  
            url: "log.html",  
            cache: false,  
            success: function(html){          
                $("#chatbox").html(html); //Insert chat log into the #chatbox div

                //Auto-scroll             
                var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request  
                if(newscrollHeight > oldscrollHeight){  
                    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div  
                }
            }  
        });  
    }
    setInterval (loadLog, 2500);    //Reload file every 2500 ms or x ms if you wish to change the second parameter
});

Download do arquivo usado neste exemplo, um Chat simples em JQuery

Depois destes simples passos, temos um chat simples, que podemos usar como base para uma ideia futura. Podemos agora optimizar por exemplo.

Até a próxima, abraço!

---

---