chat.php - chatildis - Project Hosting on Google Code

‹r6

Source path: svn/ trunk/ chat.php

<?php
/**
 * Testando chat com menos refresh
 *
 * @author garotosopa
 * @version 0.7
 */

// Conecta
mysql_connect('localhost', 'chat', 'chat');
mysql_select_db('chat');

// Cria a tabela de chat, caso ainda não exista
mysql_query("
    CREATE TABLE IF NOT EXISTS chat (
        id INT UNSIGNED NOT NULL AUTO_INCREMENT,
        mensagem VARCHAR(400) NOT NULL,
        timestamp TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
        PRIMARY KEY (id)
    ) ENGINE=MEMORY
");

// Salva a mensagem se ela estiver sendo postada
if( isset($_POST['mensagem']) ){
    // Limpa mensagens antigas
    mysql_query("DELETE FROM chat WHERE timestamp < NOW() - INTERVAL 1 MINUTE");

    // escapa a string
    $mensagem = mysql_real_escape_string($_POST['mensagem']);

    // insere na tabela chat
    mysql_query("
        INSERT INTO chat(mensagem) VALUES('$mensagem')
    ");

    // pára o processamento
    exit;
}

// Cliente quer receber mensagens mais novas que o id fornecido
elseif( isset($_GET['ultimo_id']) ){
    // desabilita o time limit porque queremos um loop infinito logo abaixo
    set_time_limit(0);

    // prepara o número para a query
    $ultimo_id = (int) $_GET['ultimo_id'];

    // mensagens que serão retornadas ao cliente
    $mensagens = array();

    // vai tentando achar mensagens até conseguir
    while(true){
        // pega as últimas 10 mensagens
        $res = mysql_query("
            SELECT id, mensagem
            FROM chat
            WHERE id > $ultimo_id
            ORDER BY id DESC
            LIMIT 10
        ");

        // se achar alguma mensagem
        if( mysql_num_rows($res) ){
            // preenchemos o array com as mensagens
            while( $row = mysql_fetch_assoc($res) ){
                $mensagens[] = $row;
            }

            // coloca as mensagens em ordem, já que fizemos order by id DESC
            $mensagens = array_reverse($mensagens);

            // pára o loop infinito
            break;
        }
        // se não tiver mensagem nova ainda
        else{
            // pausa o loop infinito um pouquitinho
            usleep(250);
        }
    }

    // chegando até aqui, podemos retornar o array $mensagens como json
    echo json_encode($mensagens);

    // e terminar esta requisição pro cliente poder ler o json
    exit;
}

// se chegamos até aqui, o cliente simplesmente quer usar o chat boladão

// envia header com encoding utf-8
header("Content-type: text/html; charset=utf-8");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>chatildis!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="author" content="garotosopa"/>
<script type="text/javascript">
// <![CDATA[

// variável que vai guardar o id da última mensagem que recebemos
var ultimo_id = 0;

// variável que será o elemento da div das mensagens
var chat;

// variável que será o elemento da caixa de texto de mensagem
var mensagem;

// variável que será o objeto XHR das mensagens recebidas
var xhr_chat;

// montamos o xhr que recebe mensagens em browsers bacanas
if( window.XMLHttpRequest ){
    xhr_chat = new XMLHttpRequest();
}
// ou montamos o xhr para o internet explorer
else if ( window.ActiveXObject ){
    xhr_chat = new ActiveXObject("Microsoft.XMLHTTP");
}

// função callback para qualquer novidade na requisição de mensagens
function processar(){
    // quando a requisição estiver completa
    if ( xhr_chat.readyState == 4 ) {
        // se houve sucesso na requisição
        if ( xhr_chat.status == 200 ) {
            // transforma o texto retornado em json
            var json = eval('(' + xhr_chat.responseText + ')');

            // le cada item do array retornado por json
            for (i in json) {
                // acessa a mensagem da iteração atual
                var mensagem = json[i];

                // caso não tenha mensagens validas
                if( ! mensagem.mensagem ){
                    // não queremos ter erro de javascript
                    return;
                }

                // escapa tags html da mensagem recebida
                var texto = mensagem.mensagem.replace(/</g, '&lt;');
                    texto = texto.replace(/>/g, '&gt;');

                // criamos um parágrafo pra cada mensagem retornada
                var p = document.createElement('p');
                    p.innerHTML = texto;
                
                // adicionamos o parágrafo na div de mensagens
                chat.appendChild(p);
            };

            // id da última mensagem para depois pegar apenas as mais novas
            if ( json[json.length-1] ){
                // pega a propriedade id da última mensagem
                ultimo_id = json[json.length-1].id;
            }

            // coloca a barra de rolagem no final
            chat.scrollTop = chat.scrollHeight;
        }

        // sempre que completar a requisição, criaremos uma nova
        setTimeout(atualizar, 250);
    }
};

// função que pede as mensagens mais novas que o id que temos
function atualizar(){
    // enviaremos para o próprio arquivo e acrescentamos o ultimo id
    xhr_chat.open('GET', location.pathname + '?ultimo_id=' + ultimo_id, true);

    // associamos nossa função de callback 
    xhr_chat.onreadystatechange = processar;

    // e então enviamos a requisição sem nenhum parâmetro extra
    xhr_chat.send(null);
}

// espera carregar a página
window.onload = function(){
    // guarda o elemento da div das mensagens
    chat = document.getElementById('chat');

    // guarda o elemento da caixa de texto de mensagem
    mensagem = document.getElementById('mensagem');

    // adiciona evento ao formulário para fazer o envio por ajax
    document.getElementById('envio').onsubmit = function(){
        // pega o texto digitado
        var texto = mensagem.value;

        // tira os espaços do início e fim
        texto = texto.replace(/^\s*/, '');
        texto = texto.replace(/\s*$/, '');

        // se o texto estiver vazio, nem envia
        if( texto == '' ){
            return false;
        }


        // montamos o xhr para enviar mensagem por browsers joinhas
        if( window.XMLHttpRequest ){
            var xhr_envio = new XMLHttpRequest();

        // ou montamos o xhr para enviar mensagem pelo internet explorer
        }else if ( window.ActiveXObject ){
            var xhr_envio = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // enviaremos a mensagem por post para nós mesmos, assincronamente
        xhr_envio.open("POST", location.pathname, true);

        // definimos a requisição como envio de formulário
        xhr_envio.setRequestHeader
            ('Content-Type', 'application/x-www-form-urlencoded');

        // e então escapamos e enviamos o texto
        xhr_envio.send( 'mensagem=' + encodeURIComponent(texto) );

        // limpa e foca a caixa de texto
        mensagem.value = '';
        mensagem.focus();

        // não submete o formulário tradicionalmente
        return false;
    };

    // foca a caixa de texto ao carregar a página
    mensagem.focus();

    // começa a consultar as atualizações
    atualizar();
};
//]]>
</script>
<style type="text/css">
body {
    font-family: sans-serif;
    font-size: 12px;
    margin: 0;
}

h1 {
    border-bottom: 1px solid #a4a4a4;
    background: #eaeaea;
    color: #333;
    padding: 1em;
    margin: 0;
}

#chat {
    border: 1px solid #a4a4a4;
    padding: 1em;
    margin: 1em;
    height: 25em;
    overflow: auto;
}

#mensagem {
    min-width: 50em;
}

label, input {
    padding: 0.5em;
}
</style>
</head>
<body>
<h1>chatildis!</h1>
<div id="chat">
    <p>It's only the chatildis ultimate chat ultra, baby!</p>
    <p>
        O único capaz de derrubar seu servidor com conexões abertas e
        tabelas na memória... *sigh*
    </p>
</div>
<form id="envio" method="post" action="">
<p>
    <label for="mensagem">Mensagem:</label>
    <input type="text" name="mensagem" id="mensagem" maxlength="380" />
    
    <input type="submit" name="enviar" value="Enviar" />
</p>
</form>
</body>
</html>

Show details Hide details

Change log

r7 by diogo86 on Jun 28, 2009 Diff

Using a global var for the main XHR object
to make it to work on all browsers
(another approach could be implemented but
this was the easiest one).

Go to:

Project members, sign in to write a code review

Older revisions

r6 by diogo86 on Jun 28, 2009 Diff

Replaced name with id attribute on the
main form. Also the charset is now
being sent as an http header as well.

r5 by diogo86 on Jun 28, 2009 Diff

The main XHR object is now
instantiated only once as well as the
callback function to update the log
window.

r4 by diogo86 on Jun 28, 2009 Diff

Removed jQuery dependency and now
sorting the messages on PHP instead of
in a subquery. Some other minor
improvements.

All revisions of this file

File info

Size: 8295 bytes, 291 lines

View raw file