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

  }

我无法获得＆＃39; pmessage＆＃39;发出触发事件，所以我想我没有正确地执行io.in（）部分。我试图使用用户实现私人通信。用户名，但我无法找到明确的示例或文档。我遵循socket io上的文档，所以我应该关闭或工作但不是。

Answer 1

我们需要单独处理从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'));

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;

反应和套接字私人消息不起作用

2 个答案: