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

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

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

1 个答案: