带有Angular 2事件的Socket.io会触发两次

Question

I am using Socket.io 1.0 with Angular 2.0.0-rc.5 and Express 4. Emit in bin/www fires as many times as the users connected, So rather than one broadcast they get multiple and only the first event has the message. Using console.log in just about everywhere i can tell it only produces multiple logs inside bin/www socket.on('add-message')

bin/www

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('a2-test:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '4000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

var io = require('socket.io')(server);

io.on('connection', function (socket) {

  console.log('a user connected', socket.id);

  socket.on('add-message', (message) => {
    console.log('broadcast', socket.id, message)
    io.emit('message', {text: message})
  });
});

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

chat.component.ts

export class ChatComponent implements OnInit, OnDestroy {
    messages = [];
    connection;
    message;

    constructor(private chatService: ChatService) {

     }

    sendMessage() {
        this.chatService.sendMessage(this.message);
        this.message = '';
    }

    ngOnInit() {
        this.connection = this.chatService.getMessages().subscribe(
            (msg) => {
                this.messages.push(msg)
            });
    }

    ngOnDestroy() {
        this.connection.unsubscribe();
    }
}

chat.service.ts

import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import * as io from 'socket.io-client';

export class ChatService {
  private url = 'http://localhost:4000';  
  private socket;

  sendMessage(message){
    this.socket.emit('add-message', message);
  }

  getMessages() {
    let observable = new Observable(observer => {
      this.socket = io(this.url);

      this.socket.on('message', (data) => {
        observer.next(data);    
      });

      return () => {
        this.socket.disconnect();
      };  
    })     
    return observable;
  }  
}

chat.template.html

<div class="col-lg-8 well" style="min-height: 200px">
    <ul class="col-lg-12">
        <li *ngFor="let message of messages">
            {{message.text}}
        </li>
    </ul>
</div>
<div class="col-lg-4 well">
    <input [(ngModel)]="message" class="form-control">
    <br>
    <button class="btn btn-primary col-lg-4" (click)="sendMessage()">Send</button>
</div>

Answer 1

I managed to solve the problem if anyone is stuck on the same issue. I was running two servers. lite-server for the Angular 2 app and nodemon. Lite server and Browser sync were causing the problem. Running the project through one server solved the problem.