通知用户消息仍在输入中

我正在使用 Laravel 5.6.7、Socket.IO 和 vue.js。我没有使用 Pusher 和 redis。下面是我的代码，用于向与我一对一聊天的用户发送消息。

var url = "http://localhost:6001/apps/My_appId/events?auth_key=My_Key";

var socketId = Echo.socketId();
var request = {
    "channel": "private-Send-Message-Channel.2",
    "name": "MessengerEvent",
    "data": {
        "msg": message
    },
    "socket_id": socketId
};
axios.post(url, JSON.stringify(request)).then((response) => {
    //Message Sent
});

我试图通知正在与我聊天的用户我仍在打字。我应该使用上面相同的代码在每个 char 类型上发出 xhr 吗？这是通知用户消息输入仍在进行中的唯一方法吗？

Update 1

有没有更好的方法为每次按键发布如上所述的 xhr ？我的意思是如果用户输入 200 个字符。我会发布 xhr 200 次吗？

or

我们是否有一个名为 Whisper 和 ListenForWhisper 的事件，如下所示https://laravel.com/docs/5.6/broadcasting#client-events https://laravel.com/docs/5.6/broadcasting#client-events？我正在使用 vue.js 和 laravel 5.6.7不带推杆 and 没有redis

如果你看一下广播文献 https://laravel.com/docs/5.6/broadcasting#client-events您将看到两个可以在 Vue.js 应用程序中使用的代码片段。

要广播客户端事件，您可以使用 Echowhisper method:

Echo.private('chat')
    .whisper('typing', {
        name: this.user.name
    });

要监听客户端事件，您可以使用listenForWhisper method:

Echo.private('chat')
    .listenForWhisper('typing', (e) => {
        console.log(e.name);
    });

当用户打字时，您可以debounce https://lodash.com/docs#debounce上面的耳语方法。

如果您不想使用像 lodash 这样的其他库，您可以通过简单地包装来实现去抖whisper在超时的情况下。以下方法将每 300 毫秒广播一次耳语：

isTyping() {
    let channel = Echo.private('chat');

    setTimeout(function() {
        channel.whisper('typing', {
            name: this.user.name,
            typing: true
        });
    }, 300);
}

该应用程序需要触发isTyping()当onkeydown事件发生在聊天应用程序的输入字段中。

创建应用程序后，您还需要聆听耳语。以下方法将设置typing收到事件后 600 毫秒内变量为 true。

created() {
    let _this = this;

    Echo.private('chat')
        .listenForWhisper('typing', (e) => {
            this.user = e.name;
            this.typing = e.typing;

            // remove is typing indicator after 0.6s
            setTimeout(function() {
                _this.typing = false
            }, 600);
        });
},