Эффект jquery

Question

Мне просто было интересно, что вы, ребята, могли бы порекомендовать / предложить для подхода, который я пытаюсь предпринять.Я пытаюсь создать свою собственную простую систему чата Live Support, и мне нужно, чтобы клиент мог видеть, когда агент печатает сообщение.Я понял, как это сделать для человека, который печатает сам, но не для удаленного человека.

Пожалуйста, помогите, поскольку я не очень хорош в jQuery!Вот мой текущий код, который просто показывает, когда вы печатаете в поле ввода с идентификатором #chatMessage.Обратите внимание, что это чат-система PHP, MySQL и jQuery.

$('#chatMessage').keyup(function(){
    if ($("#chatMessage").val() == ''){
        $('#typing').html('');
    }else{
        $('#typing').html('The agent is typing a message..');
    }
});

Спасибо

Answer 1

Вам нужно только добавить ajax-вызов на сервер и затем таймер на клиенте, который проверяет статус агента ...

// Агентская сторона ..

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);
});

// Серверная сторона ...

// 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);

// Клиентская сторона 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);
});

Может быть, есть более эффективные способы, чем обновление строки в mysql ... но я не могу думать о ней сейчас ..