title: How to emit inputs on change using socket.io?
body: <p>I'm working on a chat style app using React and socket.io, and I want to implement something where a client can see the input being typed by the other client in realtime. I'm using <code>onChange</code> on the input to update the state and emit the message at the same time, but that only sends messages one letter at a time to the server, and deletions don't work at all.</p>
  
  <p>Here's the frontend with extra code omitted:</p>
  
  <pre><code>this.state = {
          text: '',
          name: '',
          messages: []
      }
  componentDidMount() {
      socket.on('RECIEVE_MESSAGE', function(msg) {
          this.setState({
              messages: [...this.state.messages, msg]
          })
      })
  }
  onInputChange(event) {
      this.setState({
          text: event.target.value
  })
      socket.emit('example_message', this.state.text);
      this.setState({
          messages: [...this.state.messages, this.state.text]
      })    
  }
  return (
          &lt;div&gt;
              &lt;form type="text" onSubmit={this.handleSubmit}&gt;
                  &lt;input
                      type="text"
                      className="text-input"
                      id="name-input"
                      name="text-input"
                      required="required"
                      placeholder="text"
                      //used to save end result
                      value={this.state.text}
                      onChange={this.onInputChange}&gt;&lt;/input&gt;
                  {/* &lt;button className="next-btn"&gt; NEXT &lt;/button&gt; */}
                  &lt;button onClick={this.sendSocketIO}&gt;Send Socket.io&lt;/button&gt;
              &lt;/form&gt;
              &lt;p&gt;{this.state.text}&lt;/p&gt;
              &lt;p&gt;{this.state.messages}. &lt;/p&gt;
          &lt;/div&gt;
      )
  </code></pre>
  
  <p>And the backend: </p>
  
  <pre><code>io.on('connection', client =&gt; {
   console.log('Socket connected: ', client.id);
   //recieves the message from the client, and then re-emits to everyone     
  client.on('SEND_MESSAGE', data =&gt; {
  data.message = validate.blacklist(data.message, ['&lt;','&gt;','&amp;','"','/']);
  io.emit('RECEIVE_MESSAGE', data);
  });
  </code></pre>
  
  <p>I'd like to render to the DOM a live feed of what the other client is typing, and update it with every character and character deletion.</p>