用ReactJS ES6实现Socket.io
我无法将SocketIO客户端集成到我的项目中，因为我有我的项目设置同构。 在我的基本html中包含套接字文件之后，我尝试调用let socket = io(); 在我的一个组件的componentdidmount中，但是最初在我的控制台中logging它之后是未定义的。 当我路由到一个不同的组件，并用该套接字variables回到那个组件时，它就会被填充一些数据。 我想我的观点是，它不是在我的组件中初始化什么套接字，似乎必须等待我如何解决这个问题？
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>
这工作正常btw我喜欢从服务器连接的东西，它发出一个用户正在连接和断开服务器，只是客户端操作让我感到困惑。
有可能的其他解决scheme，但下面的工作对我来说：
1）npm安装套接字客户端软件包
2）将套接字导入所有需要套接字function的组件的最根组件
3）在其中一个生命周期事件（ constructor / componentWillMount ， componentDidMount ）中连接服务器端套接字事件监听器
4）如果处理子组件中的某些服务器事件是有意义的，则通过道具向下传递套接字对象
例：
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 } /> ) } }
我有同样奇怪的问题与socket.io和React。 我想确定一个清晰的dependency injection的路线与从我的main.jsx文件中的其他组件的道具。 原来，我只需要像这样初始化io …
const socket = window.io();
就是这样。 有效。