jquery typing effect

Question

私は、あなたが何をお勧めしたいと思いますか、私が取ろうとしているアプローチについて示唆しています。私は自分のシンプルなライブサポートチャットシステムを作ろうとしており、エージェントがメッセージを入力しているときにクライアントが見るための機能を作成する必要があります。私は自分自身をタイプする人のためにそれをする方法を考え出しましたが、遠隔の人間のためには行いませんでした。

私はjQueryであまり良くありませんのでお手伝いください！ #chatMessageのIDを持つ入力フィールドに入力するときに表示される現在のコードを示しています。注意してください、これは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での行を更新するよりも良い方法があります...しかし、私は今1を考えることはできません。..