jquery打字效果

Question

我只是想知道你们可以为我尝试采用的方法推荐/建议什么。我正在尝试制作自己的简单实时支持聊天系统，并且需要为客户端制作一个功能，以便在代理键入消息时查看。我已经想出了如何为自己打字的人而不是为远程的人这样做。

请帮忙，因为我不擅长 jQuery！这是我当前的代码，当您在 ID 为#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 中更新一行更好的方法...但我现在想不出一个..