使用 ReactJS ES6 实现 Socket.io
Implementing Socket.io with ReactJS ES6
我在将 SocketIO 客户端合并到我的项目中时遇到问题,因为我的项目是同构设置的。在我的基础 html 中包含套接字文件后,我尝试在我的一个组件的 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 安装 socket client side package
2) 将socket导入所有需要socket功能的组件的最根组件
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 (
<Child
socket = { socket }
sendMessage = { this.sendMessage }
/>
)
}
}
我在使用 socket.io 和 React 时遇到了同样奇怪的问题。我想从我的 main.jsx 文件中确定一条明确的依赖注入线,其中包含对其他组件的支持。原来我只需要像这样初始化io...
const socket = window.io();
就是这样。有效。
您可以在组件外部实例化套接字并在组件内部使用它。像这样:
import React, { Component } from 'react'
import io from 'socket.io-client'
var socket = io()
class MyComponent extends Component {
componentDidMount() {
// You can use the socket inside the componet
socket.on('message', msg => console.log(msg))
}
}
我在将 SocketIO 客户端合并到我的项目中时遇到问题,因为我的项目是同构设置的。在我的基础 html 中包含套接字文件后,我尝试在我的一个组件的 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 安装 socket client side package
2) 将socket导入所有需要socket功能的组件的最根组件
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 (
<Child
socket = { socket }
sendMessage = { this.sendMessage }
/>
)
}
}
我在使用 socket.io 和 React 时遇到了同样奇怪的问题。我想从我的 main.jsx 文件中确定一条明确的依赖注入线,其中包含对其他组件的支持。原来我只需要像这样初始化io...
const socket = window.io();
就是这样。有效。
您可以在组件外部实例化套接字并在组件内部使用它。像这样:
import React, { Component } from 'react'
import io from 'socket.io-client'
var socket = io()
class MyComponent extends Component {
componentDidMount() {
// You can use the socket inside the componet
socket.on('message', msg => console.log(msg))
}
}