How to import SignalR in React Component?

Question

I have used create-react-app to scaffold the initial react application.

My DashBoard component:

import React, { Co         


        

Answer 1

UPDATE: Please note that if you are using Redux in your ReactJS app, the solution below is not necessarily the best solution. It is better to implement signalR as a middleware. You can find the best answer here.

If you are not using Redux, or you still want to implement it in a React component, then read on: For people that are using the latest version of signalR (core v2.1), since jQuery is not a dependency of signalR any more, you can import it like:

import * as signalR from '@aspnet/signalr';

NOTE: there is now a newer version of signalr available (@microsoft/signalr) that requires a different setup. This solution only works with @aspnet/signalr. (UPDATE June 2020)

And then use it like:

signalR.HubConnectionBuilder()

Here is an example:

import React, { PureComponent } from 'react';
import { string } from 'prop-types';
import * as signalR from '@aspnet/signalr';

class SignalR extends PureComponent {
  constructor (props) {
    super(props);

    this.connection = null;
    this.onNotifReceived = this.onNotifReceived.bind(this);
  }

  componentDidMount () {
    const protocol = new signalR.JsonHubProtocol();

    const transport = signalR.HttpTransportType.WebSockets;

    const options = {
      transport,
      logMessageContent: true,
      logger: signalR.LogLevel.Trace,
      accessTokenFactory: () => this.props.accessToken,
    };

    // create the connection instance
    this.connection = new signalR.HubConnectionBuilder()
      .withUrl(this.props.connectionHub, options)
      .withHubProtocol(protocol)
      .build();

    this.connection.on('DatabaseOperation', this.onNotifReceived);
    this.connection.on('DownloadSession', this.onNotifReceived);
    this.connection.on('UploadSession', this.onNotifReceived);

    this.connection.start()
      .then(() => console.info('SignalR Connected'))
      .catch(err => console.error('SignalR Connection Error: ', err));
  }

  componentWillUnmount () {
    this.connection.stop();
  }

  onNotifReceived (res) {
    console.info('Yayyyyy, I just received a notification!!!', res);
  }

  render () {
    return ;
  };
};

SignalR.propTypes = {
  connectionHub: string.isRequired,
  accessToken: string.isRequired
};

export default SignalR;

UPDATE: in 2020, you can use "withAutomaticReconnect()":

  const connection = new HubConnectionBuilder()
    .withUrl(connectionHub, options)
    .withAutomaticReconnect()
    .withHubProtocol(new JsonHubProtocol())
    .configureLogging(LogLevel.Information)
    .build();