net-core-react-websockets

Intended usage with AspNetCore.WebSockets

Register SocketProvider

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);

Usage with socketConnect

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

Access to socket object

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, {});

Server side rendering

If you need to server side render the SocketProvider, use it without passing any options

[...]

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

[...]