反应和socket io私人消息不起作用答案

【问题标题】：react and socket io private messaging not working反应和socket io私人消息不起作用
【发布时间】：2017-12-29 10:50:36
【问题描述】：

服务器端

 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() 部分。我正在尝试使用用户的用户名实现私人通信，但我找不到明确的示例或文档。我关注了 socket io 上的文档，所以我应该关闭或工作，但事实并非如此。

【问题讨论】：

selectedFriend 是用户名*，data.username 也是用户名，只是为了澄清

标签： node.js reactjs socket.io

【解决方案1】：

您似乎使用了正确的 react 生命周期方法，但是您将数据添加到 dom 的方式并不是一个好的 react 方法。试试这样的。

        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】：

我们需要从套接字监听新消息的方式必须单独处理，并使组件状态随着新数据而改变。

我添加了一个关于如何执行此操作的简单示例。它可能无法按原样工作，需要根据您的业务逻辑进行一些更改。但这应该让您对如何做到这一点有一个公平的想法。

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

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

【讨论】：