Linux / PHP / Java / Designer

As melhores dicas estão aqui.

Criando um chat em php com txt sem Refresh

| 0 comentários

Nesta matéria vou explicar como criar um chat em php usando um txt para guardar as conversas e sem precisar dar refresh para ver as conversas.

Esta é uma cópia oficial da matéria publicada originalmente em: http://satellasoft.com/?materia=criando-um-chat-em-php-com-txt-sem-refresh

Para ter mais informações acesse a matéria original.

 

Vamos colocar a mão na massa, crie as seguintes pastas:

 

- Imagem

- Mensagens

- Script

 

Faça o download de dois arquivos, o arquivo exit.png coloque dentro de imagem e jquery.js dentro de script, todos os nomes dos arquivos devem ser escritos em letra minuscula, aqui na matéria apenas as iniciais esta em maiúscula, porém você deve cria-las na minuscula.

 

http://www.satellasoft.com/files/chatArquivos.rar

 

index.php | Diretório raiz

<!--
Programado por: Gunnar Correa
Empresa: SatellaSoft
E-mail:contato@gunnarcorrea.com
Sites:
 http://www.satellasoft.com
 http://www.gunnarcorrea.com
Todos os direitos reservados
*/ -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Chat Sem Refresh - SatellaSoft</title>
        <link rel="stylesheet" href="script/style.css" type="text/css" madia="all" /> <!-- Importamos um documento css a página-->
    </head>
    <body>
        <div id="dvLogin">
            <form action="chat.php" name="frmLogin" id="frmLogin" method="post"> <!-- Criamos um formulário e setamos o post para chat.php -->
                <p>Nick Name:<input type="text" name="txtNickName" id="txtNickName" placeholder="Seu nick name aqui" required/></p> 
                <p>Color:   <select name="opColor"  required>
                        <option value="#000000">Preto</option>
                        <option value="#111111">Cinza</option>
                        <option value="#1E90FF">Azul</option>
                        <option value="#00FF00">Verde</option>
                        <option value="#FFFF00">Amarelo</option>
                        <option value="#8B4513">Marrom</option>
                        <option value="#FF4500">laranja</option>
                        <option value="#FF0000">Vermelho</option>
                        <option value="#FF1493">Rosa</option>
                        <option value="#D02090">Violeta</option>
                        <option value="#A020F0">Roxo</option>
                    </select>
                </p>
                <input  type="submit" name="btnSubmit" id="btnSubmit" value="Entrar" />
            </form>
        </div>  
    </body>
</html>


chat.php  | Diretório raiz

<?php
/*
  Programado por: Gunnar Correa
  Empresa: SatellaSoft
  E-mail:contato@gunnarcorrea.com
  Sites:
  http://www.satellasoft.com
  http://www.gunnarcorrea.com
  Todos os direitos reservados
 */
setcookie("nome", $_POST['txtNickName']); //Gravamos no Cookie nome o valor nome vindo da página login
setcookie("cor", $_POST['opColor']); //Gravamos no Cookie cor o valor cor vindo da página login
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Chat</title>
        <link rel="stylesheet" href="script/style.css" type="text/css" madia="all" />
        <script type="text/javascript" src="script/jquery.js"></script> <!-- importamos o jQuery a nossa página -->
        <!-- Você não precisa entender o código abaixo agora, porém vou explicar o que eçe faz e você pode usar sem complicação -->
        <script type="text/javascript"> 
            $(document).ready(function() { //Quando o documento estiver pronto ele executa os códigos abaixo.
                setInterval(function(){ //Aqui foi criado um temporizador, a cada 3 segundos ele executa o código abaixo
                    $("#dvMensagem").load("script/ler.php") //Dentro da div Mensagem incluo o código php que exibe o texto do txt
                },3000); // 3000 é o mesmo que 3 segundos, recomendo que usem 5 no minimo dependendo do servidor.
                //Envia o formulário sem refresh
                $('#frmChat').submit(function() { //Quando o formulário for enviado os códigos abaixos são executados
                    var dados = $(this).serialize();
                    $.ajax({
                        type: "POST", // Tipo de metodo, que no nosso caso é POST
                        url: "script/gravar.php", //Página para onde os dados serão enviados
                        data: dados,
                        success: function(data) //Se tiver sucesso...
                        {
                            $("#resultado").html(data); //Caso a página gravar.php exiba algum valor ele deve ficar dentro da div resultado
                            document.getElementById("frmChat").reset(); //Resetamos o formulário para apagar o texto, já que não tem Refresh.
                        }
                    });
                    return false;
                });
                //Requisita                           
            });
        </script>
    </head>
    <body>
        <div id="dvCentro">
            <div id="dvMensagem">
            </div>
            <form method="post" action="#" name="frmChat" id="frmChat">
                <p style="color:#FFFFFF; padding:3px;">Mensagem:</p>
                <textarea name="txtMensagem" id="txtMensagem" required></textarea>
                <br />
                <input  type="submit" name="btnSubmit" id="btnSubmit" value="Enviar" />
                <a id="linkSair" href="index.php"><img src="imagem/exit.png" alt="Sair" title="Sair" /> Sair</a>
                <p id="resultado"></p>
            </form>
        </div>  
    </body>
</html>


gravar.php | Dentro da pasta script

<?php
/*
Programado por: Gunnar Correa
Empresa: SatellaSoft
E-mail:contato@gunnarcorrea.com
Sites:
 http://www.satellasoft.com
 http://www.gunnarcorrea.com
Todos os direitos reservados
*/
$diaAtual = date("Y.m.d"); // Armazenamos em uma variável o dia atual
$diretorio = "../mensagens/" . $diaAtual . ".txt"; //Criamos uma variável  com o diretório e o nome com extensão do arquivo.
$fp = fopen($diretorio, "a+"); //Criamos o arquivo.
$escreve = fwrite($fp, "<b style='letter-spacing:1px; color:".$_COOKIE['cor'].";'>" .  $_COOKIE['nome'] . ": </b> " .$_POST['txtMensagem'] ."\r\n");
//Variável escreve escrevemos no TXT, Perceba que exibimos o valor do nosso Cookie cor e nome, a cor fica dentro de <b> e estilizado.
//Em siguida o código hexadecimal da cor e depois o nome, por ultimo fechamos a tag </b>. Para finalizar escrevemos também a mensagem vinda do textarea txtMensagem
//\r\n faz pular uma linha quando escrevemos
fclose($fp); //Fechamos o arquivo.
?>

ler.php | Dentro da pasta script

<?php
/*
Programado por: Gunnar Correa
Empresa: SatellaSoft
E-mail:contato@gunnarcorrea.com
Sites:
 http://www.satellasoft.com
 http://www.gunnarcorrea.com
Todos os direitos reservados
*/
$diaAtual = date("Y.m.d");// Armazenamos em uma variável o dia atual
$diretorio = "../mensagens/" . $diaAtual . ".txt"; //Criamos uma variável  com o diretório e o nome com extensão do arquivo.
if(file_exists($diretorio)){ // Se o arquivo existir executa os códigos abaixo.
$fp = fopen($diretorio,'r'); // Abrimos o arquivo para leitura
//lemos o arquivo
$texto = fread($fp, filesize($diretorio));
//transformamos as quebras de linha em etiquetas <br>
$texto = nl2br($texto);
//Exibimos o valor do TXT
echo $texto;
}
?>

style.css | dentro da pasta script
/*
Programado por: Gunnar Correa
Empresa: SatellaSoft
E-mail:contato@gunnarcorrea.com
Sites:
 http://www.satellasoft.com
 http://www.gunnarcorrea.com
Todos os direitos reservados
*/
*{margin:0 auto; padding: 0;} /*Centralizamos todos elementos da página*/
body{/*Corpo do site*/
    background-color: aliceblue;/*Definimos a cor de fundo da página como azul claro*/
}
p{/*Todos paragráfos*//*Fonte verdana*/
    color:#111111;/*Cor cinza escuro*//*Negrito*/
    letter-spacing:1px;/*Espacamento dos caracteres de 1px*/
}
#dvCentro{/*Div centro*/
    width:550px;/*Largura de 550px*/
    height:auto;/*Altura automática*/
    background-color:brown;/*Cor de funco marrom*/
    border: 2px solid #ccc;/*Borda de 2px na cor cinza claro*/
}
#dvMensagem{/*Div que exibe as mensagens*/
    width:100%;/*largura de 100% de acordo com a div pai*/
    height:400px;/*altura de 400px*/
    background-color: #FFFFFF;/*Cor de funco branca*/
    padding:3px; /*Espaçamento de 3px*/
    border-bottom: 2px solid #ccc;/*Borda de 2px cinza claro*/
    overflow-y: auto;/*Barra de rolagem vertical automática*//*Fonte Verdana*/
}
#txtNickName{ /*Input que insere o nome*/
    padding:3px;/*Espaçamento de 3px*/
    width:400px;/*Largura de 400px*/
    margin:5px;/*Margem de 5px*/
    border:0;/*Removemos a borda*/
    outline-color: blue;/*Troquei a cor da borda para azul*/
}
#txtMensagem{/*Textarea que escreve as mensagens*/
    width:540px;/*Largura de 540px*/
    height:100px;/*Altura de 100px*/
    border:0;/*Sem borda*/
    padding:5px;/*Espaçamento de 5px*/
    color:#111111;/*Cor cinza escuro*//*Fonte Courier*/
    outline-color: red;/*Cor da borda para vermelho*/
}
#btnSubmit{/*Botão que envia o formulário*/
    background-color: crimson;/*Cor de fundo Crimson*//*Fonte Verdana*/
    padding:5px;/*Espaçamento de 5px*/
    border:1px solid #FFFFFF;/* Borda de 1px na cor branca*/
    margin:5px;/*Margem de 5px*/
}
#btnSubmit:active{/*Quando clicamos no botão submit*/
    background-color: lightcoral;/*Altermos a cor de fundo*/
}
#btnSubmit:hover{/*Quando pasamos o mouse sobre o botão Submit*/
    background-color: firebrick;/*Alteramos a cor de fundo*/
    box-shadow:0 0 5px #FFFFFF;/*Criamos uma sobra externa na cor branca*/
}
#dvLogin{/*Div login*/
    width:500px;/*Largura de 500px*/
    background-color: beige;/*Alteramos  cor de fundo*/
    border:2px solid #CCCCCC;/*Borda de 2px na cor cinza claro*/
    margin-top: 100px;/*Criamos uma margem do topo de 100px*/
    padding:5px;/*Espaçamento de 5px*/
}
#linkSair{/*Link sair*/
    color:#FFFFFF;/*Cor do texto branco*//*Fonte em negrito*/
    letter-spacing: 1px;/*Espaçamento dos caracteres de 1px*/
    text-decoration: none;/*Removemos o Underline do link*/
}

Um exemplo em funcionamento: http://www.satellasoft.com/Chat/

 Não deixem de conferir a matéria completa no SatellaSoft.
 Espero que todos tenham gostado, até a próxima.
 :D

 

 

 

Deixe uma resposta

Campos requeridos estão marcados *.