Skip to content

React Component to make realtime apps with React simply. Provides integration with Centrifugo.

License

Notifications You must be signed in to change notification settings

fortis/react-cent

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-cent

Mail.ru Centrifuge integration component

npm version Scrutinizer Code Quality travis-ci status coverage status Standard - JavaScript Style Guide

FOSSA Status

Prerequisites

Firstly you should run Centrifugo server.

Start it with Docker image

 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.

Building & Testing

  • source can be loaded via npm, or downloaded from github repo.
  • npm run build to build
  • npm test to run tests

License

react-cent is licensed under The MIT License (MIT).

About

React Component to make realtime apps with React simply. Provides integration with Centrifugo.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published