Как генерировать входные данные при изменении с помощью socket.io?

Question

Я работаю над приложением в стиле чата, используя React и 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 прямую трансляцию того, чем является другой клиентвведите и обновите его при каждом удалении символа или символа.

Answer 1

Вы отправляете с:

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

и обрабатываете с помощью:

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

Используйте то же имя для сообщения, которое отправляет, а затем обрабатывает на сервере.