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);
  }

}

1 Answers

2
Fan Cheung On Best Solutions

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());