手動でWebソケットのonmessageイベントをトリガー

Question

PHPとラチェットで書かれた小さなshoutboxチャットがあります。 JSで

は、私は現時点で押下する上で起こる通常のJavaScript機能を起動以下のイベント、持っている：

socket.onmessage = function(evt) { 
    var data = JSON.parse(evt.data); 
    addMessage(data.msg); 
}; 

動作しますが、私はメッセージを書きたい「ユーザーが入力しています」ユーザーが入力中でメッセージが実際に送信される前に、私はonmessageイベントを手動で呼び出す必要があると推測しています。

関連JS：

var chat = $('#chatwindow'); 
var msg = $('#messagebox'); 

function addMessage(msg) { 
    chat.append("<p>" + msg + "</p>"); 
} 

msg.keypress(function(event) { 
    if (event.which != 13) { 
     return; 
    } 

    event.preventDefault(); 

    if (msg.val() == "" || !open) { 
     return; 
    } 

    socket.send(JSON.stringify({ 
     msg: msg.val() 
    })); 

    addMessage(msg.val()); 
    msg.val(""); 

}); 

socket.onmessage = function(evt) { 
    var data = JSON.parse(evt.data); 
    addMessage(data.msg); 
}; 

Answer 1

あなたは、サーバーから渡されるevt.dataを持っています。別のタイプのイベントを追加します。これは、ユーザーが入力したときにトリガーされます。

何かのように：

socket.onmessage = function(evt) { 
    var data = JSON.parse(evt.data); 
    if (data.type == 'message') { 
     addMessage(data.msg); 
    } else if (data.type == 'typing') { 
     showUserIsTyping(); 
    } else if (data.type == 'typingStopped') { 
     hideUserIsTyping(); 
    } 
}; 

あなたがする必要があるだろうすべては、サーバーwhen the user is typingにメッセージを送信し、多分タイムアウトを追加し、ユーザーが何を入力していない場合typingStoppedのイベントを送信しています10秒ほどのように。ここで

は、あなたが提供されたコードの使用例である：

var msg = $('#messagebox'); 

function addMessage(msg) { 
    chat.append("<p>" + msg + "</p>"); 
} 

msg.keypress(function(event) { 
    event.preventDefault(); 

    if (msg.val() == "" || !open) { 
     return; 
    } 

    //User pressed enter 
    if (event.which == 13) { 
     socket.send(JSON.stringify({ 
      type: 'message' 
      msg: msg.val() 
     })); 
     addMessage(msg.val()); 
     msg.val(""); 
    } else { 
     //Keypress, but not enter 
     socket.send(JSON.stringify({ 
      type: 'typing' 
     })); 
    } 
}); 

socket.onmessage = function(evt) { 
    var data = JSON.parse(evt.data); 

    switch (data.type) 
    { 
     case 'message': 
      addMessage(data.msg); 
      break; 
     case 'typing': 
      notifyUserTyping(); //Create this function, and have it show/hide a "Typing..." textbox or similar. 
      break; 
    } 
};