Javascript SocketIO ReactJS-socket.io不'；t显示console.log（）

我正在使用ReactJS vie聊天应用程序开发SocketIO

向我的服务器发送消息时，我的客户端没有收到服务器的响应。控制机构的

控制台.log

从不显示

我不明白为什么，因为我完全遵循SocketIO的蓝图

这里是my client.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)
    })
  }

这里是my server.js：

 client.on("message", (message) => {
   client.emit("new_message", message)
  })

任何暗示都很好，

---

谢谢

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

从服务器的角度来看，

“新建消息”

正在发送到您在组件

发送

箭头函数中创建的套接字。由于该套接字实例不侦听

“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 }) 
  }
}

---

只是出于兴趣-为什么每次发送消息时都要重新创建套接字？为什么要尝试向服务器发送箭头函数？另请注意，要从arrow函数返回对象（而不是创建块），需要使用括号：

（）=>（{message:“hey！”}）

@DacreDenny:这是因为我的套接字连接在我的ComponentDidMount之外scope@Li357当前位置我注意到了谢谢Hanks的提示，我不能像这样直接在void中添加socket项。你能将socket实例添加到components状态吗？即通过这个.setState（）？我正在尝试。它返回我“>无法读取未定义”的属性“endpoint”，我基本上已将套接字连接设置为整个文件的作用域之外的组件，现在工作正常，我从服务器收到消息