通知用户仍在键入消息 [英] Inform user that message is still being typed

问题描述

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

I am using Laravel 5.6.7, Socket.IO and vue.js. I am not using Pusher and redis. Below is my code to send message to user chatting with me one to one.

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

我正试图通知正在与我聊天的用户我仍在输入.我应该使用上面的相同代码在每种字符类型上发出xhr吗?是通知用户消息输入仍在进行的唯一方法吗?

I am trying to inform user who is chatting with me that I am still typing. Should I use the same above code which emits xhr on each char type? Is it the only way to inform user that the message typing is still in progress?

更新1

有没有更好的方法可以按上述方式发布xhr?我的意思是，如果用户输入200个字符.我会发布xhr 200次吗?

Is there any better way to post xhr as mentioned above for each key press? I meant if user types 200 chars. will I post xhr 200 times?

或

我们是否有一个名为whisper和listenForWhisper的事件，如此处所示 https://laravel. com/docs/5.6/broadcasting#client-events ?我正在使用vue.js和laravel 5.6.7 没有推送器和没有redis

Do we have an event called whisper and listenForWhisper as shown here https://laravel.com/docs/5.6/broadcasting#client-events ? I am using vue.js and laravel 5.6.7 without pusher and without redis

推荐答案

如果您查看

If you look at the broadcasting documentation you will see two code code snippets which you can use in your Vue.js application.

要广播客户端事件，可以使用Echo的whisper方法:

To broadcast client events, you may use Echo's whisper method:

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

要监听客户端事件，可以使用listenForWhisper方法:

To listen for client events, you may use the listenForWhisper method:

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

在用户键入内容时，您可以消除抖动上面的耳语方法.

While the user is typing, you can debounce the whisper method above.

如果您不想使用lodash之类的其他库，则可以通过将whisper包装在超时中来实现防抖动功能.以下方法将每300毫秒广播一次耳语:

If you don't wish to use another library like lodash, you can implement the debounce by simply wrapping whisper in a timeout. The following method would broadcast the whisper every 300ms:

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

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

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

The app needs to trigger isTyping() when an onkeydown event occurs in the chat application's input field.

创建应用后，您还需要听听耳语.在收到事件后的600ms中，以下方法会将typing变量设置为true.

You also need to listen for the whisper once the app is created. The following method will set the typing variable to true for 600ms after the event has been received.

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

这篇关于通知用户仍在键入消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！