fortis/react-cent

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

react-cent

Mail.ru Centrifuge integration component

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

• Javascript browser client
• Configuration parameters
• Subscriptions
• SockJS

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

react-cent's Issues

An in-range update of sinon is breaking the build 🚨

Version 4.1.6 of sinon was just published.

Branch	Build failing 🚨
Dependency	sinon
Current Version	4.1.5
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

sinon is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ coverage/coveralls Coverage pending from Coveralls.io Details
• ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

---

Commits

The new version differs by 10 commits.

• 68c37ed Update docs/changelog.md and set new release id in docs/_config.yml
• cd8ae51 Add release documentation for v4.1.6
• 29e80be 4.1.6
• a5c59a5 Update History.md and AUTHORS for new release
• 0ae60b6 Merge pull request #1653 from mroderick/upgrade-dependencies
• dcd4191 Upgrade browserify to latest
• a316f02 Upgrade markdownlint-cli to latest
• 78ebdb3 Upgrade lint-staged to latest
• fcf967b Upgrade dependency supports-color
• 7c3cb4f Enable StaleBot with default configuration (#1649)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Enh: Disconnect on <CentProvider> unmount

<CentProvider> does not disconnect before unmount. It's designed to connect once on application init phase.

I wish to use centrifugo on one-two specific pages in SPA admin panel in a project. I want to connect to Centrifugo server on demand and disconnect then it is unneeded.

I believe it is possible with current available interface, but it whould be much appropriate just to add a counterpart for the following lines:

react-cent/src/cent-provider.js

Lines 53 to 55 in ab9b895

	componentDidMount = () => {
	this.cent.connect(this.props.onConnect)
	}

An in-range update of sinon is breaking the build 🚨

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 4.4.7 of sinon was just published.

Branch	Build failing 🚨
Dependency	sinon
Current Version	4.4.6
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

sinon is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

---

Commits

The new version differs by 7 commits.

• e060fe9 Update docs/changelog.md and set new release id in docs/_config.yml
• e9fce06 Add release documentation for v4.4.7
• f047838 4.4.7
• cc91fe6 Update History.md and AUTHORS for new release
• 9fb8577 Emojify the support message :heart:
• a87ef85 Use existing mini-lib for coloring
• 1f33fe5 Reduce noisy NPM output from postinstall script

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.