Please be advised that the message is currently in the process of being typed

Question

Please be advised that the message is currently in the process of being typed

In my current setup, I am utilizing Laravel 5.6.7, Socket.IO, and vue.js while excluding Pusher and Redis. The following is the code snippet I am using to send messages directly to a user engaged in one-on-one chatting with me.

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

I am exploring ways to notify the user I'm chatting with that I am currently typing a message. Is it necessary to use the same code above, which triggers an XMLHttpRequest for each keystroke? Is this the only method available to convey to the user that typing is ongoing?

Update 1

Is there a more efficient approach instead of posting an XMLHttpRequest for every key press as mentioned earlier? In case the user types 200 characters, does that mean I'll have to trigger an XMLHttpRequest 200 times?

Alternatively,

Does Laravel offer events like whisper and listenForWhisper, similar to what's detailed here https://laravel.com/docs/5.6/broadcasting#client-events? My tech stack involves vue.js and laravel 5.6.7, and I'm not utilizing Pusher nor Redis.

javascript laravel vue.js laravel-5.6

Answer 1

Answer №1

When you check out the broadcasting documentation, you will find two code snippets that are useful for your Vue.js application.

To send client events, you can utilize Echo's whisper method:

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

To receive client events, you can use the listenForWhisper method:

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

If you want to debounce the whisper method while the user is typing, you can refer to lodash documentation.

If you prefer not to rely on an additional library like lodash, you can implement debounce by wrapping whisper in a timeout. The following snippet will broadcast the whisper every 300ms:

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

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

The isTyping() function should be triggered when an onkeydown event occurs in the chat application's input field.

You also need to listen for the whisper once the app is created. This method will set the typing variable to true for 600ms after receiving the event.

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

Answer 2

When you check out the broadcasting documentation, you will find two code snippets that are useful for your Vue.js application.

To send client events, you can utilize Echo's whisper method:

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

To receive client events, you can use the listenForWhisper method:

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

If you want to debounce the whisper method while the user is typing, you can refer to lodash documentation.

If you prefer not to rely on an additional library like lodash, you can implement debounce by wrapping whisper in a timeout. The following snippet will broadcast the whisper every 300ms:

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

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

The isTyping() function should be triggered when an onkeydown event occurs in the chat application's input field.

You also need to listen for the whisper once the app is created. This method will set the typing variable to true for 600ms after receiving the event.

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

Answer 3

Answer №2

Although I am not an expert in Laravel, I have encountered this issue before.

Let's start by defining what "typing" means. Simply put, a user is considered to be typing if the input field for sending a message is not empty.

This definition is not foolproof as the user may walk away from the keyboard while in the middle of typing a message and never return to finish or send it. Nevertheless, it serves its purpose adequately.

Now, we no longer need to monitor each keystroke to determine if the user is actively typing. Essentially, determining if a user is typing now boils down to chat_input_box.length > 0 in code representation.

The focus should be on syncing this boolean value across users and servers instead of tracking individual key presses. To ensure real-time updates, we must capture input events on chat_input_box. If the boolean value changes during an event, socket.io can then transmit a signal indicating whether the user has initiated or ceased typing.

Upon receiving this signal, appropriate views can be toggled to provide visual cues to the user regarding the app's current state.

To address the scenario where a user begins typing but abruptly leaves, a timeout mechanism can be implemented. Once the timer expires, the "is typing" boolean value resets to false. However, each subsequent typing activity restarts the timer automatically.

Answer 4

Although I am not an expert in Laravel, I have encountered this issue before.

Let's start by defining what "typing" means. Simply put, a user is considered to be typing if the input field for sending a message is not empty.

This definition is not foolproof as the user may walk away from the keyboard while in the middle of typing a message and never return to finish or send it. Nevertheless, it serves its purpose adequately.

Now, we no longer need to monitor each keystroke to determine if the user is actively typing. Essentially, determining if a user is typing now boils down to chat_input_box.length > 0 in code representation.

The focus should be on syncing this boolean value across users and servers instead of tracking individual key presses. To ensure real-time updates, we must capture input events on chat_input_box. If the boolean value changes during an event, socket.io can then transmit a signal indicating whether the user has initiated or ceased typing.

Upon receiving this signal, appropriate views can be toggled to provide visual cues to the user regarding the app's current state.

To address the scenario where a user begins typing but abruptly leaves, a timeout mechanism can be implemented. Once the timer expires, the "is typing" boolean value resets to false. However, each subsequent typing activity restarts the timer automatically.

Answer 5

Answer №3

Instead of sending an xhr request to your app, you have the option to directly broadcast events to chat users without involving your app.

The Laravel documentation explains:

There are times when you may want to send out an event to other connected clients without interacting with your Laravel application. This can be handy for things like notifying users of "typing" activity, where you need to inform users that someone is typing a message on a specific screen. To broadcast client events, utilize Echo's whisper method:

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

To listen for client events, make use of the listenForWhisper method:

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

Answer 6

Instead of sending an xhr request to your app, you have the option to directly broadcast events to chat users without involving your app.

The Laravel documentation explains:

There are times when you may want to send out an event to other connected clients without interacting with your Laravel application. This can be handy for things like notifying users of "typing" activity, where you need to inform users that someone is typing a message on a specific screen. To broadcast client events, utilize Echo's whisper method:

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

To listen for client events, make use of the listenForWhisper method:

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

Answer 7

Answer №4

Correct, it is more efficient to use debouncing instead of emitting on every character change. By using the debounce method from the lodash library, you can wait for a short period before triggering the function.

I suggest checking out the documentation at: https://lodash.com/docs/4.17.5#debounce

Laravel's Echo is also a good option, especially if you don't need server involvement for the typing action. Emitting directly from client to client can be more efficient in this scenario.

Answer 8

Correct, it is more efficient to use debouncing instead of emitting on every character change. By using the debounce method from the lodash library, you can wait for a short period before triggering the function.

I suggest checking out the documentation at: https://lodash.com/docs/4.17.5#debounce

Laravel's Echo is also a good option, especially if you don't need server involvement for the typing action. Emitting directly from client to client can be more efficient in this scenario.

Please be advised that the message is currently in the process of being typed

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ember.js: Storing function prototypes as objects

resolved after a new promise returned nothing (console.log will output undefined)

Tips on harnessing the power of AngularJS $scope

Learn the steps to retrieve a user's profile picture using the Microsoft Graph API and showcase it in a React application

The Node/Express Rest API appears to keep directing requests to the same controller function, despite the mappings being correctly

Create static HTML web pages using information from a text file

Activate the click event repeatedly in a loop

Which specific HTML element triggers the initiation of ajax in Jquery?

What is the best way to transfer the http server variable between different layers in node.js without requiring it in a separate file?

What method is the most effective for extracting the first line of a file in Node.js quickly?

Conceal the Submit button upon completing the form submission using the load method

PHP script failing to execute if/else statement during AJAX request

What is the process of generating enum values using ES6 in Node.js?

Enhancing Efficiency and Optimization with jQuery

Creating a custom table layout with JavaScript and jQuery

Mastering advanced String templating using loops and control statements in Javascript

``Why is my Vue.js ag-Grid filter component failing to function?

In JavaScript, the code is designed to recognize and return one specific file type for a group of files that have similar formats (such as 'mp4' or 'm4v' being recognized as 'MOV')

The Chevron icon is not pointing downwards even though it has already gone upwards

Determine if a mobile application has been installed using Vue.js