手动触发 web socket onmessage 事件

Question

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

在 JS 中，我有以下事件，它会触发一个常规的 js 函数，该函数在此刻按下 enter 时发生：

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

可行，但我想在用户输入时和消息实际发送之前写一条消息 "user is typing"，所以我猜我需要手动调用 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;
    }
};

手动触发 web socket onmessage 事件

Trigger web socket onmessage event manually

javascript

php

jquery

websocket

ratchet