echo.js

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

export const pusher = Pusher;

export const config = authToken => ({
  broadcaster: 'pusher',
  key: 'myKey',
  wsHost: location.hostname,
  wsPort: 6001,
  disableStats: true,
  auth: {
    headers: {
      Authorization: `Bearer ${authToken}`,
    },
  },
});

export default Echo;

sagas.js

import { select, take, put, call, fork } from 'redux-saga/effects';
import { eventChannel as EventChannel } from 'redux-saga';
import Echo, { config } from 'constants/echo';
import { PROFILE_STORED } from 'actions/Auth/types';
import notificationActions from 'actions/Notification/actions';
import auth from 'sagas/selectors/auth';

const { setNotification } = notificationActions;

const connect = authToken => new Echo(config(authToken));

export function* subscribe(echo, organizationId) {
  return new EventChannel((emit) => {
    const update = notifications => emit(setNotification(notifications));
    echo.private(`organization.${organizationId}`).notification(update);
    return () => {
      // echo.leave(`organization.${organizationId}`);
    };
  });
}

function* read(echo) {
  const credentials = yield select(auth);
  const { profile } = credentials;
  const channel = yield call(subscribe, echo, profile.organization.id);
  while (true) {
    const action = yield take(channel);
    yield put(action);
  }
}

export default function* () {
  yield take(PROFILE_STORED);
  const credentials = yield select(auth);
  yield fork(read, connect(credentials.authToken));
}