CODEWITHSUNDEEP
angularrxjssubscribe
sanitizedUser
sanitizedUser

Reputation: 1907

How can two Components subscribe to the same Event?

I have a Client service with an array "messages" that contains server messages. Then I have a component that subscribes to that array and checks every new message for its subject.

Like this:

client.messages.subscribe(msg => {
  switch (msg.SUBJECT)
  {
    case 'SOME_TEXT':
      //some code;
      break;
    default:
      console.log(msg);
      break;
  }
                                 });

However when I subscribe second component to that array with the same code (the only difference being the subjects in the switch), only the switch of the first component is executed.

Second component never gets the message.

Codes should be correct. The message is only received by component that is first in the project tree.

As you requested code for ClientService, here it is:

import { Injectable } from '@angular/core';
import { WebsocketService } from './websocket.service';
import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';

const CHAT_URL = //MY IP AND PORT;



export interface Message {
  SUBJECT: string;
  NAME?: string;
  ROOMS?: string[];
  //plus many others, some are strings, some numbers
}

@Injectable()
export class ClientService {
  public messages: Subject < Message > ;
  constructor(wsService: WebsocketService) {
    this.messages = < Subject < Message >> wsService
      .connect(CHAT_URL).pipe(
        map((response: MessageEvent): Message => {
          console.log(response);
          const data = JSON.parse(response.data);
          return data;
      }));
  }

And here is my WebSocketService that is used above.

import { Injectable } from '@angular/core';
import { Observable, Subject, Observer } from 'rxjs';
@Injectable()
export class WebsocketService {
  constructor() {}

  private subject: Subject < MessageEvent > ;

  public connect(url): Subject < MessageEvent > {
    if (!this.subject) {
      this.subject = this.create(url);
      console.log('Successfully connected: ' + url);
    }
    return this.subject;
  }

  private create(url): Subject < MessageEvent > {
    const ws = new WebSocket(url);
    const observable = Observable.create(
      (obs: Observer < MessageEvent > ) => {
        ws.onmessage = obs.next.bind(obs);
        ws.onerror = obs.error.bind(obs);
        ws.onclose = obs.complete.bind(obs);
        return ws.close.bind(ws);
      });
    const observer = {
      next: (data: Object) => {
        if (ws.readyState === WebSocket.OPEN) {
          ws.send(JSON.stringify(data));
        }
      }
    };
    return Subject.create(observer, observable);
  }

}

Upvotes: 4

Views: 538

Answers (1)

Fan Cheung
Fan Cheung

Reputation: 11345

Add a share() operator to ClientService see if it works

  this.messages = < Subject < Message >> wsService
      .connect(CHAT_URL).pipe(
        map((response: MessageEvent): Message => {
          console.log(response);
          const data = JSON.parse(response.data);
          return data;
      }),share());

Upvotes: 2

Related Questions