带有React的棘轮Websocket

问题描述

1）我想用rathcet websockets创建一个聊天应用程序。但是我有一个问题。每当建立新的连接时，我都不会希望我的应用向聊天室发送消息，并说出出席的新用户名以及断开用户名时的名字。

3我也该如何从MessagePanel设置状态。 （因此我可以将用户名数据发送到服务器）。基本上，用户名将来自Login组件，然后将设置用户状态，然后将其转到MessagePanel发送到服务器，然后将其返回到MessagePanel并在App.js中设置状态。

2）此外，每次登录应用程序时，我的服务器都会显示2个连接。我找不到这个问题，我真的需要帮助。

class App extends Component{

  state = {
    
    username: null,users: []
  }

    setUsername = (username) =>{

      this.setState({username})
      }

    setUsers = (username) =>{

        this.setState({users: [...this.state.users,username]})
        
        }
    render(){
        return (
            <div className="App">
              {
              !this.state.username ?
                <Login setUsername={this.setUsername} setUsers={this.setUsers}/>
                :
                <MessagePanel className='messagepanel' username = {this.state.username} users={this.state.users}/>
              }
            </div>
          );

    }
}

class Login extends Component{

    login=(e) =>{
    e.preventDefault()
    this.props.setUsername(e.target.username.value)
    this.props.setUsers(e.target.username.value)
    
    }

class MessagePanel extends Component {



    
    state={
      messages:[]
    
      

          }
    

    
    


    
          connection = new WebSocket('ws://localhost:8080/')


          componentDidMount() {
      
      
          
          //event listener
          this.connection.onmessage = (message) => {
          const data = JSON.parse(message.data)
          this.setState({messages: [...this.state.messages,data]})
          }}
  
      

 sendMessage=(message)=>{

        const data= {user: this.props.username,text: message,type: "message"}
        this.connection.send(JSON.stringify(data))
        this.setState({messages: [...this.state.messages,data]})
  
 };

  render()
  
 { 
 
  
  return (
    <div className="MessagePanel">

      <Layout/>
  
      <displayMessages messages={this.state.messages} username={this.props.username} />
      <MessageBox sendMessage={this.sendMessage} username={this.props.username} fetchData={this.fetchData} />

    </div>
  );}
}

这也是我的棘轮服务器

protected $clients;
   private $activeUsers;
   private $activeConnections;


  public function __construct() {
      $this->clients = new \SplObjectStorage;
      echo "server started";
  }

  public function onopen(ConnectionInterface $conn) {
      $this->clients->attach($conn);
      echo "New connection! ({$conn->resourceId})\n";
  }

  public function onMessage(ConnectionInterface $from,$msg)
      {
          $jsonMsg = json_decode($msg);

          if ($jsonMsg->type == "login") {
              $this->sendMessagetoAll($from,json_encode($jsonMsg));
          } elseif ($jsonMsg->type == "message") {
              $this->sendMessagetoOthers($from,json_encode($jsonMsg));
          }
      }
      public function sendMessagetoOthers($from,$msg)
      {
          foreach ($this->clients as $client) {
              if ($from !== $client) {
                  $client->send($msg);
              }
          }
      }
      public function sendMessagetoAll($msg)
      {
          foreach ($this->clients as $client) {
              $client->send($msg);
          }
      }

  public function onClose(ConnectionInterface $conn) {

      $this->clients->detach($conn);

      echo "Connection {$conn->resourceId} has disconnected\n";
  }

  public function onError(ConnectionInterface $conn,\Exception $e) {
      echo "An error has occurred: {$e->getMessage()}\n";

      $conn->close();
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）