javascript - 手动触发Web套接字onmessage事件

Question

我有一个用 PHP 和 Ratchet 编写的小型聊天室。

在 JS 中，我有以下事件，它会触发一个常规的 js 函数，该函数在按下 Enter 键时发生:

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 ，并且可以添加超时，如果用户在 10 秒左右没有输入任何内容，则发送 typingStopped 事件。

这是使用您提供的代码的示例:

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