reagieren und Buchse io Private Nachrichten nicht

Question

Seite Server arbeiten

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

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>"; 
    }) 

    } 

Ich kann die 'pmessage' emittieren Ereignis bekommen auszulösen, so dass ich denke, ich‘ Mache nicht den io.in() Teil richtig. Ich versuche, private Kommunikation mit den Benutzernamen der Benutzer zu implementieren, aber ich kann keine klaren Beispiele oder Dokumentation zu diesem finden. Ich folgte den Dokumenten auf Socket-IO, also sollte ich nah sein oder arbeiten, aber es ist nicht.

Answer 1

Die Art und Weise, wie wir neue Nachrichten vom Socket abhören müssen, muss separat behandelt werden und den Komponentenstatus mit den neuen Daten ändern.

Ich habe ein einfaches Beispiel hinzugefügt, wie dies zu tun ist. Es funktioniert möglicherweise nicht wie es ist und benötigt einige Änderungen basierend auf Ihrer Geschäftslogik. Aber das sollte Ihnen eine ungefähre Vorstellung davon geben, wie es geht.

Ich habe keinen Fall hinzugefügt, in dem Client mit dem Server mit einer neuen Nachricht spricht. Aber es ist ziemlich einfach zu implementieren.

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')); 

Answer 2

Es scheint, wie Sie die richtigen Lebenszyklus-Methode reagieren, aber der Weg zum dom der Daten, die Sie hinzufügen, ist eine gute Methode nicht reagiert verwendet haben. Probieren Sie so etwas aus.

 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;