react-cent

Mail.ru Centrifuge integration component

Prerequisites

Firstly you should run Centrifugo server.

 docker run --ulimit nofile=65536:65536 -p 8000:8000 centrifugo/centrifugo centrifugo --admin --web --insecure_admin

--admin --web --insecure_admin - used for development purposes to enable admin interface and skip password prompt.

Open http://localhost:8000

For alternative installation methods and production usage see: Install Centrifugo and quick start.

Installation

To get the latest version, simply install the package using npm:

npm install react-cent --save

Usage

You can disable token authentication with insecure: true parameter, but this mode is mostly for personal and demonstration uses.

All configuration parameters are described in centrifuge-js documentation

Add provider:


const config = {
    url: 'http://localhost:8000/connection/websocket',
    insecure: true, // disable token auth
    // user: 'USER ID',
    // timestamp: 'UNIX TIMESTAMP',
    // token: 'TOKEN',
}

ReactDOM.render(
    <Provider store={store}>
      <CentProvider config={config}>
        <Router>
          <Route path="/" component={App} />
        </Router>
      </CentProvider>
    </Provider>,
    document.getElementById('app')
)

Handle messages:

import React from 'react'
import { cent } from 'react-cent'

// Make Centrifuge client accessible through `this.props.cent`
@cent 
export class SiteMetrics extends React.Component {
    constructor (props) {
      super(props)

      // Subscribe on `site-metrics` channel.
      this.props.cent.subscribe('site-metrics', message => {
        this.handleMessage(message)
      }).history().then(history => {
        this.handleHistory(history)
      })
    }
    
    handleMessage(message) {
      console.log('message', message.data)
    }
    
    handleHistory(history) {
      console.log('history' , history.data)
    }
}

SockJS (optional)

Install package

npm install sockjs-client --save

Update provider configuration

import SockJS from 'sockjs-client'

const config = {
    // Change connection url.
    url: 'http://localhost:8000/connection',
    // Add SockJS client option.  
    sockJS: SockJS
}

Documentation

Built With

CentrifugeJS - Javascript client to communicate with Centrifugo from web browser over Websockets or SockJS
React - A declarative, efficient, and flexible JavaScript library for building user interfaces.