Angular 4中间歇性地OpenTok / Tokbox同一订户的多个副本

Question

我间歇性地间歇性地看到同一订户的多个副本，但不是出版商，无法解决原因......或者，令人烦恼的是，如何重现问题。

我有一个使用https://github.com/tomcorbett/opentok-laravel的Laravel 5.4 api来生成会话和令牌，这似乎工作正常（使用手动/静态会话和令牌时也有同样的问题）。 Angular 4客户端代码如下 - 注意我已插入一些额外的代码以试图阻止对同一用户/多个出版物的多个订阅（尽管没有起诉有后者的任何证据）但似乎没有工作 - 任何关于如何防止多次订阅同一用户的想法感激不尽。

setupOpentok() {
        let sessionId: string = this.club.opentok_session_id; 
        //TODO - change rather inelegant way of getting token
        let token: string = this.user.pivot.opentok_token;

        this.openTokSession = OT.initSession(myGlobals.opentokApiKey, sessionId);

        this.openTokSession.on('streamCreated', (event: any) => {
                //Added code to only add stream to appropriate div if this user not already subscribed to
                let alreadySubscribed: boolean = false;
                for (let userId of this.subscribers) {
                    if (userId === event.stream.connection.data) {
                        alreadySubscribed = true;
                        break; //we have our token so leave loop
                    }  
                }
                if(!alreadySubscribed) {
                    var subscriberProperties = {
                        insertMode: 'append', 
                        width: '100%',
                        height: '100%'
                    };
                    //create a child of vidFeeds with unique id using userId from token
                    var subscriberDiv = document.createElement('div');
                    subscriberDiv.id = 'subscriberDiv_' + event.stream.connection.data;
                    var vidFeedsDiv = document.getElementById('vidFeeds');
                    vidFeedsDiv.appendChild(subscriberDiv);
                    var subscriber = this.openTokSession.subscribe(event.stream,
                        subscriberDiv.id,
                        subscriberProperties,
                        (error: any) => {
                            if (error) {
                                console.log(error);
                            } else {
                                this.subscribers.push(Number(event.stream.connection.data));
                            }
                        }
                    );

                    subscriber.element.style.display = 'inline-block';
                }
            });

        this.openTokSession.on("sessionDisconnected", (event:any) => {
            if(typeof(event.stream) !== 'undefined') {
                console.log("Stream disconnected - " + event.stream.connection.data);
                let counter: number = 0;
                let disconnectedId: number;
                for (let userId of this.subscribers) {
                    if (userId === event.stream.connection.data) {
                        disconnectedId = counter;
                        break; 
                    } 
                    counter++;
                }
                this.subscribers.splice(counter, 1); //clearing reference so we can reload when it reconnects
            }
        });

        this.openTokSession.on("streamDestroyed", (event:any) => {
            if(typeof(event.stream) !== 'undefined') {
                console.log("Stream destroyed - " + event.stream.connection.data);
                let counter: number = 0;
                let disconnectedId: number;
                for (let userId of this.subscribers) {
                    if (userId === event.stream.connection.data) {
                        disconnectedId = counter;
                        break; 
                    } 
                    counter++;
                }
                this.subscribers.splice(counter, 1); //clearing reference so we can reload when it reconnects
            }
        });

        let nickNameToShow = this.auth.userProfile.nickname;
        this.openTokSession.connect(token, (error: any) => {
                if(!this.publisher){  //trying to prevent multiple copies of video streams - there should only be one publisher per session
                    //create a child of vidFeeds with unique id using userId from token
                    var publisherDiv = document.createElement('div');
                    publisherDiv.id = 'publisherDiv';
                    var vidFeedsDiv = document.getElementById('vidFeeds');
                    vidFeedsDiv.appendChild(publisherDiv);
                    this.publisher = OT.initPublisher(publisherDiv.id, {
                        name: nickNameToShow,
                        insertMode: 'append',
                        width: '100%',
                        height: '100%'
                        }
                    );
                    //that.getUserDataForVideo(that.auth.userProfile.id, false); //it's a publisher
                    this.publisher.element.style.display = 'inline-block';
                    this.openTokSession.publish(this.publisher);    
                }
            });
    }

Answer 1

很抱歉浪费任何人的时间，但我想发布最终为我工作的东西，以克服同一个订阅者的多个副本的问题：

this.openTokSession.on('streamCreated', (event: any) => {
                //only add stream to appropriate div if this user not already subscribed to
                let alreadySubscribed: boolean = false;
                //before reconnecting check whether there's already a subscriber with same connection Id
                var subscribers = this.openTokSession.getSubscribersForStream(event.stream);
                for (let subscriber of subscribers) {
                    if(subscriber.stream.connection.connectionId === event.stream.connection.connectionId){
                        alreadySubscribed=true;    
                    }
                }
                if(!alreadySubscribed) {
                    var subscriberProperties = {
                        insertMode: 'append', 
                        width: '100%',
                        height: '100%'
                    };
                    //create a child of vidFeeds with unique id using userId from token
                    var subscriberDiv = document.createElement('div');
                    subscriberDiv.id = 'subscriberDiv_' + event.stream.connection.data;
                    var vidFeedsDiv = document.getElementById('vidFeeds');
                    vidFeedsDiv.appendChild(subscriberDiv);
                    var subscriber = this.openTokSession.subscribe(event.stream,
                        subscriberDiv.id,
                        subscriberProperties,
                        (error: any) => {
                            if (error) {
                                console.log(error);
                            } else {

                            }
                        }
                    );
                }
            });