反应和插座io的私人信息不工作

Question

服务器端

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

    } 

我不能让“pmessage”发出事件来触发，所以我想我”没有做io.in（）部分的权利。我试图使用用户的用户名实现私人通信，但我找不到明确的例子或文档。我跟着套接字io上的文档，所以我应该关闭或工作，但事实并非如此。

Answer 1

我们需要侦听来自套接字的新消息的方式必须单独处理，并使组件状态随新数据更改。

我已经添加了一个简单的例子来说明如何做到这一点。它可能无法正常工作，需要根据业务逻辑进行一些更改。但是这应该给你一个关于如何去做的公平想法。

我没有添加客户端使用新消息与服务器对话的情况，但实现相当简单。

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

好像你已经使用了正确的反应，生命周期法，但你要添加的数据到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;