Question

我有两个组成部分，它们都是分开的。我必须通过套接字将数据从component1发送到component2。但是我的component2仅侦听事件一次，一段时间后不侦听该事件

Component1

class Component extends React.component{
     socket = socketIOClient("http://localhost:5000")

    sendData = () =>{
          socket.emit("newData", {somedata})
     }

     render() {
          return(
         <button onClick={this.sendData} >Send</button>
     })

}

Component2

class Component2 extends React.Component{
    constructor(props) {
        super(props)
        this.state = {data}
    }

    socket =  socketIOClient("http://localhost:4000")

    componentDidMount() {
        socket.on("newData", data =>
         this.setState(data)
    )}

    render(){
         return(<h1>{this.state.data.someAttribute} <h1/>)
   }
}

服务器

const io = socketIO(server)
io.on("connection", socket =>{
     socket.on("newData", data=> socket.emit("newData"))
 })

Component1正在向服务器发送数据多次（通过控制台登录服务器验证）但是Component2仅在第一次接收数据。

Answer 1

找到了解决方案，

错误在服务器端。

我们必须使用实际的io对象将事件发送到连接到服务器的其他套接字。

所以服务器端应该是

const io = socketIO(server)
io.on("connection", socket =>{
    socket.on("newData", data =>{
        io.sockets.emit("newData", data) //changed this line
   })

}）

React中的Socket.io一段时间后不监听

1 个答案: