如何使用socket.io发出关于变更投入？

我正在使用反应，socket.io聊天风格的应用程序，我想实现的东西，其中一个客户端可以看到输入通过实时的其他客户正在键入。我使用onChange输入到更新状态，并在同一时间发出消息，但每次只能发送到服务器消息的一个字母，缺失根本不工作。

下面是省略额外的代码前端：

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

和后端：

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

我想呈现给DOM什么其他客户端输入的活饲料，并与每一个字符和字符删除更新。

你与发射：

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

与处理：

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

使用相同的名称为消息发出，然后在服务器上处理。