jquery typing effect - php

Question

I just was wondering what you guys could recommend / suggest for an approach I am trying to take. I am trying to make my own simple Live Support chat system and need to make a feature for the Client to view when the Agent is typing a message. I've figured out how to do it for the person typing themselves but not for a remote person.
Please help as I am not very great at jQuery! Heres my current code that simply shows when you are typing in a input field with id of #chatMessage. Please note, this is a PHP, MySQL & jQuery chat system.
$('#chatMessage').keyup(function(){
if ($("#chatMessage").val() == ''){
$('#typing').html('');
}else{
$('#typing').html('The agent is typing a message..');
}
});
Thanks

Answer 1

You only need to add an ajax call to the server and then a timer on the client that checks for agent status...
// Agent side..
function checkStatus(){
jQuery.get('/server-url?agent_id=32&status', function(data){
if (data.status == 'typing')
$('#typing').html('The user/client is typing a message..');
else
$('#typing').html('');
checkStatus();
});
}
// Start the function begining.
setTimeout(checkStatus, 300);
var agent_timer;
$('#chatMessage').keyup(function(){
if (agent_timer)
clearTimeout(agent_timer);
if ($("#chatMessage").val() == ''){
status = 'empty';
} else {
status = 'writing';
}
agent_timer = setTimeout(function(){
// Send status to server php script
$.post('/server-url?agent_id=23', {status: status}, function(data){
// handle response
});
}, 400);
});
// Server side...
// check for agent, and other things...
if (isset($_GET['agent_id'])){
// Agent server side
if (isset($_POST['status']){
// Save status to database
$this->save(array('agent' => $agent, 'chat_id' => $chat_id, 'status' => $_POST['status']));
}
if (isset($_GET['status'])){
$data = $this->read(array('agent_id' => $chat_id));
}
} else {
// This is the client server side
if (isset($_GET['status'])) {
$data = $this->read(array('chat_id' => $chat_id));
return $data['status'];
}
}
// handle other things and return data if necessary
// echo json_encode($data);
// Client side JS
function checkStatus(){
jQuery.get('/server-url?chat_id=32&status', function(data){
if (data.status == 'typing')
$('#typing').html('The agent is typing a message..');
else
$('#typing').html('');
checkStatus();
});
}
// Start the function at begining.
setTimeout(checkStatus, 300);
// We can do the same, so the agent can know if user is typing too (you must also copy the above function)
var client_timer;
$('#chatMessage').keyup(function(){
if (client_timer) clearTimeout(client_timer);
if ($("#chatMessage").val() == ''){
status = 'empty';
} else {
status = 'writing';
}
client_timer = setTimeout(function(){
// Send status to server php script
$.post('/server-url?chat_id=23', {status: status}, function(data){
// handle response
});
}, 400);
});
Maybe there are better ways than updating a row in mysql... but I can't think one now..