帶有Angular 2事件的Socket.io會觸發兩次

Question

我正在使用Socket.io 1.0與Angular 2.0.0-rc.5和Express 4.在bin / www fires中發送的次數與用戶連接的次數相同，因此，而不是一次廣播，他們得到多個，只有第一個事件有消息。 在幾乎無處不在的地方使用console.log我只能在bin / www socket.on（'add-message'）中生成多個日志

斌/ 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

如果有人遇到同樣的問題，我設法解決了這個問題。 我正在運行兩台服務器。 用於Angular 2 app和nodemon的lite-server。 Lite服務器和瀏覽器同步導致了問題。 通過一台服務器運行項目解決了這個問題。