如何使用socket.io在更改时发出输入？

Question

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 onChange 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.

Here's the frontend with extra code omitted:

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 (
        <div>
            <form type="text" onSubmit={this.handleSubmit}>
                <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}></input>
                {/* <button className="next-btn"> NEXT </button> */}
                <button onClick={this.sendSocketIO}>Send Socket.io</button>
            </form>
            <p>{this.state.text}</p>
            <p>{this.state.messages}. </p>
        </div>
    )

And the backend:

io.on('connection', client => {
 console.log('Socket connected: ', client.id);
 //recieves the message from the client, and then re-emits to everyone     
client.on('SEND_MESSAGE', data => {
data.message = validate.blacklist(data.message, ['<','>','&','"','/']);
io.emit('RECEIVE_MESSAGE', data);
});

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.

Answer 1

You are emitting with:

socket.emit('example_message', this.state.text)

and handling with:

client.on('SEND_MESSAGE', data...

Use the same name for the message to emit and then handle on the server.