How to use pusher-js - 10 common examples

init() {
    // Log only if env is testing or development.
    Pusher.logToConsole = CONSTANTS.PUSHER.logToConsole || true;
    // Init Pusher
    const options = {
      encrypted: true,
      app: window.WOOT,
      cluster: CONSTANTS.PUSHER.cluster,
    };
    const pusher = new VuePusher(CONSTANTS.PUSHER.token, options);
    // Add to global Obj
    if (AuthAPI.isLoggedIn()) {
      pusher.subscribe(AuthAPI.getPubSubToken());
      return pusher.pusher;
    }
    return null;
  },
};

TravisPusher.prototype.init = function (config, apiService) {
  if (!config.key) {
    // Set up a mock Pusher that ignores the expected methods.
    return this.pusher = {
      subscribe() {
        return {
          bind_global() {}
        };
      },
      unsubscribe() {},
      channel() {}
    };
  }

  this.apiService = apiService;
  Pusher.warn = this.warn.bind(this);

  if (config.debug) {
    Pusher.log = function (message) {
      if (window.console && window.console.log) {
        window.console.log(message);
      }
    };
  }

  let pusherConfig = {
    encrypted: config.encrypted,
    disableStats: true,
    wsHost: config.host,

    authorizer: function (channel, options) {
      return {

constructor(debug: DebugOptions) {
    // @ts-ignore
    this.client = new Pusher('18c26c0d1c7fafb78ba2', {
      cluster: 'us2',
      encrypted: true
    });

    this.channelID = '';
    this.debug = debug;
  }

import React from "react";
import Pusher from "pusher-js";
import { PUSHER_CONFIG } from "./config/pusher.config";
import "./App.css";
import { PusherProvider } from "./PusherContext";
import { Child } from "./Child";

// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;

// Set up pusher instance with main channel subscription
// Be able to subscribe to the same channel in another component
// with separate callback but utilizing the existing connection
const pusher = new Pusher(PUSHER_CONFIG.key, {
  cluster: PUSHER_CONFIG.cluster,
  forceTLS: true
});

function App() {
  return (
    
      <div>
        <header>Context API w/ Pusher real-time</header>
        <main>
          <span>Put some main component here</span></main></div>

import PlayerList from '../components/PlayerList';
import ResultList from '../components/ResultList';
import Button from '../components/Button';
import IconButton from '../components/IconButton';
import SafeImage from '../components/SafeImage';
import ListPicker from '../components/ListPicker';
import CalculatorInput from '../components/CalculatorInput';
import TutorialModal from '../components/TutorialModal';
import StatusBar from '../components/StatusBar';

import Pusher from 'pusher-js/react-native';

// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;

var pusher = new Pusher(PUSHER_API_KEY, {
  cluster: PUSHER_CLUSTER,
  encrypted: true
});

export default class GameView extends Component {

	constructor(props){
		super(props);
		const {navigation} = props;
		const {user,game,token,showTutorial} = navigation.state.params;
		const is_host = (game.host === user.id);

		var channel = pusher.subscribe(game.identifier);
		channel.bind('game-update', function(data) {
		  this.setState({game:data.game});
		}.bind(this));

const Bitstamp_WS = function(opts) {
    if (opts) {
      this.opts = opts
    } else {
      this.opts = {
        encrypted: true,
      }
    }

    this.client = new Pusher(BITSTAMP_PUSHER_KEY, {
      encrypted: this.opts.encrypted,
      // encrypted: true
    })

    // bitstamp publishes all data over just 2 channels
    // make sure we only subscribe to each channel once
    this.bound = {
      trade: false,
      data: false,
    }

    this.subscribe()
  }

import styles, {app_red,app_pink} from '../Styles';
import * as utils from '../UtilFunctions';
import PlayerList from '../components/PlayerList';
import ResultList from '../components/ResultList';
import Button from '../components/Button';
import IconButton from '../components/IconButton';
import SafeImage from '../components/SafeImage';
import ListPicker from '../components/ListPicker';
import CalculatorInput from '../components/CalculatorInput';
import TutorialModal from '../components/TutorialModal';
import StatusBar from '../components/StatusBar';

import Pusher from 'pusher-js/react-native';

// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;

var pusher = new Pusher(PUSHER_API_KEY, {
  cluster: PUSHER_CLUSTER,
  encrypted: true
});

export default class GameView extends Component {

	constructor(props){
		super(props);
		const {navigation} = props;
		const {user,game,token,showTutorial} = navigation.state.params;
		const is_host = (game.host === user.id);

		var channel = pusher.subscribe(game.identifier);
		channel.bind('game-update', function(data) {

created () {
      this.pusher = new Pusher('49f09fe21ef2b756c13f', {
        encrypted: true,
        cluster: 'mt1'
      })
      let that = this
      this.channel = this.pusher.subscribe('chat_channel')
      this.channel.bind('chat_saved', function (data) {
        that.$emit('incoming_chat', data)
      })
      this.$on('incoming_chat', function (chatMessage) {
        this.incomingChat(chatMessage)
      })
    },
    computed: {

connectToHost() {
    this.setState({ connecting: true });

    let pusher = new Pusher('b5ee32e8c6b0d68d380b', {
      authTransport: 'ajax',
      authEndpoint: '/pusher/auth?id=2'
    });

    let channel;
    try {
      channel = pusher.subscribe('presence-chat-'+ this.state.clientID);
    }
    catch(err) {
      console.log(err);
      this.setState({ connecting: false });
      return;
    }

    let peer;

init(user, lastMessageId) {
    if (user) this.user = user
    if (lastMessageId) this.lastMessageId = lastMessageId
    if (this.pusher || !this.user.id || !this.appId) return
    this.pusher = new Pusher(PUSHER_KEY, {
      cluster: 'eu',
      authEndpoint: `${HUBTYPE_API_URL}/v1/provider_accounts/webhooks/webchat/${this.appId}/auth/`,
      forceTLS: true,
      auth: {
        headers: {
          'X-BOTONIC-USER-ID': this.user.id,
          'X-BOTONIC-LAST-MESSAGE-ID': this.lastMessageId,
        },
      },
    })
    this.channel = this.pusher.subscribe(this.pusherChannel)
    let connectionPromise = new Promise((resolve, reject) => {
      let cleanAndReject = msg => {
        clearTimeout(connectTimeout)
        this.pusher.connection.unbind()
        this.channel.unbind()