如何解决带有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 举报,一经查实,本站将立刻删除。