Реализация Socket.io с ReactJS ES6

У меня возникли проблемы с включением SocketIO-клиента в мой проект, так как я создал проект изоморфно. После включения файла сокета в базовый html, я пытаюсь вызвать let socket = io(); в компоненте компонента одного из моих компонентов, однако изначально после его регистрации в моей консоли это undefined. Когда я направляюсь к другому компоненту и возвращаюсь к этому компоненту с этой переменной сокета, он заполняется некоторыми данными. Я думаю, моя точка здесь не инициализирует в моем компоненте, что такое сокет, кажется, он должен ждать, как мне обойти это?

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 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 я для таких вещей, как при подключении с сервера, он испускает, что пользователь подключается и отключается от сервера, просто манипуляция с клиентом меня озадачила.

Ответ 1

Есть, вероятно, другие решения, но для меня работает следующее:

1) npm установите пакет сокета клиента сокета

2) импортировать сокет в самый корневой компонент всех компонентов, которым нужна функция сокета

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 }
      />
    )
  }
}

Ответ 2

У меня была такая же странная проблема с socket.io и React. Я хотел определить четкую линию инъекции зависимостей с помощью реквизита для других компонентов из моего файла main.jsx. Оказалось, что мне нужно было инициализировать io, как это...

const socket = window.io();

И все. Это сработало.