logo标签列表

使用ReactJS ES6实现Socket.io

node.jsreactjssocket.io
25

我正在尝试将SocketIO客户端集成到我的项目中，但由于我已经以同构方式设置了我的项目，所以遇到了一些问题。在将socket文件包含在我的基本HTML中后，我尝试在其中一个组件的componentdidmount中调用let socket = io();，但最初在控制台中记录它时它为未定义。当我路由到另一个组件并返回到该带有socket变量的组件时，它就会填充一些数据。我想我的重点是我的组件没有初始化socket，它似乎需要等待，我该如何解决这个问题？

Component.jsx

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

基础.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>

这个很好用，例如当有人从服务器连接时，它会发出用户正在连接和断开服务器的信号，但是客户端操作让我感到困惑。

你是否正在使用像webpack或browserify这样的模块打包器？ - azium
是的，我是Webpack！那么我需要引入某种库吗？ - Karan
你可以在根组件中导入socket，并且如果需要，可以通过props向下传递。https://www.npmjs.com/package/socket.io-client。这是我项目中的一个示例 https://github.com/zen-games/ui/blob/develop/src/components/App.js - azium
3个回答
64

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

1) npm 安装 socket 客户端包

2) 将 socket 引入所有需要 socket 功能的组件中最顶层的组件

3) 在生命周期事件（constructor / componentWillMount, componentDidMount）之一中挂接服务器端 socket 事件监听器

4) 如果在子组件中处理某些服务器事件有意义，则通过 props 传递 socket 对象

例如：

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 }
      />
    )
  }
}
1
你可以在组件外实例化一个socket，并在组件内使用它。像这样：
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))
    }
}
-1

我在socket.io和React中遇到了同样奇怪的问题。我想在我的main.jsx文件中通过props确定依赖注入的清晰路径，以连接其他组件。结果只需要像这样初始化io...

const socket = window.io();

就是这样。它起作用了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接