我无法将SocketIO客户端合并到我的项目中,因为我需要同构地设置项目。在将套接字文件包含在基本html中之后,我尝试调用let socket = io();我的一个组件的componentdidmount,但是最初在将其记录到控制台后,它是未定义的。当我路由到其他组件并使用该套接字变量返回该组件时,它将充满一些数据。我想我的意思是,这不是在组件中初始化什么套接字,似乎必须等待如何解决此问题?
let socket = io();
Component.jsx
componentDidMount() { let socket = io(); console.log(socket); }
Base.html
<!doctype html> <html lang=""> <head> <title>TITLE</title> META LINK </head> <div class="app">CONTENT</div> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview'); </script> <script type="text/javascript" charset="utf-8" src="/assets/app.js"></script> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); </script> </body> </html>
这对于我从服务器进行连接之类的东西来说效果很好,它表明用户正在连接服务器并与服务器断开连接,只是客户端操作使我感到困惑。
可能还有其他解决方案,但是以下对我有用:
1)npm安装套接字客户端软件包
2)将套接字导入所有需要套接字功能的组件的最基本组件
3)在生命周期事件中的一个联播服务器侧套接字事件侦听器(constructor/ componentWillMount,componentDidMount)
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 ( <Child socket = { socket } sendMessage = { this.sendMessage } /> ) } }