2016-07-26 9 views
2

Ich habe einen kleinen Shoutbox-Chat mit PHP und Ratchet geschrieben.Trigger Web-Socket OnMessage Event manuell

In JS, ich habe das folgende Ereignis, das eine regelmäßige js Funktion löst die Eingabe zur Zeit beim Drücken passiert:

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

das funktioniert, aber ich möchte eine Nachricht schreiben „Benutzer ist die Eingabe“ Während der Benutzer tippt und bevor die Nachricht tatsächlich gesendet wird, muss ich das onmessage Ereignis manuell aufrufen, ist das möglich?

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

Antwort

0

Sie haben evt.data, die vom Server übergeben wird. Fügen Sie einen anderen Ereignistyp hinzu, der ausgelöst wird, wenn ein Benutzer tippt.

Etwas wie:

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

Alles, was Sie tun müssen, würde eine Nachricht an den Server when the user is typing senden, und vielleicht ein Timeout hinzufügen, und ein Ereignis von typingStopped senden, wenn der Benutzer nichts eingegeben hat in etwa 10 Sekunden oder so.

Hier ist ein Beispiel des Code mit Ihnen zur Verfügung gestellten:

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; 
    } 
}; 
+0

Aber wie würde ich mein eigenes Event hinzufügen? Die Meldung tritt auf, wenn eine Nachricht bereits gesendet wurde. – user6562256

+0

Das 'onmessage'-Ereignis tritt auf, weil Sie es irgendwo in Ihrem Code aufrufen (Sie erwähnten, wenn ein Benutzer die Eingabetaste drückt), der es an den Server weiterleitet. Das bedeutet nicht, dass Sie es nicht an anderen Orten senden können (wie wenn jemand schreibt). Da Sie die Daten beliebig modifizieren können, übergeben Sie das Ereignis einfach als Schlüssel (zB. Socket.sendMessage ({event: 'message', msg: 'testing'}); '), damit Sie es analysieren können auf dem anderen Client. – FrankerZ

+0

Zusammenfassend: Senden Sie mehrere Nachrichten an den Server: '{type: 'message', msg: 'testing'}', wenn der Benutzer die Eingabetaste drückt. Senden Sie '{type: 'typing'}', wenn der Benutzer mit der Eingabe beginnt. Senden Sie '{type: 'typingStopped'}' nach einer Zeitüberschreitung, um den anderen Benutzer darüber zu informieren, dass sie nicht mehr gestoppt sind. Parsen Sie 'type' auf dem anderen Client aus, um herauszufinden, welcher Ereignistyp aufgetreten ist (Nachricht, Typisierung oder typingStopped), und feuern Sie Ihre Handler entsprechend ab. – FrankerZ

Verwandte Themen