Angular socket.io несколько сообщений

Question

Я создаю Angular приложение с socket.io. В моем приложении много проектов, и у каждого проекта есть один чат: одна комната на socket.io. Когда я покидаю проект, я покидаю комнату, а когда я присоединяюсь к проекту, я присоединяюсь к комнате.

Проблема в том, что я нахожусь в проекте и могу опубликовать сообщение, и вижу сообщение (все правильно). Но когда я покидаю проект и присоединяюсь к одному и тому же проекту и отправляю сообщение, я вижу два сообщения. В конце концов, я вижу N сообщений из N, которые покидают / присоединяются.

Возможно ли, что Angular загружает мой компонент WebSocketService много раз, и это создает много соединений?

Это код socket.io сервер. js:

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
    res.send('<h1>Hello world</h1>');
});

io.on('connection', function (socket) {
    console.log('user connected !');

    socket.on('join_room', room => {
        console.log('join room : "' + room + '"');
        socket.join(room);
    });

    socket.on('post_message', ({room, data}) => {
        console.log(room, data);
        io.to(room).emit('new_message', data);
    });

    socket.on('leave_room', room => {
        console.log('leave room : "' + room + '"');
        socket.leave(room);
    });

    socket.on('disconnect', () => {
        console.log('disconnect');
    })
});

http.listen(3000, function(){
    console.log('listening on *:3000');
});

Вкл. Angular У меня есть ChatComponent, который использует WebSocketComponent:

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {Project} from '../models/project.module';
import {Globals} from '../providers/global';

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {

  room: string;

  constructor(public globals: Globals) {
    this.socket = io(environment.socketUrl);
  }

  on(eventName: string) {
    return new Observable((subscriber) => {
      this.globals.socket.on(eventName, (data) => {
        subscriber.next(data)
      });
      return () => this.globals.socket.disconnect()
    })
  }

  emit(eventName: string, data: any, toRoom: boolean = true) {
    if(toRoom) data = {'room':this.room, data};

    this.globals.socket.emit(eventName, data);
  }

  joinRoom(project: Project) {
    console.log('join : ' + project.name);
    this.emit('leave_room', this.room, false);
    this.room = 'project-' + project.id;
    this.emit('join_room', 'project-' + project.id, false);
  }

  leaveRoom(project: Project) {
    this.emit('leave_room', 'project-' + project.id, false);
    this.room = null;
  }

}

Спасибо за вашу помощь

(извините за мой английский sh я француз)