Question

美好的一天在angular2上写聊天时遇到问题。使用了库socket.IO 获取websocket服务使用的数据在其中导入几个组件收到的新消息的组成部分当服务器将它们发送到客户端时

chatservice2.service.ts

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

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

@Injectable()
export class ChatService {
    private url:string = 'http://websocketserver:1080/';
    private socket;

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

    getMessages() {
        let observable = new Observable(observer => {
            if (!this.socket) {
                console.log('create ws connection');
                let connectionOptions = {
                    'reconnection': true,
                    'reconnectionDelay': 10000, //milliseconds
                    'reconnectionDelayMax' : 15000, //milliseconds
                    'reconnectionAttempts': 30
                };
                this.socket = io(this.url, connectionOptions);
            }

            this.socket.on('message', (data) => {
                console.log('chatservice2.service next message observer', data, observer);
                observer.next(data);
            });
            return () => {
                this.socket.disconnect();
            };
        });
        return observable;
    }
}

dialog.component.ts

   //...
import { ChatService } from '../chatservice2.service';
//...

@Component({
    selector: 'app-dialog',
    templateUrl: './dialog.component.html',
    styleUrls: ['./dialog.component.css'],
    providers: [HttpService]
})
//...
export class DialogComponent implements OnInit {
    private wsChannel$;

    constructor(
        private chatService: ChatService
    ) {}

    ngOnInit() {
        console.log('dialog component ngOnInit');
        this.wsChannel$ = this.chatService
            .getMessages()
            .subscribe(message => {
                console.log('message dialog.component', message);
                this.someFunc(message);
                //...
            });
    }

    ngOnDestroy() {
        this.wsChannel$.unsubscribe();
    }
    //...

}

如果您是第一次打开组件（dialog.component.ts）。消息来了。一切都好。如果您导航到另一个组件。然后返回到dialog.component.ts消息将停止，即24行console.log（'message dialog.component'，message）将不会触发。如果你删除this.wsChannel $ .unsubscribe（）;在组件dialog.component.ts控制台中的2次转换之后的方法ngOnDestroy中的（第32行）将被触发2次，一次用于来自服务器的传入websocket消息。如果您执行10个套接功能，控制台将在单个websocket消息上触发10次。问题是如何解决它？如何在保留组件和chatservice2.service.ts中的消息时不会重复使用取消订阅方法。我的错是什么？在此先感谢您的帮助

Angular2 socket.io单例websocket服务，用于某些组件

0 个答案: