Как два компонента могут подписаться на одно и то же событие? - PullRequest
Новая
       17

Как два компонента могут подписаться на одно и то же событие?

4 голосов
/ 28 апреля 2019

У меня есть Клиент сервис с массивом "messages" , который содержит сообщения сервера. Затем у меня есть компонент, который подписывается на этот массив и проверяет каждое новое сообщение на предмет его предмета.

Как это: 

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

Однако, когда я подписываю второй компонент на этот массив с тем же кодом (единственное отличие заключается в субъектах в переключателе) , выполняется только переключение первого компонента.

Второй компонент никогда не получает сообщение.

Коды должны быть правильными. Сообщение принимается только компонентом, который находится первым в дереве проекта.

Поскольку вы запрашивали код для ClientService, вот он: 

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

А вот мой WebSocketService, который используется выше. 

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 Ответ

2 голосов
/ 28 апреля 2019

Добавьте оператор share () в ClientService, посмотрите, работает ли он 

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