如何使用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...
使用相同的名称为消息发出,然后在服务器上处理。
如何使用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...
使用相同的名称为消息发出,然后在服务器上处理。