react and socket io private messaging not working - node.js

Question

server side
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);
})
});
client side
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>";
})
}
I can't get the 'pmessage' emit event to trigger, so I'm thinking I'm not doing the io.in() part right. I'm trying to implement private communication using the users' usernames but I can't find clear examples or documentation on this. I followed the docs on socket io so I should be close or working but it's not.

Answer 1

It seems like you have used the right react life cycle method but the way you are adding the data to the dom is not a good method in react. Try something like this.
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;

Answer 2

The way we need to listen to new messages from socket has to be handled separately and make the component state to change with the new data.
I have added a simple example on how to do this. It may not work as it is and need some changes based on your business logic. But this should give you a fair idea on how to do it.
I didn't add a case where client talks to the server with a new message.But it's fairly simple to implement.
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'));