Ajax chat

You’ll need some php/html/css to make the chat work.

The php is an example using the Kohana framework, the only important thing is json_encode() function you must use for every output.

You cannot specify a username with the javascript, the username is retrieved from a database or a session. The only var sent to the PHP is the message itself.

All code is in french, will release it in english if it has some success

Html markup :

Download: http://plugins.jquery.com/project/jQchart

Demo: http://vincent-voyer.fr/lab/ajax-chat-jQuery-Kohana

Source: http://plugins.jquery.com/project/chat

CSS code :

#chat {
position:relative;
}
#chat .chat {
position:relative;
overflow:hidden;
border:1px solid #bbb;
height:270px;
padding:5px;
background:#eee;
margin-bottom:5px;
}

#chat .chat div {
position:absolute;
width:100%;
bottom:0;
}

#chat .chat p {
margin:0
}

/* zoneClavier */
.zoneClavier {
margin:0 5px 0 0;
padding:0;
/* visibility:visible;*/
}

.zoneClavier input {
font-size:20px;
margin:0;
padding:0;
border:1px solid #999;
}

.zoneClavier input:focus {
background:yellow;
border-color:cyan;
}

.ajaxStatus {
position:absolute;
top:-25px;
right:10px;
}

.hide {
display:none;
}

Php code

Using Kohana php mvc framework, $this->pseudo is the nickname

< ?php
function ecrire() {
    $msg=trim(strip_tags($_POST['msg']));
    $this->db->set('pseudo',$this->pseudo);
    $this->db->set('msg',$msg);
    $this->db->insert('chat_message');
    $data=array('msg' => $msg, 'pseudo' => $this->pseudo);
    if(!empty($msg))
        echo json_encode($data);
    else
        echo json_encode('');
}

function lire() {
    if(empty($_SESSION['last_chat_message_id'])) $_SESSION['last_chat_message_id']=0;
    $messages=$this->db->query('select pseudo, msg, id_msg from
        (select pseudo, msg, id_msg from chat_message
        where pseudo!=\''.$this->pseudo.'\'
        and id_msg>'.$_SESSION['last_chat_message_id'].'
        order by id_msg desc limit 50) as messages order by messages.id_msg');
    if($messages->count() > 0) {
        $tab_messages=$messages->result_array();
        $_SESSION['last_chat_message_id']=$tab_messages[count($tab_messages)-1]->id_msg;
        echo json_encode($tab_messages);
    } else echo json_encode('');
}
?>

Related Listings:

1. WTAG – FREE AJAX AND PHP SHOUTBOX MINI CHAT wTag is a free open source Ajax shoutbox (chatbox, tagboard,...
2. Shoutbox using PHP and AJAX with jQuery Dynamic ajax based shoutbox with jQuery from scratch. It will...
3. Jquery Plugin – Feedback Feedback is a jQuery plugin that lets you send Feedback...

Do you like this post?

Email: