我如何向在自己房间中进行连接的每个用户发出一系列连接的用户？

Question

我正在构建一个应用程序，该应用程序在登录时会将当前登录的用户信息发送到我的后端节点服务器，该服务器将信息存储到一个数组中，然后将该信息发送回前端以进行显示在包含所有已连接用户的组件中。

前端的想法是，当您登录时，信息将从构造函数的后端获取，以便在呈现之前就在那里保存信息，然后设置状态。

我的问题是，每次新用户加入时，我的组件似乎都无法吸引用户，除非我两次登录同一用户。因此，这意味着如果用户在同一个房间中，我只会得到更新的信息。

所以我需要弄清楚每次我的用户连接阵列更新时如何向所有房间发送信息

这是我后端的套接字信息：

let connectedUsers = []
let room = ""

    io.sockets.on('connection', (socket) =>{

        console.log('user connected')

        //When a user connects to server, put them in their own chat-room with the address that is the same as their user id

        socket.on("NewUser",( newUser =>{

            if(newUser.email){
                console.log("The new user is ",newUser.email)
                connectedUsers.push({...newUser, [socket.id]:socket.id})

                room = newUser.user_id
                console.log("User entering room: " , room)
                socket.join(`/${room}`, () =>{
                    console.log("Sending list of users to room: ", room)
                    io.in(`/${room}`).emit('UserEnter', connectedUsers);
                })
            }
            else{
                console.log("No one there")
            }

        }))

    //listen for message from client, send it back
    socket.on('ConnectToUser', user_id =>{
        console.log("User id to join: " , user_id)
        socket.leave(room)
        socket.join(`/${user_id}`)
        io.in(`/${user_id}`).emit("Id", user_id)
    })


    socket.on('disconnect', () => {
        // connectedUsers2 = connectedUsers.slice()
        let index = connectedUsers.findIndex(user => user[socket.id] == socket.id)
        console.log(" Index to delete: ", index)
        index != -1? connectedUsers.splice(index,1):console.log("Something's wrong")

        io.in(`/${room}`).emit("UserEnter", connectedUsers)
    })

然后在我的前端：

export class SearchSideBar extends Component{
    constructor(props){
        super(props)
        this.state = {
            toggleSearch:false,
            usersConnected:[],
            currentUser:""
        }

        console.log("User that we are sending to be put into connectedUsers: ", this.props.user)
        //Wait till we recieve redux state, and then send it to be put into usersConnected
        setTimeout(() =>{this.props.socket.emit("NewUser", this.props.user)}, 200)

        //Wait same amount of time to recieve the users, so I wont get it too early
        setTimeout(() =>{
            props.socket.on("UserEnter", data =>{
                console.log("Users from server to update redux and local usersConnected: ", data)
                this.props.updateUsersConnected(data)

                this.setState({
                    usersConnected:data
                })
            })
        },200)

    }

    componentDidUpdate = (prevProps) =>{
        if(this.props.usersConnected.email != prevProps.usersConnected.email){
            this.props.socket.on("UserEnter", data =>{
                console.log("Users from server to update redux and local usersConnected: ", data)
                this.props.updateUsersConnected(data) // am i even using this redux state anywhere
                this.setState({
                    usersConnected:data
                })
            })
        }
        // console.log(prevProps)
    }


    render(){
        const {usersConnected} = this.state //was state
        const { socket } = this.props
        return(
            <div className = "search-parent">

                <div className = "container-header">
                    <h3 className = "title">Who's Online?</h3>
                    <button className = "refresh" onClick={() =>{this.handleButtonPress()}}><img src={refresh}></img></button>
                </div>

                <div>
                {
                    usersConnected.length? usersConnected.map(user =>{
                        return(
                            <div className = "contacts">
                                <Contact first = {user.first_name}
                                        last = {user.last_name}
                                        image = {user.profile_picture}
                                        status = {user.status}
                                        dept = {user.department}
                                        user_id = {user.user_id}
                                        socket = {socket}/>
                            </div>
                        )
                    })
                    :
                    null

                }
                </div>


            </div>
        )
    }
}

const mapStateToProps = (state) =>{
    return{
        user:state.user,
        usersConnected:state.usersConnected
    }
}

export default connect(mapStateToProps,{updateUsersConnected})(SearchSideBar)