用ReactJS ES6实现Socket.io

小编典典

用ReactJS ES6实现Socket.io

reactjs

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

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>

这对于我从服务器进行连接之类的东西来说效果很好，它表明用户正在连接服务器并与服务器断开连接，只是客户端操作使我感到困惑。

阅读 955

2020-07-22

共1个答案

小编典典

可能还有其他解决方案，但是以下对我有用：

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 (
      <Child 
        socket = { socket } 
        sendMessage = { this.sendMessage }
      />
    )
  }
}

2020-07-22