reactComponent.jsx

import * as React from 'react';
import axios from 'axios';
import { ChartData } from 'chart.js';
import ChartRT from '../../components/ChartRT';
import { inject, observer } from 'mobx-react';
import { ChartContainerProps, ChartRTState } from '../../interfaces';
import * as ws from 'ws';

@inject('store') @observer
class ChartRTContainer extends React.Component<ChartContainerProps, ChartRTState> {

  constructor(props: ChartContainerProps) {
    super(props);

    /**
     * @type {{data: Chart.ChartData}} - данные графика
     */
    this.state = {
      data: this.props.store.ChartStore.realtimeData,
      isFetching: false,
      testData: 0
    };
  }

  componentDidMount() {
    const localws = new ws('ws://localhost:8080');
    localws.onmessage = event => {
      console.log(event.data);
      this.setState({ testData: event.data });
    };
    localws.onclose = error => {
      console.log('client closed connection', error);
    };
    localws.on('message', message => {
      console.log(message);
    });
  }

  startFetching() {
    axios.post('/wss/connect', {
      crypto: 'BTC',
      currency: 'RUB'
    },
    {
      // i dont give a fuck what does mean next 5 strings
      withCredentials: false,
      transformRequest: [(data) => JSON.stringify(data.data)],
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    });
  }

  stopFetching() {
    axios.get('/wss/close');
  }

  render() {
    const { options } = this.props.store.ChartStore;
    // return <ChartRT {...this.props} data={this.state.data} options={options} />;
    return (
      <div>
        <button className="btn" onClick={this.startFetching}>Start fetching</button>
        <button className="btn" onClick={this.stopFetching}>Stop fetching</button>
        <p id="fetching">{this.state.testData}</p>
      </div>
    );
  }
}

export default ChartRTContainer;