Question

我正在使用ReactJS在SocketIO上运行聊天应用程序。

向我的服务器发送消息时，我的客户端未收到我的服务器的响应。永远不会显示false控制机制。

由于我完全遵循SocketIO蓝图，所以我不知道为什么。

这是我的client.js：

console.log

这是我的server.js：

 send=  (e) => {  
    e.preventDefault(); 

    const  socket=  io.connect(this.state.endpoint); 
    socket.emit("message", () => {
      message: "hey !"
    })

    console.log("send ended")
  }

  componentDidMount(){ 
    const  socket=  io.connect(this.state.endpoint); 
    socket.on("new_message", (message) => { 
      console.log("new message ", message)
    })

    socket.on("user_connected", (message) => { 
      console.log(message)
    })
  }

任何提示都会很棒，谢谢

Answer 1

出现问题的原因是，您实际上在客户端组件的整个生命周期中创建了多个套接字连接实例。

从服务器的角度来看，"new_message"被发射到在组件send箭头功能中创建的套接字。由于该套接字实例不监听"new_message"，因此您不会在控制台中看到预期的日志消息。

也许您可以考虑像这样重构客户端组件代码，以连接单个套接字，并将其用作发送和侦听来自服务器的消息的单一方法？

class YourComponent extends Component {

  // Add socket field to component class
  socket : ''

 // Note that the send method is not an arrow function here, so
 // care should be taken to consider how you invoke send() if
 // your current implementation relies on this being an arrow function
 function send(e) {
    e.preventDefault(); 

    const socket = this.state.socket // UPDATE: Access socket via state

    // Send messages to server via the same socket instance of this class
    if(socket) {

      socket.emit("message", () => {
        message: "hey !"
      })

      console.log("send ended")
    }
  }

 function componentDidMount(){ 

    const socket = io.connect(this.state.endpoint)

    socket.on("new_message", (message) => { 
      console.log("new message ", message)
    })

    socket.on("user_connected", (message) => { 
      console.log(message)
    })

    // UPDATE: Connect the socket, and hold a reference for reuse by the component class 
    // instance via the component's state (seeing you can't add a class field for this)
    this.setState({ socket : socket }) 
  }
}

SocketIO ReactJS-socket.io不显示console.log（）

1 个答案: