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

The variable _spPageContextInfo has not been defined, resulting in a ReferenceError

Finding elements based on their position using Javascript

Retrieving Information and Categorizing by Date using Laravel

Using Vue and PHP to parse a JSON string and display it as a table

Guide to connecting a value within a component to an element in App.vue

The attempt to create the property 'and_ff' on the string 'and_chr 89' has failed

Top storage solution for ExpressJS in the world of NodeJS

Is there a way to make the primary button on the previous page function correctly again, just like it did before it was clicked?

Using NextJS to navigate user journey by mapping an array of values from Formik to

Looking to implement the v-model with a bootstrap-vue b-form-radio on a webpage? Here's how you can

Reactjs throwing an Unsupported Media Type error with code 415

Tips for saving and accessing Shopping Cart items using localstorage

How can JavaScript Regular Expressions be used for Form Validation?

Tips for preventing a component from updating state prior to data retrieval?

Errors encountered by the Chrome extension

Nested Promise.all within another Promise.all appears to terminate prematurely, triggering a warning indicating failure to return from a promise

Custom font not displaying on Chromecast receiver app

handling component interaction with react-redux store

Choosing an element beneath a table row using a different element as a reference

How do I access and read a map within an array from Firebase using ReactJS?