Como usar websockets nos meus componentes

Front-end
#1

Bom dia a todos,

Eu tenho uma aplicação angular pequena com alguns componentes e um servico websocket.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {
  private socket: WebSocket;
  
  constructor() {
    this.socket = new WebSocket('ws://localhost:3000');
  }
  
  public connect(): Observable<any> {
    return new Observable(observer => {
      this.socket.onmessage = (event) => observer.next(event.data);
      this.socket.onerror = (event) => observer.error(event);
      this.socket.onclose = () => observer.complete();
    });
  }

  public sendMessage(message: string): void {
    this.socket.send(message);
  }
}

Eu posso usar o servico dentro de um componente da seguinte forma:

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  public messages: string[] = [];

  constructor(private webSocketService: WebSocketService) { }

  ngOnInit(): void {
    this.webSocketService.connect().subscribe(
      (message) => {
        this.messages.push(message);
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

Qual é a melhor maneira para os meus componentes se conectarem neste servico websocket?
Devo fazê-lo dentro do app component?
Todos os componentes que quiserem infos do servidor devem criar uma nova conexao?
Ou seria melhor que o servico retornasse um objeto socket que os componentes poderiam usar?

Eu nao tenho certa preciso de um ponto central de conexao ou se cada componente deve criar uma conexao própria usando o servico.

Obrigada!
Fonte: Real-time Data Updates in Angular: Implementing WebSockets | by Liudas Drejeris | JavaScript in Plain English

#2

Da forma como vc fez, parece bom pra mim, mas outra forma que vc poderia tentar seria usar um Subject (ou BehaviorSubject) para criar os Observables.

1 curtida