使用ReactJS ES6实现Socket.io

我无法将SocketIO客户端整合到我的项目中,因为我让我的项目设置为同构的.在我的基本html中包含套接字文件之后,我尝试调用let socket = io();我的一个组件的componentdidmount,但是最初在我的控制台中记录后它是未定义的.当我路由到另一个组件并使用该套接字变量返回该组件时,它会填充一些数据.我想我的观点是,在我的组件中没有初始化什么套接字,似乎它必须等待我如何解决这个问题？

Component.jsx

componentDidMount() {
    let socket = io();
    console.log(socket);
  }

base.html文件

    

    META

    LINK



CONTENT

这工作正常,因为从服务器连接的东西,它发出用户连接和断开服务器,只是客户端操作让我感到困惑.

可能还有其他解决方案,但以下内容适用于我:

1)npm安装套接字客户端包

2)将套接字导入到需要套接字功能的所有组件的最根组件中

3)其中一个生命周期事件(constructor/ componentWillMount,componentDidMount)中的连接服务器端套接字事件监听器

4)如果有意义处理子组件中的某些服务器事件,则通过props传递套接字对象

例:

import io from 'socket.io-client'
let socket = io(`http://localhost:8000`)

class App extends Component {
  state = { data: {} }

  componentDidMount() {    
    socket.on(`server:event`, data => {
      this.setState({ data })
    })
  }

  sendMessage = message => {
    socket.emit(`client:sendMessage`, message)
  }

  render () {
    return (
      
    )
  }
}