rainforestapp / react-pusher

A react component for handling pusher subscriptions

React Pusher Component

A community managed React Component for managing Pusher subscriptions.

Originally conceived and implemented by @ziahamza and @prayogoa.

Usage

You can get react-pusher from npm, just run npm install react-pusher --save.

1. To use react-pusher, you need to hand over your instance of the pusher service first. Otherwise the Pusher React component can't receive messages:

import { setPusherClient } from 'react-pusher';
import Pusher from 'pusher-js';

const pusherClient = new Pusher({
  <your_config>...
});

setPusherClient(pusherClient);

2. Then you simply mount the component, inside another component of yours. The pusher subscription will stay alive for as long as the component does. It subscribes to events when mounted, and cleans up hanging subscriptions when unmounted.

Here's an example of using pusher-react in combination with redux. Everytime we receive a push notification for channel "someChannel" and event "listChanged", the fetchList() action is dispatched.

import { fetchList } from './actions';
import store from '../../store';
import Pusher from 'react-pusher';

const SomeList = ({ items }) => (
  <div>
    <ul>
      {items.map((item) => { <span>{item}</span> })}
    </ul>
    <Pusher
      channel="someChannel"
      event="listChanged"
      onUpdate={() => store.dispatch(fetchList())}
    />
  </div>
);

Rationale

We use pusher at rainforest. Previously our management of pusher notifications was wrapped in it's own service. A singleton, instantiated at app-startup.

Then we noticed a pattern - subscriptions to push notifications are tied to the lifecycle of components that make use of these subscriptions. This is the patttern: In 99% of cases:

1. We want to subscribe to a pusher event stream when a component is mounted.
2. We want to unsubscribe above pusher stream when given component is unmounted.

It made sense to move the management of pusher subscriptions into a React component, so we don't have to manage it ourselves.

License: MIT

react-pusher's Issues

No License

This should be licensed MIT.

React Native Support

Given the relatively simple outlined structure here it seems adding in support for React Native should be supported. Currently trying to instantiate a Pusher component inside a React Native tree throws the following exception:

Invariant Violation: Expected a component class, got [Object object].

I presume this is because of the "noscript" tag returned through render(). Is there any way to detect an RN environment and return an empty View instead (if that is indeed the error)?

working example?

Subscription after channel/event props update not working correctly

Just got this error today :

• When channel/event props evolve in time, subscription to the new channel is not done.

I forked project and played with it : switching bind and unbind methods in componentWillReceiveProps seems to fix this issue in my case.

I made a PR with this fix.

Private channels?

Possibly a dumb question, but does this work with private channels? For some reason I can't seem to get it to subscribe / listen when using a private channel.

Undefined $this within pusher-js when rendering Pusher component

When I try to render a Pusher component, I receive this error:

TypeError: Cannot set property 'key' of undefined

Pusher
node_modules/pusher-js/dist/web/pusher.js:155

  152 |   logger_1["default"].warn("You should always specify a cluster when connecting. " + suffix);
  153 | }
  154 | 
> 155 | this.key = app_key;
      | ^  156 | this.config = Collections.extend(DefaultConfig.getGlobalConfig(), options.cluster ? DefaultConfig.getClusterConfig(options.cluster) : {}, options);
  157 | this.channels = factory_1["default"].createChannels();
  158 | this.global_emitter = new dispatcher_1["default"]();

My implementation:

import Pusher from 'pusher-js';
import { setPusherClient } from 'react-pusher';

    constructor(props){
        super(props);
        this.pusherClient = new Pusher("bf5df34b3b535a270b0a", {
            cluster: "us2",
        });
    }

    render(){
        setPusherClient(this.pusherClient);
        return (
            <Flexbox>
                <Pusher
                    channel="someChannel"
                    event="listChanged"
                />
            </Flexbox>
        )
    }

I'm assuming this is due to instantiating setPusherClient incorrectly?

Following the instructions causes this error

Uncaught Error: you must set a pusherClient by calling setPusherClient

My code is simply this

import { setPusherClient } from 'react-pusher';
import Pusher from 'react-pusher';

const pusherClient = new Pusher('xxxx1234567890xxxx', {encrypted: (document.location.protocol == 'https:')});
setPusherClient(pusherClient);

It's complaining about not having setPusherClient as soon as I define the variable.

onUpdate is not unsubscribed on component unmount

It seems that when a component unmounts, the onUpdate function is still called in my case. Also I cannot see that it is unsubscribed in the Pusher-dashboard.

npm package update

Hi! Could you update the npm package with the recent changes/fixes?

Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0

Hello there!

Thank you for the amazing package!

Although I seem to be getting a warning when I use your package in a create-react-app.
Would you have an idea why this is happening ?

Thanks in advance!

React hooks support!

Hey guys, I've released a package - @harelpls/use-pusher that provides react hooks for pusher, inspired by this library. Hope y'all find it useful.

React Warning -manually calling a React.PropTypes

Warning: You are manually calling a React.PropTypes validation function for the `channel` prop on `t`. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.