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!
2 comentários a “Criar chat em JQuery”
Olá!
Talvez seja eu que esteja fazendo alguma coisa errada, mas, eu preciso criar um página chamada log.html? Se sim, fiz isso, porém não atualiza as mensagens, apenas mostra que o usuário entrou ou saiu.
Obrigado
As mensagens não são postadadas porque?