服务器端
io.on('connection', function(socket){
socket.on('user joined', function(data){
socket.join(data.username);
});
socket.on('disconnect', function(){
console.log('user disconnected');
});
socket.on('send private', function(data){
console.log('sending private', data);
io.in(data.to).emit('pmessage',data);
})
});
客户端
handleSubmit(){
var newMSG= {
to: this.state.selectedFriend,
from: this.props.user.username,
message: 'new message yay'
}
this.state.socket.emit('send private', newMSG);
}
componentDidMount(){
var self = this;
self.state.socket.on('pmessage', function(data){
console.log('receiving private!', data);
document.getElementById('myprivates').innerHTML= "<p><em>"+data.message+"</em></p>";
})
}
我无法获得&#39; pmessage&#39;发出触发事件,所以我想我没有正确地执行io.in()部分。我试图使用用户实现私人通信。用户名,但我无法找到明确的示例或文档。我遵循socket io上的文档,所以我应该关闭或工作但不是。
答案 0 :(得分:0)
我们需要单独处理从socket接收新消息的方式,并使组件状态随新数据而变化。
我添加了一个关于如何执行此操作的简单示例。它可能无法正常工作,需要根据您的业务逻辑进行一些更改。但这应该让你对如何做到这一点有一个公平的想法。
我没有添加客户端使用新消息与服务器通信的情况。但实现起来相当简单。
import React from 'react';
import ReactDOM from 'react-dom';
const socket = io();
class MyComponent extends React.Component {
constructor() {
super();
this.state = { messages: []}
socket.on('pmessage', (newMessages) => this.handleStateChange(newMessages));
}
handleStateChange(newMessages) {
this.setState({ messages: newMessages });
}
render() {
let messages = this.state.messages.map((msg) => {
return <li> msg </li>
});
return (
<div>
<h1>Messages</h1>
<div>
{messages}
</div>
</div>
);
}
}
ReactDOM.render(<MyComponent/>, document.getElementById('private-messages'));
答案 1 :(得分:0)
您似乎已经使用了正确的反应生命周期方法,但是将数据添加到dom的方式并不是一种好的反应方法。尝试这样的事情。
import React from 'react';
import ReactDOM from 'react-dom';
const socket = io();
class MyComponent extends React.Component {
constructor() {
super();
this.state = { messages: []}
}
handleSubmit(){
var newMSG= {
to: this.state.selectedFriend,
from: this.props.user.username,
message: 'new message yay'
}
this.state.socket.emit('send private', newMSG);
}
componentDidMount(){
var self = this;
self.state.socket.on('pmessage', function(data){
console.log('receiving private!', data);
this.setState({messages:this.state.messages.concat(data)});
}
messagelist(){
return this.state.messages.map((msg,i) => {
return <li key={i}> msg </li>
});
}
render() {
let messages =
return (
<div>
<h1>Messages</h1>
<div>
{this.messagelist}
</div>
</div>
);
}
}
export default MyComponent;