import React from 'react';
import { render } from 'react-dom';
import { SocketProvider } from '../src/socketProvider';
 
[...]
 
const target = document.getElementById('app');
const socketOptions = {
  port: 5001, // If undefined defaults to location.port
  host: 'localhost', // If undefined defaults to location.hostname
  path: 'ws'
};
 
[...]
 
const node = (
  <Provider store={store}>
    <SocketProvider options={socketOptions}>
      <Router history={history} onUpdate={onUpdate}>
        {appRoutes}
      </Router>
    </SocketProvider>
  </Provider>
);
 
render(node, target);
 

import React, { Component } from 'react';
import { socketConnect } from '../src/socketProvider';
 
class App extends Component {
  constructor(props) {
    super(props);
 
    props.addSocketEvent('debug', this.onSocketDebug);
  }
 
  onSocketDebug(msg) {
    console.log(msg)
  }
 
  sendSocketMessage() {
    const { emitSocketEvent } = this.props;
 
    emitSocketEvent('debug', 'Data Incoming');
    emitSocketEvent('debug', {
      key: 'Value'
    });
  }
 
  render() { 
    return (
      <div>        
        [...]
      <div>
    );
  }
}
 
const onConnect = props => {
  console.log(props);
}
 
const onClose = props => {
  console.log(props);  
}
 
const onMessage = (data, props) => {
  console.log(data, props);
}
 
const onError = props => {
  console.log(props);
}
 
export default socketConnect(App, {
  onConnect: onConnect, 
  onClose: onClose, 
  onMessage: onMessage, 
  onError: onError
});
 

import React, { Component } from 'react';
import { socketConnect } from '../src/socketProvider';
 
class App extends Component {
  constructor(props) {
    super(props);
 
    const socket = props.socket;
  }  
 
  render() { 
    return (
      <div>        
        [...]
      <div>
    );
  }
}
 
export default socketConnect(App, {});
 

[...]
 
const createApp = (store, props) => renderToString(
  <Provider store={store}>
    <SocketProvider>
      <RouterContext {...props} />
    </SocketProvider>
  </Provider>
);
 
[...]