Live writing (Google style)

help
1

I have created the following event handler which triggers MongoDB update operation in the specific field (letter by letter) when user is typing into an input html element. It worked perfectly from client before I added Methods - now it lacking and losing letters in the words which is obvious.

How could I manage this? What would be the best to do it? What would be the best way to trigger writing when user stops writing?

      'input .modify-input-tournament': function(event) {                      
                var id = event.currentTarget.dataset.id;
                var object = { $set: {} };
                object.$set[event.currentTarget.name] = event.currentTarget.value; 
                    
                Meteor.call("modify_tournament_details", id, object, (err, res) => {if (err) {} else {

                
                }});
}
2

You might want to look into wrapping your event function with _.debounce or something similar. Debounce will create a new version of your function that holds off on executing until a certain amount of time has passed since all user input has stopped.

So something like:

'input .modify-input-tournament': _.debounce(function(event) {                      
  var id = event.currentTarget.dataset.id;
  var object = { $set: {} };
  object.$set[event.currentTarget.name] = event.currentTarget.value;       
  Meteor.call("modify_tournament_details", id, object, (err, res) => {if (err) {} else {    
  }});
}, 500)
3

Holy shit, fuck me side ways :sweat_smile: I have never thought that I could touch the “main function” and never know that underscore.js has this function… Big hand mate!!

4

If you’re using React, I use an autosave component that uses debounce specifically for this purpose.

handleUpdates(updatedValue){

    const
      updateInterval = 250,
      options = { 'maxWait': 2000 },
      autoSaveChanges = debounce(updatedValue => 
        this.props.handleUpdates(this.props.collection, this.props.field, updatedValue),
        updateInterval,
        options
      )
      
    autoSaveChanges(updatedValue)
  }
5

Note that depending on your use case going through mongo for every letter typed might not be a great solution.

  1. In terms of scalability. A lot of users typing will blow up the oplog. You might want to consider redis for this or at the very least a debounce like @hwillson proposed.
  2. If you want multiple users writing on the same piece of data, you can’t do it with meteor. It has a last-write-wins approach, so concurrent changes will get overwritten. You need something like shareJS (OT-based) or swarm (CRDT-based).