unable to subscribe to pusher notification

I have created a pusher service, but I am unable to subscribe unless the page is not reloaded. using angular 14

this.pusherService.subscribeToChannel('private-user.', ['channel_name.event'], (data) => {
      console.log(data);
    })

pusher service

import { Injectable } from '@angular/core';
import Pusher from 'pusher-js';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { throwError } from 'rxjs';
import { catchError, retryWhen, map } from 'rxjs/operators';
import { environment } from '../../environments/environment';
import { genericRetryStrategy } from './rxjs-utils';


@Injectable({
  providedIn: 'root'
})
export class PusherService {
  pusher: any;
  constructor(private http: HttpClient) {
    this.pusher = new Pusher(environment.PUSHER_API_KEY, {
      cluster: environment.PUSHER_API_CLUSTER,
      forceTLS: true,
      authEndpoint: environment.uri + `broadcasting/auth`,
      auth: {
        headers: {
          'Authorization': 'Bearer ' + `token`
        }
      },
    });
  }

  subscribeToChannel(channelName: string, events: String[], cb: Function) {
    const channel = this.pusher.subscribe(channelName + this.getUserId());
    events.forEach((event: any) => {
      channel.bind(event, (data) => {
        cb(data);
      });
    });
  }
}